第七章：橫向?qū)Ш讲藛?/h1>

 二維碼 207

發(fā)表時(shí)間：2015-12-23 22:38作者：敖游來源：遨游建站網(wǎng)址：http://aquaponicswiki.com

　　

　　為了用戶體驗(yàn)更加友好，還是把a(bǔ)轉(zhuǎn)換成塊級(jí)元素，也可以給a設(shè)置背景色或背景圖片來更加美觀了，另外再設(shè)置鼠標(biāo)放上時(shí)的樣式。

　　#menu { width:370px; margin:0 auto; border: 1px solid #CCC; height:26px; background: #eee;}

　　#menu ul { list-style: none; margin: 0px; padding: 0px; }

　　#menu ul li { float:left;}

　　#menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}

　　#menu ul li a:hover { background:#333; color:#fff;}

　　學(xué)到這里，常用的樣式大部分都涉及到了，也許許多你還記不住，但至少混個(gè)臉熟。為了提高效率，建議大家還是手寫代碼，如果你還不能手寫代碼，就參考上邊的樣式，自己在css編輯器里設(shè)置吧，不再大量截圖了。

　　經(jīng)過上邊的修改，現(xiàn)在的用戶檢驗(yàn)是不是更加友好了呢。

　　

　　這里的#menu ul li a本來是可以不加float:left的，但I(xiàn)E6下在li沒有設(shè)置寬度，#menu ul li a設(shè)置display:block的情況下，將會(huì)顯示錯(cuò)亂，所以需要在a上增加float:left來修正。萬(wàn)惡的IE6，怎么就淘汰不掉呢

　　二、 用圖片美化的橫向?qū)Ш?/span>

　　背景圖片也是網(wǎng)頁(yè)制作當(dāng)中最常用的樣式之一，運(yùn)用好背景圖片，可以使你的頁(yè)面更加出色，更加人性化和更快的加載速度。下面還是用以前視頻教程中的實(shí)例進(jìn)行講解，或者直接去看視頻教程http://www.aa25.cn/div_css/895.shtml。顯示效果如下：

　　

　　用到三張圖片，分別為當(dāng)前狀態(tài)，鼠標(biāo)放上時(shí)樣式，和默認(rèn)樣式用的圖片：

　　

　　

　　

　　下面修改css樣式，只截圖了一張，設(shè)置方法相同：

　　

上一頁(yè) 1 2 3 4 下一頁(yè)

上一篇第六章：html列表

下一篇第八章：下拉及多級(jí)彈出菜單

文章分類： 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)教程

分享到：

昵稱：

驗(yàn)證碼：