第六章：html列表

　　今天我們開始學習《十天學會web標準(div+css)》的html列表，包含以下內(nèi)容和知識點：

　　一、ul無序和ol有序列表

　　二、改變項目符號樣式或用圖片定義項目符號

　　三、橫向圖文列表

　　四、浮動后父容器高度自適應

　　五、IE6的雙倍邊距bug

　　一、ul無序和ol有序列表

　　無序列表是web標準布局中最常用的樣式，代碼如下：

　　<div id="layout">

　　<ul>

　　<li><a title="第五天 超鏈接偽類" href="/div_css/906.shtml" target="_blank">第五天 超鏈接偽類</a></li>

　　<li><a title="第四天 縱向?qū)Ш讲藛?quot; href="/div_css/905.shtml" target="_blank">第四天 縱向?qū)Ш讲藛?lt;/a></li>

　　<li><a title="第三天 二列和三列布局" href="/div_css/904.shtml" target="_blank">第三天 二列和三列布局</a></li>

　　<li><a title="第二天 一列布局" href="/div_css/903.shtml" target="_blank">第二天 一列布局</a></li>

　　<li><a title="第一天 XHTML CSS基礎知識" href="/div_css/902.shtml" target="_blank">第一天 XHTML CSS基礎知識</a></li>

　　</ul>

　　</div>

　　這就是有無序列表，是以ul包含li的形式，默認每行前的符號是圓點，可以通過樣式表改為無、方塊，空心圓等。有序列表是以ol包含li的形式，是以數(shù)字為項目符號的，無序列表也可以用css定義顯示成有序列表，代碼及顯示效果如下：

　　<div id="layout">

　　<ol>

　　<li><a title="第五天 超鏈接偽類" href="/div_css/906.shtml" target="_blank">第五天 超鏈接偽類</a></li>

　　<li><a title="第四天 縱向?qū)Ш讲藛?quot; href="/div_css/905.shtml" target="_blank">第四天 縱向?qū)Ш讲藛?lt;/a></li>

　　<li><a title="第三天 二列和三列布局" href="/div_css/904.shtml" target="_blank">第三天 二列和三列布局</a></li>

　　<li><a title="第二天 一列布局" href="/div_css/903.shtml" target="_blank">第二天 一列布局</a></li>

　　<li><a title="第一天 XHTML CSS基礎知識" href="/div_css/902.shtml" target="_blank">第一天 XHTML CSS基礎知識</a></li>

　　</ol>

　　</div>

　　二、改變項目符號樣式或用圖片定義項目符號

　　剛才說了項目符號默認是圓點，可以通過樣式表改為其它形式，下面實際操作一下：

　　從樣式表編輯器中可以看到，有好多種形式，包括改為ol默認那樣以數(shù)字有序列表顯示。另外項目符號還可以以圖像形式，如下圖：

　　這種形式對圖像控制不是很靈活，所以實際應用當中一般用背景圖片來實現(xiàn)，在上例基礎上將項目符號設置為 list-style: none;，然后