羊皮紙論壇

羊皮紙論壇

分享讓知識傳播,閱讀讓心靈成長, 創作讓文化傳承,讓我們共同努力。
  • 禁止廣告文
  • 知識傳播
  • 閱讀
  • 心靈成長
  • 創作
  • 文化傳承
羊皮紙論壇目錄 / 程式設計 / 網頁/網站程式 / CSS /

LI 清單標籤結合CSS 的運用

發表新主題
隨機主題
上個主題
下個主題
|
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, 讓左邊, 網頁中, images, image, hover, float, LI中
0 0
2009-10-07T14:05:40+0000


  • 當您未登入羊皮紙時,可以利用臉書 Facebook 登入來發表迴響。若使用羊皮紙會員身份發表迴響則可獲得經驗值及虛擬金幣,用來參加羊皮紙推出的活動。
發表迴響
 
驗證字串

Facebook 粉絲專頁

QRCode 條碼 & APP 連結

說明
本頁網址

在相關服務標籤中,『掃描條碼,在行動裝置』或是『點擊連結按鈕,在本裝置』中開啟網頁或是 APP 相關操作。
QRCode