CSS控制ul的基礎代碼

1.基本列表樣式
<ul>
<li>product</li>
<li>download</li>
<li>about</li>
</ul>
應用本身的樣式以前先去掉瀏覽器默認的樣式:
ul {
 margin:0;
 padding:0;
 list-style-type: none;
}
先添加定製的符號:
li {
 background: url(circle.gif) no-repeat 0 50%;/* meaning top center */
 padding-left: 30px;
}
這樣一個簡單的定製列表符號就完成了。

2.建立垂直導航條
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="product.html">product</a></li>
<li><a href="about.html">about</a></li>
</ul>
同上，先去掉默認的樣式：
ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
}
對列表項(li)並不該用樣式，而是對a標記應用樣式。
ul a {
 display: block;
 width: 200px;
 height: 200px;
 line-height: 40px; /* 以便讓行文本垂直居中 */
 color: #000;
 text-decoration: none;
 background: #99bbee url(p_w_picpaths/rollover.gif) no-repeat left center;
 text-indent: 50px;
}

3.建立水平導航條 <ul> <li><a href="home.html">Home</a></li> <li><a href="product.html">product</a></li> <li><a href="about.html">about</a></li> </ul> 設置導航條的寬度，背景等 ul {  margin: 0;  padding: 0;  list-style-type: none;  width: 720px;  float: left; /*當li使用float技術水平排列時，添加這一行就能夠不用在後面清理了(clean)*/  background: #ffaa22 url(p_w_picpaths/bg-mainav.gif) repeat-x; } 使列表水平顯示(默認時列表是塊級元素，是上下排列的) ul li {  float: left; } or ul li {  display: inline; }