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

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

1. 
2. 

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

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

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

歡迎來到上海，歡迎參觀世博會(huì)！

我們不妨試試下面的代碼： /* 為不同語言指定引號(hào)的表現(xiàn) */ :lang(en) > q {quotes:'"' '"';} :lang(no) > q {quotes:"«" "»";} :lang(ch) > q {quotes:"“" "”";} /* 在q標(biāo)簽的前后插入引號(hào) */ q:before {content:open-quote;} q:after {content:close-quote;} 您可以狠狠地點(diǎn)擊這里：content生成對(duì)應(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)點(diǎn)在于文字內(nèi)容確實(shí)被替換了。因此，您沒有必要設(shè)定高寬為圖片的顯示創(chuàng)造空間，或是使用text-indent或是padding隱藏最初的文字。 然而，就目前而言，還是有不少需要注意的： 1. 你不能對(duì)圖片進(jìn)行重復(fù)或平鋪，或是使用image sprite。 2. 目前僅在Opera 9.5+ 和 Safari 4+瀏覽器下起作用，因?yàn)檫@些瀏覽器支持所有元素的content方法，而不僅僅局限于:after或是:before。 替換的圖片無法應(yīng)用alt屬性，所以一些特殊的使用屏幕閱讀器的用戶可能無法理解您替換的圖片的含義。 四．顯示相對(duì)應(yīng)的鏈接圖標(biāo) 指的是針對(duì)不同的鏈接類型，在鏈接的后面顯示對(duì)應(yīng)鏈接類型的圖標(biāo)，例如，鏈接的對(duì)象是一個(gè)圖片，則顯示圖片的小圖標(biāo)，如果鏈接對(duì)象是視頻，則顯示視頻小圖標(biāo)，如果鏈接就是個(gè)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站點(diǎn)的性能優(yōu)化.pdf，或是在線查看，點(diǎn)擊這里。


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