LI 清單標籤結合CSS 的運用

???A).運用CSS格式化列表︰

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;
}

• 關鍵字 : style, 可以用如下網頁代碼, width, margin, background, display, block, 關鍵FLOAT, 運用CSS格式化列表, 這一行必須要加, 背景變色效果, 才能塊狀顯示, 列表設計背景色, 列表設計成圖, 列表設計onMouseOver, 元素水準排列, images, image, hover, float

2009-10-07T14:05:40+0000