UI培訓(xùn)之使用計數(shù)器創(chuàng)建號碼內(nèi)容

一．使用計數(shù)器創(chuàng)建號碼內(nèi)容 如果您想插入一系列遞增的值，比如說“美女1，美女2，美女3，美女4……”，您就可以使用計數(shù)器在每個列表項的前面插入遞增的序號值。CSS代碼如下： ol { list-style-type:none; counter-reset:sectioncounter; } ol li:before { content:"美女" counter(sectioncounter) "： "; counter-increment:sectioncounter; } HTML代碼如下：

1. 
2. 

您可以狠狠地點擊這里：content產(chǎn)生遞增序號demo 說明： 1. ol標(biāo)簽應(yīng)用counter-reset屬性，li標(biāo)簽應(yīng)用counter-increment屬性，值均為sectioncounter，再配合content屬性，以及counter計數(shù)器就可以實現(xiàn)遞增的效果了。 2. 如果您指定了元素display:none，則content下的計數(shù)器不會產(chǎn)生遞增值。 3. 當(dāng)然，如果瀏覽器不支持此方法，那么就不會有數(shù)字出現(xiàn)，您使用firebug或是之類的工具查看真實的HTML時不會看到產(chǎn)生的數(shù)值，不要有疑惑，content屬性動態(tài)生成的內(nèi)容是純粹的裝飾而已，虛假的表象。 4. 如果您對CSS計數(shù)器感興趣，想深入了解，可以參見David Storey一篇優(yōu)秀的文章：Automatic numbering with CSS Counters。 二．為多語言內(nèi)容插入正確的引號 不同的語言使用不同的引號字符。比如英文的引號就是""，而中文引號就是“”。使用content可以使得不同的語言使用對應(yīng)的一些字符。例如，我們需要對下面的些文字添加其對應(yīng)語言的引號，該怎么辦呢？

It’s only work if somebody makes you do it.

Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.

歡迎來到上海，歡迎參觀世博會！

我們不妨試試下面的代碼： /* 為不同語言指定引號的表現(xiàn) */ :lang(en) > q {quotes:'"' '"';} :lang(no) > q {quotes:"«" "»";} :lang(ch) > q {quotes:"“" "”";} /* 在q標(biāo)簽的前后插入引號 */ q:before {content:open-quote;} q:after {content:close-quote;} 您可以狠狠地點擊這里：content生成對應(yīng)語言字符demo 此技術(shù)可以應(yīng)用于各類元素，而不僅僅是q標(biāo)簽，另外，Safari 3以及IE7（以及以下）是不支持此技術(shù)的。 三．用圖片替換文字 關(guān)于圖片替換技術(shù)，您可以參見這里：several image replacement techniques，里面提供了幾種方法。而這里展示的則是另外不同的用圖片替換方法，使用的是content。 您可以參見下面的代碼： div.logo { content:url(logo.png); } 這種圖片替換技術(shù)的優(yōu)點在于文字內(nèi)容確實被替換了。因此，您沒有必要設(shè)定高寬為圖片的顯示創(chuàng)造空間，或是使用text-indent或是padding隱藏最初的文字。 然而，就目前而言，還是有不少需要注意的： 1. 你不能對圖片進行重復(fù)或平鋪，或是使用image sprite。 2. 目前僅在Opera 9.5+ 和 Safari 4+瀏覽器下起作用，因為這些瀏覽器支持所有元素的content方法，而不僅僅局限于:after或是:before。 替換的圖片無法應(yīng)用alt屬性，所以一些特殊的使用屏幕閱讀器的用戶可能無法理解您替換的圖片的含義。 四．顯示相對應(yīng)的鏈接圖標(biāo) 指的是針對不同的鏈接類型，在鏈接的后面顯示對應(yīng)鏈接類型的圖標(biāo)，例如，鏈接的對象是一個圖片，則顯示圖片的小圖標(biāo)，如果鏈接對象是視頻，則顯示視頻小圖標(biāo)，如果鏈接就是個URL網(wǎng)頁鏈接，則顯示鏈接的小圖標(biāo)。您可以參見下面的代碼： CSS代碼： p a[href $=".pdf"]:after { content:url(../image/icon_pdf.png); } p a[rel = "external"]:after { content:url(../image/icon_link.png); } HTML代碼：

您可以查看此PDF文件：web站點的性能優(yōu)化.pdf，或是在線查看，點擊這里。


本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://xamj520.com/ui