p:last-child:after {
content: "\2766"; /* Here comes the ivy leaf */
font-size: 150%; /* Makes the leaf larger than the normal text */
padding-left: 10px; /* Leaf won't clash with the last letter of the text */
float: right; /* Horizontal position is set to the right edge of the column */
position: relative; /* This is just an homage to Albert Einstein */
top: 15px /*Vertical distance from the last line of text */
}
有這個 css 的例子嗎?
#wrapper p:last-child:after {
content: “\2766”; /* 這裡是常春藤葉 */
font-size: 150%; /* 使葉子比普通文字更大 */
position: relative; /* 這只是對愛因斯坦的致敬 */
top: 15px; /* 與最後一行文字的垂直距離 */
display: block; /* 放在新的一行 */
text-align: center; /* 放在中間 */
}
這就是我正在使用的,看起來很棒。
這個數字表示什麼 “\2766” ,如何找到其他圖像的引用號碼。
content: “\2766″; /* 這裡是常春藤葉 */
這個數字表示什麼 “\2766” ,如何找到其他圖像的引用號碼。
content: “\2766″; /* 這裡是常春藤葉 */
您可以在這裡找到大量的 unicode:http://www.decodeunicode.org/en/u+2615。
如果您想替換常春藤葉符號,只需相應地替換數字即可,即
不要使用 “\2766″ 使用 “\2615” ( 熱飲 )
謝謝
這是一個符號的唯一代碼,就像表情符號一樣,有很多網站可以獲得這些代碼。
真的很酷。我隨機輸入 unicode 編號,直到找到我想要的星號字符 (2605)……
我的問題是,我可以使用 css 使其工作,但無法在網頁的 html 中使其工作。
我不想將它放在 div 中每個故事的末尾,而只放在一些特定的地方。我嘗試過
ਭ
,結果得到了與使用 css 時完全不同的字符。字體差異?有效的方法是分配一個 span .star:after {content:”\2605″},然後在 html 中使用一個空白 span 引用 <span class=”star”></span>。
不出所料,:last-child 在 IE 中不起作用,但使用 span 標籤卻可以。
糟糕 - 這裡的奇怪字符是我所指的奇怪字符。我在數字前面添加了 &#,在末尾添加了 ;,以典型的 unicode 風格。
抱歉讓任何人困惑,但我發現 &; 是用於 ascii,&#x; 是用於 unicode。
這樣,插入 ★ 可以直接將 unicode 插入 html。
” position: relative; /* 這只是對愛因斯坦的致敬 */”
這段代碼最傑出的部分,非常喜歡,真的 :)
對於那些正在尋找 Unicode 符號的人,維基百科有按類別排序的表格
我喜歡這個技巧,真的非常聰明。通過一些修改 (p:first-child:before 和 p:last-child:after),我可以使用引號符號而不是圖像。
謝謝!:-)
有人可以給我一個 HTML 看起來像什麼的例子嗎?
很多次。
是的,這不起作用。
這是什麼?我甚至找不到例子。把它放在我的樣式表中,我的頁面 (頁) 沒有任何變化。任何人都可以詳細說明和/或提供一個示例網址嗎?謝謝。
哦,我明白了。謝謝!:)
你不是網頁設計師吧?請使用 Word….
哇,Ang,你是“設計師”世界中典型的混蛋。除了混蛋什麼也沒有。這就是為什麼大多數人更喜歡將東西運送到印度。不必應付像你這樣的蠢貨。
http://www.isthisthingon.org/unicode/allchars1.php
這幾乎包含了你能想到的每一個 unicode。(它可能需要一些時間來加載)
Twitter Bootstrap 的“Font Awesome”圖標包含大量圖標及其 unicode。
但是,在使用任何圖標之前,您需要下載“Font-Awesome”字體。
http://fortawesome.github.io/Font-Awesome/cheatsheet/
有點不開心沒有展示例子……所以這裡有一個例子
Ivy Jsfiddler 例子
從這裡獲得更多圖標和圖像
=> http://www.utf8icons.com/