最新无码人妻在线不卡,国产午夜毛片v一区二区三区,欧美成人看片黄a免费

　first-letter的一個小妙用

作者：yoom　時間： 2010-03-19　文檔類型：原創(chuàng)　來自：藍色理想

OL定義有序列表的時候，除非指定list-style-position:inside;，否則文字和前導(dǎo)符是有縮進的。

但有的時候，OL定義的列表類型有限制，比如不能定義漢字的“一、二、三”，我們只好手動來輸入這些字符，但這下文字和字符連在一起。

這個時候就可以使用first-letter這個偽類來幫忙了：

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>first-letter</title> <style type="text/css"> body{font-size:12px;width:600px;margin:2em auto;} ol.list { list-style:none; } ol.list li:first-letter { margin-left:-2em;color:blue;font-weight:bold;} </style> </head> <body> <ol> <li>最初被稱為盒模型酸試驗，是一個用于測試瀏覽器的網(wǎng)頁。它在1998年10月開發(fā)，成為了衡量早期瀏覽器兼容性的重要準(zhǔn)線，特別是瀏覽器對層疊樣式表1.0的支持情況。就像用酸試驗來迅速并直觀的衡量一塊金屬的質(zhì)量好壞，網(wǎng)頁酸試驗的目標(biāo)是提供一個可以清楚地表明瀏覽器的是否遵守 Web 標(biāo)準(zhǔn)的方法。</li> <li>該版本針對支持HTML、CSS 2.0及PNG圖像[1]標(biāo)準(zhǔn)的綜合測試，由網(wǎng)頁標(biāo)準(zhǔn)計劃小組（Web Standards Project）設(shè)計。</li> <li>于 2008年3月3日正式發(fā)布，其測試焦點集中在ECMAScript、DOM Level 3、Media Queries和data: URL[3]。以瀏覽器打開此測試網(wǎng)頁后，頁面會不斷加載功能[4]并根據(jù)測試情況給予分數(shù)，滿分為100分</li> </ol> <hr /> <ol class="list"> <li>一、最初被稱為盒模型酸試驗，是一個用于測試瀏覽器的網(wǎng)頁。它在1998年10月開發(fā)，成為了衡量早期瀏覽器兼容性的重要準(zhǔn)線，特別是瀏覽器對層疊樣式表1.0的支持情況。就像用酸試驗來迅速并直觀的衡量一塊金屬的質(zhì)量好壞，網(wǎng)頁酸試驗的目標(biāo)是提供一個可以清楚地表明瀏覽器的是否遵守 Web 標(biāo)準(zhǔn)的方法。</li> <li>二、該版本針對支持HTML、CSS 2.0及PNG圖像[1]標(biāo)準(zhǔn)的綜合測試，由網(wǎng)頁標(biāo)準(zhǔn)計劃小組（Web Standards Project）設(shè)計。</li> <li>三、2008年3月3日正式發(fā)布，其測試焦點集中在ECMAScript、DOM Level 3、Media Queries和data: URL[3]。以瀏覽器打開此測試網(wǎng)頁后，頁面會不斷加載功能[4]并根據(jù)測試情況給予分數(shù)，滿分為100分</li> </ol> <hr /> <ol class="list"> <li>壹、最初被稱為盒模型酸試驗，是一個用于測試瀏覽器的網(wǎng)頁。它在1998年10月開發(fā)，成為了衡量早期瀏覽器兼容性的重要準(zhǔn)線，特別是瀏覽器對層疊樣式表1.0的支持情況。就像用酸試驗來迅速并直觀的衡量一塊金屬的質(zhì)量好壞，網(wǎng)頁酸試驗的目標(biāo)是提供一個可以清楚地表明瀏覽器的是否遵守 Web 標(biāo)準(zhǔn)的方法。</li> <li>貳、該版本針對支持HTML、CSS 2.0及PNG圖像[1]標(biāo)準(zhǔn)的綜合測試，由網(wǎng)頁標(biāo)準(zhǔn)計劃小組（Web Standards Project）設(shè)計。</li> <li>叁、2008年3月3日正式發(fā)布，其測試焦點集中在ECMAScript、DOM Level 3、Media Queries和data: URL[3]。以瀏覽器打開此測試網(wǎng)頁后，頁面會不斷加載功能[4]并根據(jù)測試情況給予分數(shù)，滿分為100分</li> </ol> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

這下，前導(dǎo)符就和文字保持一定距離了，而且能控制的樣式也更多一點。
不過前導(dǎo)符后面那個頓號就控制不到樣式了，但我想可不可以設(shè)置背景圖來取代呢？
簡單測試卻發(fā)現(xiàn)，控制first-letter偽類的背景，與控制list-style-image一樣讓人琢磨不透，遂棄之。

另外，各個瀏覽器對待前導(dǎo)符旁邊的符號處理方式也不一樣，因為沒有安裝Safari，所以沒有測試它：

代碼：

渲染結(jié)果：

IE8和FF3和Opera表現(xiàn)一致，Chrome只對左側(cè)的符號進行處理，IE6、7就只處理了第一個字符。

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2973723-1-1.html

本文鏈接：http://www.95time.cn/tech/web/2010/7455.asp　

出處：藍色理想
責(zé)任編輯：bluehearts

◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。

相關(guān)文章

CSS圓角——圓角化圖片

作者文章

再談float菜單局中


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計比賽網(wǎng)頁制作 web標(biāo)準(zhǔn) 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大�！熬�•自然”設(shè)計大賽開啟

國際體驗設(shè)計大會7月將在京舉行

中國國防科技信息中心標(biāo)志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會

阿里行云

云手機年終巨獻，送禮標(biāo)配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機主題設(shè)計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx