LI 清單標籤結合CSS 的運用

魚戀秋波 Neil Y.K. :

ul li{
list-style-type:none;
}

B).如果你想將網頁中的列表設計成圖像，則︰

 ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}

C).為了讓左邊對齊，可以用如下網頁代碼︰

ul{
list-style-type:none;
margin:0px;
}

D).如果想給列表設計背景色，可以用如下網頁代碼︰

ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}

E).如果想給列表設計onMouseOver 背景變色效果，可以用如下網頁代碼︰

ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; }
/*說明︰display:block;這一行必須要加的，這樣才能塊狀顯示! */

F).LI中的元素水準排列，關鍵FLOAT:LEFT︰

ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}

• Keywords : style, width, margin, background, display, block, 關鍵FLOAT, 讓左邊, 網頁中, images, image, hover, float, LI中