ul無序列表是一個非常重要的HTML標籤，頁面中許多元素都用它來組織。就此問題，我們形成了下面的實例。
圖書目錄往往由章節標題，頁次，以及破折虛線組成。我們將章節標題建立鏈接以a標籤組織。頁次用行內元素span標籤組織。這兩部分內容分別處於一個獨立的列表項li中。虛線的效果以li的背景圖片來實現。
下面開始HTML編碼：
<ul>
<li><a href="http://www.52css.com/article.asp?id=947">雜談24則CSS網頁佈局開發小技巧 </a><span>9</span></li>
<li><a href="http://www.52css.com/article.asp?id=946">css expression屬性將javascript與css結合起來 </a><span>719</span></li>
<li><a href="http://www.52css.com/article.asp?id=945">CSS網頁佈局及網站開發常犯的幾種錯誤 </a><span>329</span></li>
<li><a href="http://www.52css.com/article.asp?id=941">CSS控制字符寬度省略號效果 兼容瀏覽器 </a><span>152</span></li>
<li><a href="http://www.52css.com/article.asp?id=939">一個IE6在no-repeat情況下依然重複背景圖片的BUG </a><span>1000</span></li>
<li><a href="http://www.52css.com/article.asp?id=938">完善IE中僞類:hover的使用及BUG 續 </a><span>10</span></li>
</ul>
這就是一個典型的UL無序列表。在列表項LI中存在着A和SPAN兩種元素。以CSS對其進行樣式定義。
ul {
width:480px;
margin:0 auto;
padding:8px 0;
border:1px solid #ccc;
}
對UL進行總體樣式定義。整體水平居中對齊。
ul li {
width:450px;
height:28px;
margin:0 auto;
list-style-type:none;
background:url(line_bg.gif) repeat-x 0 13px;
}
設置列表項的寬高，定義背景圖片爲水平方向重複，垂直方向居於13px的位置。
ul li a {
float:left;
height:28px;
padding:0 5px 0 0;
line-height:28px;
font-size:14px;
color:#00f;
text-decoration:none;
background:#fff;
}
定義A元素的CSS樣式。設置向左浮動後自動轉換爲塊元素，定義高度與右內邊距。特別注意需要設置背景色爲白色#fff。避免了文字下面出現LI的背景虛線。
ul li span {
float:right;
height:28px;
padding:0 0 0 5px;
line-height:28px;
font-size:14px;
color:#666;
background:#fff;
}
定義SPAN元素的CSS樣式。其原理與A元素類似。最終以CSS實現了用ul+li打造圖書目錄的效果。
本文轉自諾庫技術網