十天學會web標(biāo)準div+CSS 縱向導航(háng)菜單及(jí)二級彈(dàn)出菜單(dān)，包含(hán)以(yǐ)下內容和知識點：
一，縱向列表 二，標簽的默認樣式 三，css派生選擇器 四，css選擇器的分組 五，縱向二級列表 六，相對定位和絕對定位
一(yī)，縱向列表
縱向(xiàng)列表或稱為縱(zòng)向(xiàng)導航，在網站的(dí)產品(pǐn)列(liè)表中應用比較(jiào)廣(guǎng)泛，如淘(táo)寶(bǎo)網(wǎng)左(zuǒ)側的(dí)淘(táo)寶服務，今天我(wǒ)們就學習一下(xià)縱向(xiàng)導航的(dí)製(zhì)作
先新建一個頁麵(miàn)，然(rán)後插(chā)入(rù)一個(gè)ID為(wéi)menu的(dí)div，然後在設(shè)計(jì)視(shì)圖(tú)中選(xuǎn)中文(wén)字(zì)，點(diǎn)擊(jī)工(gōng)具(jù)欄的(dí)ul圖標，即會自(zì)動插入ul和(hé)li，然(rán)後修(xiū)改文字內容為你需(xū)要的內容(róng)。
<div id="menu">
<ul>
<li>首頁(yè)</li>
<li>網(wǎng)頁版(bǎn)式布局</li>
<li>div+css教(jiào)程(chéng)</li>
<li>div+css實例</li>
<li>常(cháng)用(yòng)代碼</li>
<li>站長雜(zá)談(tán)</li>
<li>技(jì)術(shù)文檔(dàng)</li>
<li>資(zī)源下載</li>
<li>圖片素(sù)材</li>
</ul>
</div>
從(cóng)預覽的效(xiào)果(guǒ)上看(kàn)，四(sì)周(zhōu)都(dū)有(yǒu)很大的空隙，而(ér)且每一行(háng)前邊還有個(gè)點，這(zhè)是(shì)因為(wéi)標簽(qiān)的(dí)默認樣式(shì)造成的，下麵我們需(xū)要(yào)創建(jiàn)樣式表(biǎo)把(bǎ)標簽的默認(rèn)樣式給清除掉
生成(chéng)的css代(dài)碼(mǎ)如下：
<style type="text/css">
#menu ul { list-style: none; margin: 0px; padding: 0px; }
</style>
下麵(miàn)我們定義(yì)一(yī)下全局的字(zì)體(tǐ)，字號(hào)，行距等，點擊css樣(yàng)式麵板上的(dí)新建按(àn)鈕，在(zài)彈(dàn)出(chū)的(dí)窗口中選擇(zé)器類型(xíng)選擇(zé)標簽，名(míng)稱(chēng)選(xuǎn)擇body，然(rán)後(hòu)在(zài)css編輯器中設置如(rú)下圖所示屬性
body全(quán)局(jú)樣式定義後，下(xià)麵(miàn)我(wǒ)們給(gěi)#menu定義(yì)一(yī)個(gè)灰色(sè)的1px邊框及寬(kuān)度(dù)，然後(hòu)把li定(dìng)義下背(bèi)景(jǐng)色(sè)和下邊框(kuàng)及(jí)內(nèi)邊(biān)距(jù)等
接(jiē)下(xià)來定(dìng)義li的(dí)背(bèi)景(jǐng)色為淺(qiǎn)灰(huī)色及下邊(biān)框(kuàng)和內(nèi)邊距
這些屬(shǔ)性設置(zhì)完後(hòu)，一個簡單的縱向列表菜單(dān)初具模(mó)型(xíng)了(liǎo)。因(yīn)為(wéi)導航(háng)菜單，需要鏈接(jiē)到(dào)其(qí)它頁麵(miàn)，下邊(biān)把這(zhè)些(xiē)導航加(jiā)上鏈接，然(rán)後在定(dìng)義(yì)a的(dí)狀態(tài)和(hé)鼠標劃過狀(zhuàng)態。
要添加(jiā)鏈接(jiē)，先(xiān)選擇要添加鏈接(jiē)的(dí)文字(zì)，然後在屬性(xìng)頁麵鏈接上輸入要鏈接的頁(yè)麵址(zhǐ)，我(wǒ)這(zhè)裏輸(shū)入個#，是個虛擬鏈(liàn)接，不指向(xiàng)任何頁(yè)麵。
創(chuàng)建a的(dí)樣(yàng)式後，下麵我們增(zēng)加(jiā)個(gè)交(jiāo)互(hù)效果，當鼠標劃過鏈接文字時，讓(ràng)文(wén)字顏(yán)色(sè)變(biàn)成紅色，這時(shí)就需要用到(dào)a:hover這個偽類(lèi)了
這裏的(dí)a:hover屬(shǔ)於(yú)偽(wěi)類，在下一章節(jié)時(shí)會(huì)詳細講(jiǎng)解
源代碼如下(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 { width: 100px; border: 1px solid #CCC; }
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="@#">首頁(yè)</a></li>
<li><a href="#">網(wǎng)頁版式(shì)布局(jú)</a></li>
<li><a href="#">div+css教程</a></li>
<li><a href="#">div+css實(shí)例</a></li>
<li><a href="#">常用(yòng)代碼</a></li>
<li><a href="#">站長(cháng)雜(zá)談</a></li>
<li><a href="#">技術(shù)文檔</a></li>
<li><a href="#">資源下載(zǎi)</a></li>
<li><a href="#">圖片素材</a></li>
</ul>
</div>
</body>
</html>
二，標簽的(dí)默認樣式
大多(duō)數標(biāo)簽都有(yǒu)自(zì)己的(dí)默(mò)認樣(yàng)式(shì)，比(bǐ)如第二(èr)天課(kè)程中遇到的body默認外(wài)邊距(jù)，另外(wài)本例中(zhōng)ul前(qián)的圓點(diǎn)及左側(cè)的(dí)內(nèi)邊距，另(lìng)h1-h6字體大小(xiǎo)各不(bù)相同(tóng)，em默(mò)認為(wéi)斜體，strong表示(shì)粗體。正因(yīn)為有(yǒu)這(zhè)些默(mò)認(rèn)樣式，一(yī)個設計(jì)合理(lǐ)的頁(yè)麵，即使沒(méi)有(yǒu)加載(zǎi)樣式(shì)，也(yě)能(néng)讓(ràng)用(yòng)戶很(hěn)容易閱讀(dú)。但(dàn)此時(shí)這些默(mò)認(rèn)樣式(shì)對(duì)我們(mén)沒用(yòng)，所以需(xū)要(yào)清(qīng)除掉，為(wéi)了方(fāng)便(biàn)，建議用(yòng)標簽重定義方式(shì)，這(zhè)樣(yàng)可(kě)以(yǐ)很(hěn)簡單地把(bǎ)全局的(dí)樣式給(gěi)統一起來。另(lìng)外(wài)頁麵中(zhōng)的圖(tú)片(piàn)添加鏈(liàn)接後(hòu)會默認(rèn)添加(jiā)個邊(biān)框，ul默(mò)認(rèn)情(qíng)況下(xià)會在(zài)列(liè)表前(qián)添加圓點(diǎn)，這些都是(shì)需要(yào)去掉的。
body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
ul { list-style: none; }
img { border-style: none; }
這(zhè)裏選擇器類型選擇(zé)復(fù)合內容，我用的是(shì)dw最(zuì)新cs5版本，比之前章節(jié)用的(dí)cs3版本(běn)中更(gēng)合理(lǐ)了，把(bǎ)ID和偽(wěi)類(lèi)分(fēn)開了(liǎo)。然(rán)後(hòu)在(zài)選擇器(qì)名稱中輸入我們常用(yòng)的帶默(mò)認(rèn)樣(yàng)式(shì)的標(biāo)簽，中(zhōng)間以(yǐ)英(yīng)文逗號分隔(gé)
下麵對img標簽進行重定(dìng)義，清除(chú)圖(tú)片有(yǒu)鏈接時(shí)默認的邊(biān)框(kuàng)
下邊(biān)設置全局ul標簽默認的(dí)圓(yuán)點(diǎn)為無
這樣就很(hěn)簡單(dān)把(bǎ)常用標(biāo)簽(qiān)的默認(rèn)樣(yàng)式給清除掉了(liǎo)，如(rú)果需要邊距(jù)的話(huà)再重(zhòng)新定義(yì)，也(yě)避免(miǎn)了(liǎo)各個瀏覽器對標(biāo)簽(qiān)默(mò)認(rèn)樣(yàng)式解析(xī)差異(yì)造(zào)成頁(yè)麵(miàn)顯示不(bù)一(yī)樣(yàng)的(dí)問題。
三，css派(pài)生(shēng)選擇(zé)器
CSS初學(xué)者(zhě)不(bù)知(zhī)道(dào)使(shǐ)用(yòng)子選擇器(qì)是影響他們效率(shuài)的原因(yīn)之一(yī)。派(pài)生選擇(zé)器可(kě)以(yǐ)幫助你(nǐ)節約大量的(dí)class定(dìng)義。我上邊(biān)的(dí)例(lì)子(zǐ)中(zhōng)應用了(liǎo)些(xiē)派(pài)生選(xuǎn)擇器如下的(dí)css代(dài)碼(mǎ)
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }
#menu ul和(hé)#menu ul li即為(wéi)派生選擇器，如(rú)果我(wǒ)們(mén)把前(qián)邊的#menu去(qù)掉，那(nà)麼將是(shì)對ul標(biāo)簽(qiān)重定義，重定義(yì)的(dí)屬(shǔ)性將應用到(dào)全局(jú)，而前邊加(jiā)上(shàng)#menu後(hòu)，將是定(dìng)義ID為menu元素內(nèi)ul的(dí)樣式(shì)，設置它的樣式隻(zhī)對#menu下的ul生效(xiào)，不(bù)對(duì)它(tā)之後的(dí)ul生(shēng)效(xiào)，這個有點像(xiàng)編程(chéng)中(zhōng)的(dí)局部(bù)變(biàn)量(liáng)，而直接定義ul則(zé)相(xiāng)當(dāng)於全(quán)局(jú)變(biàn)量。#menu ul li 是定義(yì)ID為(wéi)menu元(yuán)素(sù)內(nèi)ul下的li，派(pài)生(shēng)選擇器可(kě)以使我(wǒ)們不用再(zài)給每個(gè)li定義(yì)一個(gè)樣(yàng)式名來定義(yì)樣式(shì)，隻需使用(yòng)派生選(xuǎn)擇(zé)器，從(cóng)它的父(fù)元(yuán)素(sù)處選(xuǎn)擇即可，這(zhè)樣(yàng)能(néng)大(dà)大提高(gāo)效率。
四(sì)，css選擇器(qì)的分組
你可以(yǐ)對選擇器(qì)進行(háng)分組(zǔ)，這(zhè)樣(yàng)，被分組的選(xuǎn)擇器(qì)就可以分享(xiǎng)相同(tóng)的聲明。用(yòng)逗(dòu)號將(jiāng)需要(yào)分組的選擇器分(fēn)開。在下麵的(dí)例(lì)子中，我們對(duì)所有的標(biāo)題(tí)元(yuán)素進行了分組。所有的(dí)標題(tí)元(yuán)素都是綠色(sè)的(dí)，p段落，div分(fēn)區(qū)，span都是(shì)20像(xiàng)素(sù)字體。
h1,h2,h3,h4,h5,h6 {
color: green;
}
p,div,span{
font-size:20px;
}
五，縱向(xiàng)二(èr)級(jí)列表(biǎo)
二級菜(cài)單即指當(dāng)鼠標放(fàng)到一(yī)級菜單(dān)上後，會(huì)彈(dàn)出(chū)相應(yīng)的二(èr)級菜單，移(yí)去(qù)鼠(shǔ)標後(hòu)自動消失，我們接著上(shàng)邊(biān)的例子進行(háng)修(xiū)改(gǎi)，代(dài)碼(mǎ)如(rú)下：
<div id="menu">
<ul>
<li><a href="@#">首(shǒu)頁(yè)</a></li>
<li><a href="#">網(wǎng)頁版(bǎn)式布(bù)局(jú)</a>
<ul>
<li><a href="#">自適應(yīng)寬度</a></li>
<li><a href="#">固定(dìng)寬(kuān)度(dù)</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入(rù)門(mén)</a></li>
<li><a href="#">視頻教程</a></li>
<li><a href="#">常見(jiàn)問題</a></li>
</ul>
</li>
<li><a href="#">div+css實例</a></li>
<li><a href="#">常用代碼(mǎ)</a></li>
<li><a href="#">站(zhàn)長(cháng)雜(zá)談(tán)</a></li>
<li><a href="#">技術(shù)文(wén)檔</a></li>
<li><a href="#">資(zī)源下(xià)載</a></li>
<li><a href="#">圖(tú)片素(sù)材(cái)</a></li>
</ul>
</div>
接下來(lái)修(xiū)改css樣式表(biǎo)，先修(xiū)改#menu ul li，給(gěi)其(qí)增加(jiā)一(yī)個 position:relative;屬性(xìng)
然後定(dìng)義(yì)ID為menu下(xià)ul下裏(lǐ)內的ul樣式如下：
定(dìng)義(yì)display:none後(hòu)，默(mò)認狀態(tài)下將隱藏
定(dìng)義#menu ul li ul的(dí)position: absolute; left: 100px; top: 0px;，那(nà)麼它將(jiāng)以相(xiāng)對於(yú)它(tā)父元素li的(dí)上(shàng)為0，左為(wéi)100的(dí)位置(zhì)顯(xiǎn)示。最後我們設置(zhì)當鼠標劃過後(hòu)顯示下(xià)級菜單(dān)的(dí)樣式(shì)
#menu ul li:hover ul這個(gè)樣式比(bǐ)較(jiào)難理解，它的意思(sī)是(shì)定義ID為(wéi)menu下ul下li，當(dāng)鼠標劃過時ul的樣式(shì)，這(zhè)裏設置(zhì)為(wéi)display:block，指的(dí)是鼠標(biāo)劃過(guò)時(shí)顯(xiǎn)示這(zhè)塊(kuài)內容(róng)，這也實(shí)現我們今(jīn)天想要(yào)的(dí)效(xiào)果(guǒ)。其(qí)中的(dí):hover和前(qián)邊說的鏈(liàn)接一(yī)樣，同(tóng)屬於偽類，但(dàn)有一點注意，目前IE6隻支持a的偽(wěi)類(lèi)，其(qí)它標(biāo)簽(qiān)的(dí)偽(wěi)類(lèi)不支持，所以要想在IE6下也顯示正確，需(xū)要(yào)借(jiè)助(zhù)js來實現，我(wǒ)們(mén)定義一(yī)個類.current （自己命(mìng)名，需和(hé)JS中相同）的(dí)屬(shǔ)性為display:block;然後(hòu)當(dāng)鼠標劃(huá)過(guò)後，用JS給(gěi)當(dāng)前li添加(jiā)上(shàng)這(zhè)個樣式上(shàng)，根(gēn)據(jù)css的(dí)優先(xiān)級：指定(dìng)的高於繼承的(dí)原則，就實現(xiàn)了IE6下的(dí)正(zhèng)確顯示。所(suǒ)以需要加(jiā)上(shàng)JS和樣式#menu ul li.current ul { display:block;}。
#menu ul li.current ul { display:block;}
<!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" />
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("menu");
var allli = navRoot.getElementsByTagName("li")
for (i=0; i<allli.length; i++) {
node = allli[i];
node.onmouseover=function() {
this.className+=" current";
}
node.onmouseout=function() {
this.className=this.className.replace(" current", "");
}
}
}
}
window.onload=startList;
//--><!]]></script>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
img { border-style: none; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width: 100px; border: 1px solid #CCC; border-bottom:none;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }
#menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }
#menu ul li.current ul { display:block;}
#menu ul li:hover ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">網頁版(bǎn)式布(bù)局(jú)</a>
<ul>
<li><a href="#">自適應寬度(dù)</a></li>
<li><a href="#">固(gù)定(dìng)寬(kuān)度(dù)</a></li>
</ul>
</li>
<li><a href="#">div+css教(jiào)程(chéng)</a>
<ul>
<li><a href="#">新手(shǒu)入門</a></li>
<li><a href="#">視頻教(jiào)程</a></li>
<li><a href="#">常見(jiàn)問題</a></li>
</ul>
</li>
<li><a href="#">div+css實(shí)例</a></li>
<li><a href="#">常(cháng)用代碼</a></li>
<li><a href="#">站(zhàn)長雜(zá)談</a></li>
<li><a href="#">技術文檔(dàng)</a></li>
<li><a href="#">資源(yuán)下載</a></li>
<li><a href="#">圖片(piàn)素(sù)材</a></li>
</ul>
</div>
</body>
</html>
最(zuì)終(zhōng)顯(xiǎn)示效(xiào)果如下：
上節課講解塊級元素和(hé)內聯(lián)元素時(shí)提到(dào)display，今天用(yòng)到了(liǎo)display:block;和(hé)display:none;值(zhí)為none時表示(shì)將這(zhè)個(gè)元素隱藏(cáng)，為block時表示(shì)將(jiāng)它(tā)的隱(yǐn)藏狀態(tài)改(gǎi)為(wéi)顯示狀態詳細(xì)介(jiè)紹(shào)請參考css手(shǒu)冊(cè)
六(liù)，相對(duì)定(dìng)位和(hé)絕對定(dìng)位
§ 定(dìng)位標(biāo)簽(qiān)：position
§ 包含屬(shǔ)性：relative（相(xiāng)對(duì)） absolute（絕對）
1.position:relative; 如果(guǒ)對(duì)一個(gè)元素進(jìn)行(háng)相對定位，首(shǒu)先(xiān)它將(jiāng)出(chū)現在它(tā)所在(zài)的位置上。然後(hòu)通(tōng)過(guò)設置垂直或(huò)水(shuǐ)平位置，讓(ràng)這個元素(sù)"相(xiāng)對於(yú)"它(tā)的(dí)原始(shǐ)起點(diǎn)進(jìn)行移動(dòng)。（再一點，相對定(dìng)位時(shí)，無(wú)論(lùn)是否(fǒu)進行移動(dòng)，元(yuán)素仍然(rán)占(zhān)據原來(lái)的空(kōng)間。因此(cǐ)，移(yí)動元(yuán)素會導(dǎo)致它覆蓋其(qí)他框）
2.position:absolute; 表示絕對(duì)定(dìng)位，位置(zhì)將依據瀏(liú)覽器左(zuǒ)上(shàng)角開始(shǐ)計算。 絕對定位使(shǐ)元素脫離(lí)文(wén)檔流，因此不(bù)占(zhān)據空間。普通(tōng)文(wén)檔流中元(yuán)素的(dí)布局(jú)就(jiù)像絕(jué)對(duì)定(dìng)位(wèi)的(dí)元素不存(cún)在(zài)時一樣。（因(yīn)為絕對定(dìng)位的(dí)框與(yǔ)文檔(dàng)流(liú)無關(guān)，所以它們可(kě)以(yǐ)覆蓋頁(yè)麵(miàn)上的其(qí)他元素並可(kě)以通過(guò)z-index來控(kòng)製它(tā)層(céng)級次序。z-index的值越(yuè)高，它(tā)顯(xiǎn)示的越在上層(céng)。）
3.父容(róng)器(qì)使用相(xiāng)對(duì)定(dìng)位，子元素(sù)使用(yòng)絕對定(dìng)位(wèi)後(hòu)，這(zhè)樣子元素(sù)的位(wèi)置(zhì)不再相對於瀏覽器左(zuǒ)上角，而是(shì)相(xiāng)對於(yú)父(fù)窗口左(zuǒ)上角(jiǎo)
4.相對定(dìng)位(wèi)和絕對(duì)定(dìng)位(wèi)需要配合top，right，bottom，left使(shǐ)用來定(dìng)位具體位(wèi)置，這四個(gè)屬(shǔ)性(xìng)隻有(yǒu)在該元(yuán)素(sù)使用定位後(hòu)才(cái)生效，其它情(qíng)況(kuàng)下(xià)無(wú)效(xiào)。另外(wài)這(zhè)四(sì)個屬(shǔ)性(xìng)同(tóng)時(shí)隻能使用相鄰的兩(liǎng)個，不(bù)能(néng)即(jí)使(shǐ)用上又(yòu)使(shǐ)用(yòng)下，或即使(shǐ)用左(zuǒ)，又使用右
文(wén)章出處(chǔ)：標(biāo)準之(zhī)路 編輯：楊雨晨思(sī)
轉(zhuǎn)載請保(bǎo)留原文地(dì)址(zhǐ): https://antelcom.cn/show-340.html