Forum

Heyxu Forum

Forum Dictionary / Programming / 網頁/網站程式 / CSS /

LI 清單標籤結合CSS 的運用

New Subject
Random
Previous
Next
|
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;
}

  • Keywords : style, width, margin, background, display, block, 關鍵FLOAT, 讓左邊, 網頁中, images, image, hover, float, LI中
0 0
2009-10-07T14:05:40+0000


  • Now, you can post comments by Facebook Account when your Heyxu account was logout or unvariable. whatever, we suggest to post comment by Heyxu Account to get more bounds to join new events of Heyxu
Comment
Verify
Comment
  • Auto Platform
    For better browsing experience, it will auto detects your device to display webpage.
  • Bug Report
    Tell us about the idea, problem and errors you found.
  • Copyright
    © 2009 Heyxu Multimedia, Inc - All rights reserved.
  • Revised Version
    V2.1.313
    02 Feb 2019 (GMT+8)