標籤：style class blog c code java
今天我們開始學習下拉及多級快顯功能表，包含以下內容和知識點：
帶下拉子功能表的導覽功能表
絕對位置和浮動的區別和運用
css自適應寬度滑動門菜單
一、帶下拉子功能表的導覽功能表
下拉式功能表在一些企業網站應用程式尤為廣泛，它存在使用方便，佔用空間小等特點。之前縱嚮導航教程中已使用過二級導航，今天製作下橫嚮導航菜單的二級菜單，方法和縱向一樣，只不過由縱向改變為橫向而已，下面我們以上一章第二節用圖片美化的橫嚮導航中的執行個體進行修改。
<!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[//><!--function menuFix() {var sfEls = document.getElementById("menu").getElementsByTagName("li");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onMouseDown=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onMouseUp=function() {this.className+=(this.className.length>0? " ": "") + "sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");}}}window.onload=menuFix;//--><!]]></script><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(images/2010-06/27/nav_bg2.gif) 0 0 no-repeat; font-size:14px;}#menu ul li a:hover { background:url(images/2010-06/27/nav_bg3.gif) 0 0 no-repeat;}#menu ul li a#current { background:url(images/2010-06/27/nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}#menu ul li ul li { float:none; width:87px; background:#eee; margin:0;}#menu ul li ul li a { background:none;}#menu ul li ul li a:hover { background:#333; color:#fff;}#menu ul li:hover ul { display:block;}#menu ul li.sfhover ul { display:block;}</style></head><body><div id="menu"><ul><li><a id="current" href="#">首頁</a></li><li><a href="#">網頁版式</a><ul><li><a href="#">自適應寬度</a></li><li><a href="#">固定寬度</a></li></ul></li><li><a href="#">web教程</a><ul><li><a href="#">新手入門</a></li><li><a href="#">視頻教程</a></li><li><a href="#">常見問題</a></li></ul></li><li><a href="#">web執行個體</a></li><li><a href="#">常用代碼</a></li></ul></div></body></html>
二、絕對位置和浮動的區別和運用
學習到現在，定位和浮動也都涉及到了，但有些朋友可能還在迷惑，兩者都可以分欄布局，到底什麼時候用浮動，什麼時候用定位呢？
當一個元素使用絕對位置後，它的位置將依據瀏覽器左上方開始計算或相對於父容器（在父容器使用相對定位時）。 絕對位置使元素脫離文檔流，因此不佔據空間。普通文檔流中元素的布局就當絕對位置的元素不存在時一樣。因為絕對位置的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素。
而浮動元素的定位還是基於正常的文檔流，然後從文檔流中抽出並儘可能遠的移動至左側或者右側。文字內容會圍繞在浮動元素周圍。當一個元素從正常文檔流中抽出後，仍然在文檔流中的其他元素將忽略該元素並填補他原先的空間。它只是改變了文檔流的顯示，而沒有脫離文檔流，理解了這一點，就很容易弄明白什麼時候用定位，什麼時候用浮動了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
