-
觸屏版
-
全國服務(wù)熱線：0571-87205688
- 云客網(wǎng)首頁
-
登錄
- |
-
注冊
- |
-
客戶中心
- |
-
關(guān)注云客
橫向?qū)Ш讲藛?Web標(biāo)準(zhǔn)(div+css)教程
分享
評論
贊0
一、橫向列表菜單
前邊學(xué)習(xí)過縱向?qū)Ш讲藛危謱W(xué)習(xí)了float屬性，那么要實(shí)現(xiàn)橫向?qū)Ш讲藛问遣皇呛芎唵瘟耍恍枰裭i橫向排列就可實(shí)現(xiàn)了。把第四節(jié)的代碼拿過來直接用，修改后的代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { border: 1px solid #CCC; height:26px; background: #eee;} #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px; } </style> </head> <body> <div id="menu"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">網(wǎng)頁版式布局</a></li> <li><a href="#">div+css教程</a></li> <li><a href="#">div+css實(shí)例</a></li> <li><a href="#">常用代碼</a></li> </ul> </div> </body> </html> |
提示：可以先修改部分代碼后再運(yùn)行
最主要就是用float讓li向右浮動后，實(shí)現(xiàn)橫向排列，具體步驟不再贅述。以前許多朋友提問怎么讓它水平居中，其實(shí)很簡單，首先導(dǎo)航的寬度是固定的，然后設(shè)置margin:0 auto;即可實(shí)現(xiàn)了
為了用戶體驗(yàn)更加友好，還是把a(bǔ)轉(zhuǎn)換成塊級元素，也可以給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的情況下，將會顯示錯(cuò)亂，所以需要在a上增加float:left來修正。萬惡的IE6，怎么就淘汰不掉呢
二、 用圖片美化的橫向?qū)Ш?/strong>
背景圖片也是網(wǎng)頁制作當(dāng)中最常用的樣式之一，運(yùn)用好背景圖片，可以使你的頁面更加出色，更加人性化和更快的加載速度。下面還是用以前視頻教程中的實(shí)例進(jìn)行講解，或者直接去看視頻教程http://www.aa25.cn/div_css/895.shtml。顯示效果如下：
用到三張圖片，分別為當(dāng)前狀態(tài)，鼠標(biāo)放上時(shí)樣式，和默認(rèn)樣式用的圖片：
下面修改css樣式，只截圖了一張，設(shè)置方法相同：
#menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;}
#menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;}
#menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
為了讓用戶知道當(dāng)前所處的頁面，做了一個(gè)當(dāng)前頁面的狀態(tài)，把ID添加到相應(yīng)的a上。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;} #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { float:left; margin-left:2px;} #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;} #menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;} #menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;} </style> </head> <body> <div id="menu"> <ul> <li><a id="current" href="#">首頁</a></li> <li><a href="#">網(wǎng)頁版式</a></li> <li><a href="#">web教程</a></li> <li><a href="#">web實(shí)例</a></li> <li><a href="#">常用代碼</a></li> </ul> </div> </body> </html> |
提示：可以先修改部分代碼后再運(yùn)行
三、 CSS Sprites技術(shù)
CSS Sprites在國內(nèi)很多人叫css精靈或css雪碧。它是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的背景圖片定位到要顯示的位置。這樣做可以減少文件體積，減少對服務(wù)器的請求次數(shù)，提高效率。
講CSS Sprites之前，先把背景圖片給搞清楚
#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; }
css背景屬性縮寫后如上所示，#ccc表示背景色；url（）里是背景圖片路徑；接下來的兩個(gè)數(shù)值參數(shù)分別是左右和上下，第一個(gè)參數(shù)表示距左多少px，第二個(gè)參數(shù)表示距上多少，這和padding的簡寫方式是不 一樣，一定不要弄混。另外再強(qiáng)調(diào)一點(diǎn)css中值為0可以不帶單位，其它數(shù)值都必須帶單位（line-height值為多少倍時(shí)，zoom，z-index除外）；no-repeat表示背景圖片向哪個(gè)方向重復(fù)，此時(shí)為不重復(fù)。
還需說明一點(diǎn)的是定位圖片位置的參數(shù)是以圖片的左上角為原點(diǎn)的，理解了這些，CSS Sprites技術(shù)就基本上懂了，就是靠背景圖片定位來實(shí)現(xiàn)的。把三張背景圖片整合到一張上，如下圖：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;} #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul li { float:left; margin-left:2px;} #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -28px no-repeat; font-size:14px;} #menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 -56px no-repeat;} #menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;} </style> </head> <body> <div id="menu"> <ul> <li><a id="current" href="#">首頁</a></li> <li><a href="#">網(wǎng)頁版式</a></li> <li><a href="#">web教程</a></li> <li><a href="#">web實(shí)例</a></li> <li><a href="#">常用代碼</a></li> </ul> </div> </body> </html> |
提示：可以先修改部分代碼后再運(yùn)行
猜你喜歡
-
html列表-Web標(biāo)準(zhǔn)(div+css)教程
-
超鏈接偽類-Web標(biāo)準(zhǔn)(div+css)教程
-
二列和三列布局-Web標(biāo)準(zhǔn)(div+css)教程
-
做網(wǎng)站優(yōu)化搜索引擎優(yōu)化 怎么運(yùn)用免費(fèi)資本
-
做網(wǎng)站SEO是件有含義的作業(yè)
-
做優(yōu)化找網(wǎng)絡(luò)公司好嗎
-
做SEO不得不沉思的疑問
-
做優(yōu)化必知的搜索引擎優(yōu)化根底常識
-
做一個(gè)關(guān)鍵詞排名優(yōu)化的試驗(yàn)
-
做網(wǎng)站優(yōu)化的站長有必要知道baidu在調(diào)整啥？
評論(0人參與，0條評論)
發(fā)布評論
最新評論