十天學會(huì)web標準div+CSS HTML列表(biǎo)，包(bāo)含(hán)以下(xià)內容(róng)和知識點(diǎn)：
一，橫向列表菜單 二，用圖片美化的橫向導航 三，css Sprites
一，橫向列表(biǎo)菜單(dān)
前(qián)邊學(xué)習(xí)過(guò)縱(zòng)向導航(háng)菜(cài)單(dān)，又(yòu)學習了float屬(shǔ)性，那麼要(yào)實(shí)現橫(héng)向導航(háng)菜單是不是很簡單(dān)了，隻需要(yào)把li橫(héng)向(xiàng)排(pái)列就(jiù)可(kě)實現了(liǎo)。把第四節的代碼(mǎ)拿過來直(zhí)接用，修(xiū)改後的(dí)代碼如下(xià)：
<!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=utf-8" />
<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)頁版式(shì)布局(jú)</a></li>
<li><a href="#">div+css教(jiào)程(chéng)</a></li>
<li><a href="#">div+css實例(lì)</a></li>
<li><a href="#">常(cháng)用代碼</a></li>
</ul>
</div>
</body>
</html>
提示：可以先修(xiū)改(gǎi)部分(fēn)代碼後再(zài)運行(háng)
最(zuì)主(zhǔ)要(yào)就(jiù)是用(yòng)float讓li向(xiàng)右(yòu)浮動(dòng)後，實現(xiàn)橫向排列，具體步驟(zhòu)不再贅述(shù)。以(yǐ)前許多朋友(yǒu)提問怎麼讓(ràng)它(tā)水平居中，其實很(hěn)簡單，首先導(dǎo)航的寬度(dù)是固(gù)定(dìng)的(dí)，然(rán)後設置(zhì)margin:0 auto;即可實現(xiàn)了(liǎo)
為了(liǎo)用戶(hù)體(tǐ)驗(yàn)更加(jiā)友(yǒu)好，還(huán)是(shì)把a轉(zhuǎn)換成塊(kuài)級元素，也可以(yǐ)給a設置背景(jǐng)色或(huò)背景圖片來(lái)更(gēng)加(jiā)美觀了，另外再設(shè)置(zhì)鼠標放上(shàng)時的樣式。
#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;}
學到這裏(lǐ)，常用(yòng)的樣(yàng)式大(dà)部分都(dū)涉(shè)及到(dào)了(liǎo)，也(yě)許許(xǔ)多你還(huán)記不(bù)住(zhù)，但至少(shǎo)混個臉熟。為(wéi)了(liǎo)提(tí)高效(xiào)率，建(jiàn)議(yì)大家還(huán)是(shì)手(shǒu)寫代碼(mǎ)，如果(guǒ)你(nǐ)還不能手寫代碼，就參(cān)考(kǎo)上(shàng)邊(biān)的(dí)樣(yàng)式，自(zì)己在(zài)css編輯(jí)器裏設置吧，不再大(dà)量(liáng)截圖(tú)了(liǎo)。
經過上邊(biān)的(dí)修改(gǎi)，現(xiàn)在(zài)的用戶檢(jiǎn)驗是不是(shì)更(gēng)加友好了呢。
這裏(lǐ)的#menu ul li a本(běn)來(lái)是可(kě)以不(bù)加float:left的，但(dàn)IE6下(xià)在(zài)li沒(méi)有(yǒu)設置寬度，#menu ul li a設(shè)置(zhì)display:block的情(qíng)況下(xià)，將會顯示錯亂，所以需要在(zài)a上(shàng)增加float:left來(lái)修(xiū)正。萬惡的(dí)IE6，怎(zěn)麼(mó)就(jiù)淘(táo)汰(tài)不掉(diào)呢
二， 用(yòng)圖片美(měi)化的橫向導(dǎo)航
背景(jǐng)圖片(piàn)也(yě)是網頁(yè)製作當中最常用的(dí)樣式之(zhī)一(yī)，運用好(hǎo)背景圖片(piàn)，可以使你的(dí)頁麵更加(jiā)出色，更(gēng)加人(rén)性(xìng)化和(hé)更快的加(jiā)載(zǎi)速(sù)度(dù)。下麵還是用(yòng)以(yǐ)前(qián)視頻(pín)教(jiào)程中(zhōng)的實(shí)例(lì)進行講(jiǎng)解，或(huò)者直接(jiē)去(qù)看視(shì)頻教程http://www.aa25.cn/div_css/895.shtml。顯示(shì)效(xiào)果如下(xià)：
用(yòng)到三張圖(tú)片，分別為當前狀態(tài)，鼠(shǔ)標(biāo)放上(shàng)時(shí)樣式(shì)，和默認樣式用的圖片(piàn)：
下(xià)麵修改(gǎi)css樣(yàng)式，隻(zhī)截圖了一張(zhāng)，設(shè)置方法(fǎ)相(xiāng)同：
#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;}
為了讓(ràng)用戶知(zhī)道當(dāng)前所(suǒ)處的頁(yè)麵，做(zuò)了(liǎo)一(yī)個當前(qián)頁麵的狀態，把ID添加到相(xiāng)應(yīng)的a上(shàng)。
<!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=utf-8" />
<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="#">網頁版(bǎn)式</a></li>
<li><a href="#">web教(jiào)程</a></li>
<li><a href="#">web實(shí)例</a></li>
<li><a href="#">常用(yòng)代(dài)碼(mǎ)</a></li>
</ul>
</div>
</body>
</html>
提示：可以先修(xiū)改部分(fēn)代碼後(hòu)再運(yùn)行
三， CSS Sprites技術(shù)
CSS Sprites在國內很多人叫css精靈(líng)或css雪碧(bì)。它(tā)是把(bǎ)網(wǎng)頁中一些背景圖(tú)片(piàn)整合到一張(zhāng)圖(tú)片文(wén)件中(zhōng)，再(zài)利用CSS的(dí)背景(jǐng)圖(tú)片(piàn)定位到要(yào)顯示的位置。這樣做可以減少(shǎo)文件體(tǐ)積(jī)，減(jiǎn)少對服務(wù)器的請(qǐng)求次數(shù)，提(tí)高效(xiào)率。
講(jiǎng)CSS Sprites之前(qián)，先把(bǎ)背景(jǐng)圖(tú)片(piàn)給(gěi)搞清(qīng)楚(chǔ)
#menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; }
css背(bèi)景屬性(xìng)縮(suō)寫(xiě)後(hòu)如上所(suǒ)示，#ccc表示(shì)背景色；url（）裏是背景圖(tú)片路(lù)徑；接下來(lái)的(dí)兩個(gè)數值(zhí)參(cān)數(shù)分別是左右(yòu)和(hé)上(shàng)下，第(dì)一(yī)個參數表(biǎo)示距(jù)左(zuǒ)多(duō)少px，第(dì)二個(gè)參數表(biǎo)示(shì)距(jù)上多(duō)少(shǎo)，這和padding的簡寫方式(shì)是(shì)不 一(yī)樣，一定(dìng)不要弄混。另(lìng)外(wài)再(zài)強(qiáng)調(tiáo)一點(diǎn)css中(zhōng)值為0可(kě)以(yǐ)不(bù)帶單位，其它(tā)數(shù)值都必須帶(dài)單位(wèi)（line-height值為多(duō)少倍時(shí)，zoom，z-index除外(wài)）；no-repeat表(biǎo)示背景圖(tú)片向(xiàng)哪(nǎ)個方向(xiàng)重(zhòng)復，此時為不(bù)重(zhòng)復。
還需(xū)說明(míng)一點的是定位圖片(piàn)位(wèi)置的(dí)參(cān)數是以(yǐ)圖片的左上(shàng)角(jiǎo)為原(yuán)點(diǎn)的(dí)，理解了(liǎo)這些，CSS Sprites技(jì)術就(jiù)基本上懂了，就是(shì)靠背景圖(tú)片定位(wèi)來實(shí)現的(dí)。把三(sān)張背景(jǐng)圖(tú)片整合到(dào)一張上，如下圖(tú)：
<!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=utf-8" />
<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="#">網頁版式</a></li>
<li><a href="#">web教(jiào)程</a></li>
<li><a href="#">web實(shí)例(lì)</a></li>
<li><a href="#">常(cháng)用代(dài)碼</a></li>
</ul>
</div>
</body>
</html>
提示：可以先修改(gǎi)部(bù)分代碼(mǎ)後(hòu)再(zài)運行
文章出處：標準(zhǔn)之(zhī)路 編輯：楊(yáng)雨(yǔ)晨思
轉載請保(bǎo)留原(yuán)文地(dì)址: https://antelcom.cn/show-337.html