客服
縱向導航菜單及二級彈出菜單-Web標準(div+css)教程
今天我們開(kāi)始學(xué)習《十天學(xué)會(huì )web標準(div+css)》的縱向導航菜單及二級彈出菜單，包含以下內容和知識點(diǎn)：
一、縱向列表
二、標簽的默認樣式
三、css派生選擇器
四、css選擇器的分組
五、縱向二級列表
六、相對定位和絕對定位
一、縱向列表
縱向列表或稱(chēng)為縱向導航，在網(wǎng)站的產(chǎn)品列表中應用比較廣泛，如淘寶網(wǎng)左側的淘寶服務(wù)，今天我們就學(xué)習一下縱向導航的制作
先新建一個(gè)頁(yè)面，然后插入一個(gè)ID為menu的div，然后在設計視圖中選中文字，點(diǎn)擊工具欄的ul圖標，即會(huì )自動(dòng)插入ul和li，然后修改文字內容為你需要的內容。西安做網(wǎng)站推薦閱讀>>> 超鏈接偽類(lèi)-Web標準(div+css)教程，
<div id="menu">
<ul>
<li>首頁(yè)</li>
<li>網(wǎng)頁(yè)版式布局</li>
<li>div+css教程</li>
<li>div+css實(shí)例</li>
<li>常用代碼</li>
<li>站長(cháng)雜談</li>
<li>技術(shù)文檔</li>
<li>資源下載</li>
<li>圖片素材</li>
</ul>
</div>
從預覽的效果上看，四周都有很大的空隙，而且每一行前邊還有個(gè)點(diǎn)，這是因為標簽的默認樣式造成的，下面我們需要創(chuàng )建樣式表把標簽的默認樣式給清除掉
生成的css代碼如下：
<style type="text/css">
#menu ul { list-style: none; margin: 0px; padding: 0px; }
</style>
下面我們定義一下全局的字體，字號，行距等，點(diǎn)擊css樣式面板上的新建按鈕，在彈出的窗口中選擇器類(lèi)型選擇標簽，名稱(chēng)選擇body，然后在css編輯器中設置如下圖所示屬性
body全局樣式定義后，下面我們給#menu定義一個(gè)灰色的1px邊框及寬度，然后把li定義下背景色和下邊框及內邊距等
接下來(lái)定義li的背景色為淺灰色及下邊框和內邊距
這些屬性設置完后，一個(gè)簡(jiǎn)單的縱向列表菜單初具模型了。因為導航菜單，需要鏈接到其它頁(yè)面，下邊把這些導航加上鏈接，然后在定義a的狀態(tài)和鼠標劃過(guò)狀態(tài)。
要添加鏈接，先選擇要添加鏈接的文字，然后在屬性頁(yè)面鏈接上輸入要鏈接的頁(yè)面址，我這里輸入個(gè)#，是個(gè)虛擬鏈接，不指向任何頁(yè)面。
創(chuàng )建a的樣式后，下面我們增加個(gè)交互效果，當鼠標劃過(guò)鏈接文字時(shí)，讓文字顏色變成紅色，這時(shí)就需要用到a:hover這個(gè)偽類(lèi)了
這里的a:hover屬于偽類(lèi)，在下一章節時(shí)會(huì )詳細講解
源代碼如下：
|
<!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: 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)頁(yè)版式布局</a></li> <li><a href="#">div+css教程</a></li> <li><a href="#">div+css實(shí)例</a></li> <li><a href="#">常用代碼</a></li> <li><a href="#">站長(cháng)雜談</a></li> <li><a href="#">技術(shù)文檔</a></li> <li><a href="#">資源下載</a></li> <li><a href="#">圖片素材</a></li> </ul> </div> </body> </html> |
二、標簽的默認樣式
大多數標簽都有自己的默認樣式，比如第二天課程中遇到的body默認外邊距，另外本例中ul前的圓點(diǎn)及左側的內邊距，另h1-h6字體大小各不相同，em默認為斜體，strong表示粗體。正因為有這些默認樣式，一個(gè)設計合理的頁(yè)面，即使沒(méi)有加載樣式，也能讓用戶(hù)很容易閱讀。但此時(shí)這些默認樣式對我們沒(méi)用，所以需要清除掉，為了方便，建議用標簽重定義方式，這樣可以很簡(jiǎn)單地把全局的樣式給統一起來(lái)。另外頁(yè)面中的圖片添加鏈接后會(huì )默認添加個(gè)邊框，ul默認情況下會(huì )在列表前添加圓點(diǎn)，這些都是需要去掉的。西安做網(wǎng)站推薦閱讀>>> html列表-Web標準(div+css)教程，
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; }
這里選擇器類(lèi)型選擇復合內容，我用的是dw最新cs5版本，比之前章節用的cs3版本中更合理了，把ID和偽類(lèi)分開(kāi)了。然后在選擇器名稱(chēng)中輸入我們常用的帶默認樣式的標簽，中間以英文逗號分隔
下面對img標簽進(jìn)行重定義，清除圖片有鏈接時(shí)默認的邊框
下邊設置全局ul標簽默認的圓點(diǎn)為無(wú)
這樣就很簡(jiǎn)單把常用標簽的默認樣式給清除掉了，如果需要邊距的話(huà)再重新定義，也避免了各個(gè)瀏覽器對標簽默認樣式解析差異造成頁(yè)面顯示不一樣的問(wèn)題。
三、css派生選擇器
CSS初學(xué)者不知道使用子選擇器是影響他們效率的原因之一。派生選擇器可以幫助你節約大量的class定義。我上邊的例子中應用了些派生選擇器如下的css代碼
#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和#menu ul li即為派生選擇器，如果我們把前邊的#menu去掉，那么將是對ul標簽重定義，重定義的屬性將應用到全局，而前邊加上#menu后，將是定義ID為menu元素內ul的樣式，設置它的樣式只對#menu下的ul生效，不對它之后的ul生效，這個(gè)有點(diǎn)像編程中的局部變量，而直接定義ul則相當于全局變量。#menu ul li 是定義ID為menu元素內ul下的li，派生選擇器可以使我們不用再給每個(gè)li定義一個(gè)樣式名來(lái)定義樣式，只需使用派生選擇器，從它的父元素處選擇即可，這樣能大大提高效率。西安做網(wǎng)站推薦閱讀>>> 橫向導航菜單-Web標準(div+css)教程，
四、css選擇器的分組
你可以對選擇器進(jìn)行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開(kāi)。在下面的例子中，我們對所有的標題元素進(jìn)行了分組。所有的標題元素都是綠色的，p段落、div分區、span都是20像素字體。
h1,h2,h3,h4,h5,h6 {
color: green;
}
p,div,span{
font-size:20px;
}
五、縱向二級列表
二級菜單即指當鼠標放到一級菜單上后，會(huì )彈出相應的二級菜單，移去鼠標后自動(dòng)消失，我們接著(zhù)上邊的例子進(jìn)行修改，代碼如下：
<div id="menu">
<ul>
<li><a href="@#">首頁(yè)</a></li>
<li><a href="#">網(wǎng)頁(yè)版式布局</a>
<ul>
<li><a href="#">自適應寬度</a></li>
<li><a href="#">固定寬度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入門(mén)</a></li>
<li><a href="#">視頻教程</a></li>
<li><a href="#">常見(jiàn)問(wèn)題</a></li>
</ul>
</li>
<li><a href="#">div+css實(shí)例</a></li>
<li><a href="#">常用代碼</a></li>
<li><a href="#">站長(cháng)雜談</a></li>
<li><a href="#">技術(shù)文檔</a></li>
<li><a href="#">資源下載</a></li>
<li><a href="#">圖片素材</a></li>
</ul>
</div>
接下來(lái)修改css樣式表，先修改#menu ul li，給其增加一個(gè) position:relative;屬性
然后定義ID為menu下ul下里內的ul樣式如下：
定義display:none后，默認狀態(tài)下將隱藏
定義#menu ul li ul的position: absolute; left: 100px; top: 0px;，那么它將以相對于它父元素li的上為0，左為100的位置顯示。最后我們設置當鼠標劃過(guò)后顯示下級菜單的樣式
#menu ul li:hover ul這個(gè)樣式比較難理解，它的意思是定義ID為menu下ul下li，當鼠標劃過(guò)時(shí)ul的樣式，這里設置為display:block，指的是鼠標劃過(guò)時(shí)顯示這塊內容，這也實(shí)現我們今天想要的效果。其中的:hover和前邊說(shuō)的鏈接一樣，同屬于偽類(lèi)，但有一點(diǎn)注意，目前IE6只支持a的偽類(lèi)，其它標簽的偽類(lèi)不支持，所以要想在IE6下也顯示正確，需要借助js來(lái)實(shí)現，我們定義一個(gè)類(lèi).current （自己命名，需和JS中相同）的屬性為display:block;然后當鼠標劃過(guò)后，用JS給當前l(fā)i添加上這個(gè)樣式上，根據css的優(yōu)先級：指定的高于繼承的原則，就實(shí)現了IE6下的正確顯示。所以需要加上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=gb2312" /> <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="#">首頁(yè)</a></li> <li><a href="#">網(wǎng)頁(yè)版式布局</a> <ul> <li><a href="#">自適應寬度</a></li> <li><a href="#">固定寬度</a></li> </ul> </li> <li><a href="#">div+css教程</a> <ul> <li><a href="#">新手入門(mén)</a></li> <li><a href="#">視頻教程</a></li> <li><a href="#">常見(jiàn)問(wèn)題</a></li> </ul> </li> <li><a href="#">div+css實(shí)例</a></li> <li><a href="#">常用代碼</a></li> <li><a href="#">站長(cháng)雜談</a></li> <li><a href="#">技術(shù)文檔</a></li> <li><a href="#">資源下載</a></li> <li><a href="#">圖片素材</a></li> </ul> </div> </body> </html> |
最終顯示效果如下：
上節課講解塊級元素和內聯(lián)元素時(shí)提到display，今天用到了display:block;和display:none;值為none時(shí)表示將這個(gè)元素隱藏，為block時(shí)表示將它的隱藏狀態(tài)改為顯示狀態(tài)詳細介紹請參考css手冊
六、相對定位和絕對定位
§ 定位標簽：position
§ 包含屬性：relative（相對） absolute（絕對）
1.position:relative; 如果對一個(gè)元素進(jìn)行相對定位，首先它將出現在它所在的位置上。然后通過(guò)設置垂直或水平位置，讓這個(gè)元素"相對于"它的原始起點(diǎn)進(jìn)行移動(dòng)。（再一點(diǎn)，相對定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據原來(lái)的空間。因此，移動(dòng)元素會(huì )導致它覆蓋其他框）
2.position:absolute; 表示絕對定位，位置將依據瀏覽器左上角開(kāi)始計算。 絕對定位使元素脫離文檔流，因此不占據空間。普通文檔流中元素的布局就像絕對定位的元素不存在時(shí)一樣。（因為絕對定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其他元素并可以通過(guò)z-index來(lái)控制它層級次序。z-index的值越高，它顯示的越在上層。）
3.父容器使用相對定位，子元素使用絕對定位后，這樣子元素的位置不再相對于瀏覽器左上角，而是相對于父窗口左上角
4.相對定位和絕對定位需要配合top、right、bottom、left使用來(lái)定位具體位置，這四個(gè)屬性只有在該元素使用定位后才生效，其它情況下無(wú)效。另外這四個(gè)屬性同時(shí)只能使用相鄰的兩個(gè)，不能即使用上又使用下，或即使用左，又使用右
文章出處：標準之路 編輯：楊雨晨思
相關(guān)文章：
-
西安網(wǎng)站建設_西安做網(wǎng)站_西安網(wǎng)站制作——西安網(wǎng)絡(luò )公司...
-
CSS實(shí)現圖片裁剪居中 其實(shí)，css實(shí)現起來(lái)很簡(jiǎn)單，只需要設置img的樣式：object-fit：none即可，不過(guò)你要給img一個(gè)高度，因為裁剪嘛 頁(yè)面：（圖片可以自己隨便截兩張來(lái)測試） !--長(cháng)圖片-- div clas...
-
CSS背景圖片自適應全屏 .bg{ background:url(bg.png) no-repeat; background-size:cover; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )//IE特有的濾鏡 }...
-
Viewport viewport：可視窗口，也就是瀏覽器。 vw Viewport寬度， 1vw 等于viewport寬度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的數學(xué)運算規則，但是也提供更智能的功能：...
-
從企業(yè)建站角度講，最便捷、最適合企業(yè)的建站系統莫過(guò)于自助建站系統，市場(chǎng)上可供選擇的自助建站平臺也是一搜一大把。這些自助建站平臺采用傻瓜式建站風(fēng)格，容易上手，操作簡(jiǎn)單方便...
-
現在想做一個(gè)網(wǎng)站成本很低了，買(mǎi)個(gè)域名，買(mǎi)個(gè)幾十塊空間，弄個(gè)網(wǎng)站建設程序就可以開(kāi)始你的玩耍了，如果你還想找成本更低的，可以看下面的分享。 如何創(chuàng )建網(wǎng)站一直都是很多朋友想要知...
-
商城網(wǎng)站建設如何將吸引力提升 在信息如此豐富多樣的今天，商城網(wǎng)站建設如何才能夠在眾多的同類(lèi)當中脫穎而出，獲得大眾的吸引和青睞呢？這其實(shí)是相關(guān)網(wǎng)站建設人員一直在思考的一個(gè)問(wèn)...
-
現在越來(lái)越多的企業(yè)重視網(wǎng)站的運營(yíng)推廣，那怎樣推廣效果更好呢？西安蟠龍網(wǎng)絡(luò )小編認為沒(méi)用永恒不變得，而且要根據企業(yè)的具體情況選擇合適的推廣方式才是最好的，如果你又運營(yíng)推廣的...
-
隨著(zhù)互聯(lián)網(wǎng)的發(fā)展，人們每時(shí)每刻已經(jīng)離不開(kāi)網(wǎng)絡(luò )，而網(wǎng)站是網(wǎng)絡(luò )的基本組成部分，可以這么說(shuō)，網(wǎng)絡(luò )是由各種各樣的網(wǎng)站組成的，當下，網(wǎng)站是每個(gè)企業(yè)的標配，很多個(gè)人都有自己的網(wǎng)站，...
-
網(wǎng)站現在是一個(gè)企業(yè)的標配，很多沒(méi)有網(wǎng)站的企業(yè)不清楚網(wǎng)站對企業(yè)有什么作用，那么今天西安蟠龍小編總結一下網(wǎng)站對企業(yè)都有哪些好處，希望看完之后您對網(wǎng)站有更深一層的認識。 一、低...