十天(tiān)學會web標準div+CSS HTML列(liè)表，包含以(yǐ)下(xià)內容和知(zhī)識(shí)點(diǎn)：
一，ul無序和ol有序列表 二，改變項目符號樣式或用圖片定義項目符號 三，橫向圖文列表 四，浮動後父容器高度自適應 五，IE6的雙倍邊距bug
一，ul無(wú)序和(hé)ol有序列(liè)表
無序(xù)列(liè)表是(shì)web標(biāo)準(zhǔn)布(bù)局(jú)中(zhōng)最(zuì)常用的(dí)樣式，代(dài)碼(mǎ)如下(xià)：
<div id="layout">
<ul>
<li><a title="第(dì)五(wǔ)天(tiān) 超鏈(liàn)接偽(wěi)類" href="/div_css/906.shtml" target="_blank">第五(wǔ)天 超鏈接偽類</a></li>
<li><a title="第(dì)四(sì)天(tiān) 縱(zòng)向導(dǎo)航菜單(dān)" href="/div_css/905.shtml" target="_blank">第四天 縱向(xiàng)導(dǎo)航菜單(dān)</a></li>
<li><a title="第(dì)三天 二(èr)列(liè)和(hé)三列布局(jú)" href="/div_css/904.shtml" target="_blank">第三(sān)天 二(èr)列(liè)和三列(liè)布局(jú)</a></li>
<li><a title="第二(èr)天(tiān) 一(yī)列布(bù)局" href="/div_css/903.shtml" target="_blank">第(dì)二(èr)天(tiān) 一列布(bù)局</a></li>
<li><a title="第(dì)一(yī)天 XHTML CSS基礎(chǔ)知識" href="/div_css/902.shtml" target="_blank">第一(yī)天 XHTML CSS基礎(chǔ)知識(shí)</a></li>
</ul>
</div>
這(zhè)就是(shì)有(yǒu)無(wú)序列表，是以ul包含li的形式，默認(rèn)每(měi)行前(qián)的符(fú)號是圓(yuán)點(diǎn)，可以(yǐ)通(tōng)過(guò)樣式表(biǎo)改(gǎi)為無(wú)，方塊，空(kōng)心(xīn)圓等(děng)。有序(xù)列(liè)表(biǎo)是(shì)以ol包(bāo)含(hán)li的(dí)形式，是以數字為(wéi)項目符(fú)號的，無序(xù)列表也可以用css定義顯(xiǎn)示(shì)成(chéng)有序列(liè)表，代碼及顯(xiǎn)示效果如下(xià)：
<div id="layout">
<ol>
<li><a title="第(dì)五天 超鏈接偽(wěi)類" href="/div_css/906.shtml" target="_blank">第(dì)五(wǔ)天 超鏈接偽(wěi)類</a></li>
<li><a title="第四(sì)天 縱(zòng)向(xiàng)導航菜(cài)單(dān)" href="/div_css/905.shtml" target="_blank">第(dì)四天 縱(zòng)向(xiàng)導航菜單</a></li>
<li><a title="第(dì)三天(tiān) 二(èr)列(liè)和三列(liè)布(bù)局" href="/div_css/904.shtml" target="_blank">第三(sān)天 二列(liè)和三列布(bù)局(jú)</a></li>
<li><a title="第二天 一列(liè)布(bù)局" href="/div_css/903.shtml" target="_blank">第二天 一(yī)列布(bù)局(jú)</a></li>
<li><a title="第(dì)一天 XHTML CSS基礎(chǔ)知識" href="/div_css/902.shtml" target="_blank">第一(yī)天(tiān) XHTML CSS基礎知識</a></li>
</ol>
</div>
二，改(gǎi)變(biàn)項(xiàng)目(mù)符號樣(yàng)式(shì)或用圖片(piàn)定義項(xiàng)目符號(hào)
剛(gāng)才說了(liǎo)項(xiàng)目符號(hào)默認是圓(yuán)點，可(kě)以通(tōng)過(guò)樣(yàng)式(shì)表改(gǎi)為其(qí)它(tā)形式，下麵(miàn)實(shí)際操作一下：
從(cóng)樣式表編(biān)輯器中(zhōng)可以看(kàn)到(dào)，有好多種(zhǒng)形式(shì)，包括(kuò)改為(wéi)ol默(mò)認那樣以(yǐ)數(shù)字有序(xù)列表(biǎo)顯(xiǎn)示。另(lìng)外項目符號還(huán)可(kě)以以(yǐ)圖像形式，如(rú)下圖：
這種形式對圖像(xiàng)控製不是很靈(líng)活，所以(yǐ)實際應(yīng)用(yòng)當(dāng)中一般(bān)用背景(jǐng)圖片(piàn)來實現(xiàn)，在上(shàng)例(lì)基礎上將項目(mù)符號設(shè)置(zhì)為 list-style: none;，然後(hòu)
代碼如下(xià)：
<!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" />
<style type="text/css">
#layout ul { list-style: none; }
#layout ul li { background: url(/upload/2010-08/17/icon.gif) no-repeat 0px 4px; padding-left: 20px; }
</style>
</head>
<body>
<div id="layout">
<ul>
<li><a title="第(dì)五(wǔ)天 超鏈接偽(wěi)類" href="/div_css/906.shtml" target="_blank">第五天 超(chāo)鏈接偽類</a></li>
<li><a title="第四(sì)天(tiān) 縱向導航(háng)菜(cài)單" href="/div_css/905.shtml" target="_blank">第(dì)四天(tiān) 縱向導航(háng)菜(cài)單</a></li>
<li><a title="第三(sān)天(tiān) 二(èr)列和(hé)三(sān)列布局" href="/div_css/904.shtml" target="_blank">第三天 二列和三列(liè)布局(jú)</a></li>
<li><a title="第二(èr)天 一列(liè)布局" href="/div_css/903.shtml" target="_blank">第(dì)二天(tiān) 一列布局(jú)</a></li>
<li><a title="第(dì)一天 XHTML CSS基礎知(zhī)識" href="/div_css/902.shtml" target="_blank">第一(yī)天 XHTML CSS基礎知(zhī)識(shí)</a></li>
</ul>
</div>
</body>
</html>
三(sān)， 橫(héng)向(xiàng)圖(tú)文(wén)列(liè)表
橫向圖文(wén)列表是(shì)在上一(yī)步的基礎上(shàng)增加(jiā)圖片(piàn)並讓列(liè)表橫向排列(liè)，最(zuì)終實現效果(guǒ)如(rú)下(xià)：
先插入如下的html代碼，插入過(guò)程(chéng)就(jiù)不再截圖(tú)了，如果不會的話(huà)請(qǐng)學(xué)習前邊章(zhāng)節
<div id="layout">
<ul>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞(yà)</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞(yà)</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三(sān)亞(yà)</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三(sān)亞(yà)</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞(yà)</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞(yà)</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三(sān)亞</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三(sān)亞</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三(sān)亞(yà)</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三(sān)亞</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三(sān)亞</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三(sān)亞</a></li>
<li><a href="#"><img src="images/pic.gif" width="68" height="54" />三亞</a></li>
</ul>
</div>
接下來添(tiān)加(jiā)css樣式(shì)，這(zhè)裏用到一(yī)個(gè)很重要的(dí)css屬(shǔ)性：float，這(zhè)個(gè)屬(shǔ)性在(zài)第(dì)三天的教程當中(zhōng)已詳(xiáng)細(xì)講(jiǎng)解(jiě)過(guò)，這(zhè)裏不(bù)太贅述(shù)。先添加(jiā)如下(xià)全局樣(yàng)式(shì)：
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
然(rán)後讓每(měi)個li元素(sù)浮動(dòng)起來(lái)，這樣就實(shí)現了橫(héng)向排列(liè)
根(gēn)據上節(jié)課的(dí)內容，把(bǎ)a轉換(huàn)為塊級元素後可(kě)以(yǐ)設置(zhì)寬高並增(zēng)大點(diǎn)擊(jī)區域(yù)
下(xià)麵設置(zhì)a下圖片的樣式
為了獲得更(gēng)好的(dí)交互(hù)效果，這裏(lǐ)增加鼠標劃過(guò)時的樣式(shì)，注(zhù)意(yì)這(zhè)裏(lǐ)選擇器(qì)寫(xiě)法(fǎ)，如(rú)果(guǒ)前些(xiē)章(zhāng)節你都(dū)弄懂了(liǎo)，這個(gè)應該(gāi)不(bù)難理解。
代碼如下(xià)：
<!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" />
<style type="text/css">
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
#layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;}
#layout ul li a { display:block;}
#layout ul li a img { padding:1px; border:1px solid #e1e1e1; margin-bottom:3px;}
#layout ul li a:hover img { padding:0px; border:2px solid #f98510;}
</style>
</head>
<body>
<div id="layout">
<ul>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亞</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亞</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亞</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亞</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亞</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亞</a></li>
</ul>
</div>
</body>
</html>
四(sì)， 浮(fú)動後父(fù)容器高(gāo)度自(zì)適(shì)應
當(dāng)一個(gè)容(róng)器內(nèi)元(yuán)素都浮(fú)動(dòng)後(hòu)，它將高度將不會(huì)隨(suí)著(zhuó)內部元(yuán)素高(gāo)度的(dí)增(zēng)加而增加(jiā)，所以(yǐ)造成內容(róng)元素(sù)的顯(xiǎn)示超(chāo)出(chū)了(liǎo)容(róng)器。為(wéi)了便(biàn)於(yú)查看效(xiào)果(guǒ)，把剛才實例(lì)中(zhōng)的#layout增加一(yī)個邊框(kuàng)和內邊距：
#layout { width:400px; border:2px solid #ccc; padding:2px;}
看到沒，它沒有被內容元(yuán)素(sù)給撐(chēng)高(gāo)，要(yào)解決(jué)這個(gè)問(wèn)題，需要(yào)使(shǐ)用以(yǐ)下(xià)樣(yàng)式
overflow:auto; zoom:1;
overflow:auto;是(shì)讓高度自適應(yīng)， zoom:1;是為了(liǎo)兼容(róng)IE6而(ér)寫(xiě)（此樣(yàng)式不(bù)能通(tōng)過W3C驗證(zhèng)）。
這就(jiù)是(shì)所(suǒ)謂的css hack，之前(qián)講(jiǎng)解(jiě)3px bug時忘記說css hack是個(gè)什麼東(dōng)東了(liǎo)，現在補(bǔ)充一(yī)下(xià)：
由(yóu)於不同的瀏(liú)覽(lǎn)器，比如(rú)IE 6,IE 7,IE8,Mozilla Firefox等，對CSS的解(jiě)析認(rèn)識不(bù)一樣(yàng)，因此(cǐ)會(huì)導致生成(chéng)的(dí)頁麵(miàn)效果不(bù)一(yī)樣，得不到(dào)我們所(suǒ)需要的(dí)頁(yè)麵效(xiào)果。這個時候我(wǒ)們(mén)就(jiù)需(xū)要(yào)針(zhēn)對(duì)不(bù)同(tóng)的瀏覽(lǎn)器去寫不同的CSS，讓它能夠(gòu)同(tóng)時兼(jiān)容不同(tóng)的(dí)瀏覽器，能在不(bù)同的瀏覽(lǎn)器(qì)中也能(néng)得到我(wǒ)們想要的(dí)頁麵效(xiào)果。 這個(gè)針(zhēn)對(duì)不(bù)同的瀏(liú)覽器寫不同的CSS code的(dí)過程(chéng)，就叫CSS hack。這(zhè)裏的overflow:auto; zoom:1;就(jiù)是所(suǒ)謂的(dí)css hack，這種形式是應用我們(mén)常用的(dí)代碼來(lái)解決(jué)不(bù)兼(jiān)容(róng)問題，也會用(yòng)到(dào)添加一些(xiē)特殊符號的(dí)形式，它(tā)本身沒有意(yì)義，隻(zhī)是(shì)針對不(bù)同瀏覽器是(shì)否對它識別(bié)來實現的，具(jù)體(tǐ)用到(dào)的(dí)進修再(zài)講。
五，IE6的(dí)雙倍邊(biān)距(jù)bug
這(zhè)又是(shì)IE6一(yī)個(gè)著(zhù)名(míng)的bug，也是我們(mén)經常(cháng)遇到的。如上例(lì)，當浮動後設置(zhì)左側(cè)外(wài)邊(biān)距時後，最左側(cè)將顯示為雙倍邊距(jù)，比如(rú)設(shè)置為20，而在IE6下卻顯示40px，解(jiě)決(jué)這個問題(tí)隻需應用一個樣式，大(dà)家(jiā)記住(zhù)就可(kě)以了
display:inline;
增加(jiā)以(yǐ)上樣式(shì)後，在(zài)IE6下(xià)和(hé)其它瀏覽器下(xià)顯(xiǎn)示效果就(jiù)一(yī)樣(yàng)了。
代(dài)碼如(rú)下(xià)：
<!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" />
<style type="text/css">
body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { padding:0; margin:0;}
ul { list-style:none;}
img { border:0px;}
a { color:#05a; text-decoration:none;}
a:hover { color:#f00;}
#layout { width:390px; border:2px solid #ccc; padding-bottom:20px; overflow:auto; zoom:1;}
#layout ul li { width:72px; float:left; margin:20px 0 0px 20px; display:inline; text-align:center;}
#layout ul li a { display:block;}
#layout ul li a img { padding:1px; border:1px solid #e1e1e1; margin-bottom:3px; display:block;}
#layout ul li a:hover img { padding:0px; border:2px solid #f98510;}
</style>
</head>
<body>
<div id="layout">
<ul>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亞(yà)</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三亞</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞</a></li>
<li><a href="#"><img src="/upload/2010-08/17/pic.jpg" width="68" height="54" />三(sān)亞</a></li>
</ul>
</div>
</body>
</html>
文(wén)章(zhāng)出處(chǔ)：標(biāo)準之路(lù) 編(biān)輯(jí)：楊雨(yǔ)晨(chén)思(sī)
轉載請保(bǎo)留原(yuán)文地址(zhǐ): https://antelcom.cn/show-338.html