經曆簡單的橫向、縱向、二級菜單後，開始“滑動門”之旅。
(在阿捷的網站上借用了一幅圖片)
想法是用無序列表ul來實現
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><title> new document </title><br /><meta name="generator" content="editplus" /><br /><meta name="author" content="" /><br /><meta name="keywords" content="" /><br /><meta name="description" content="" /><br /><style type="text/css"><br />#nav<br />{<br />padding:10px 0 0 46px;<br />margin:0px;<br />width:80%;<br />list-style:none;<br />height:26px;<br />border-bottom:solid 1px #690;<br />}<br />#nav li<br />{<br />float:left;<br />margin-right:6px;<br />padding:0px;<br />display:block;<br />height:25px;<br />width:80px;<br />border:1px solid #690;<br />border-bottom:none;<br />line-height:25px;<br />}<br />#nav a<br />{<br />height:25px;<br />width:80px;<br />font-family:verdana;<br />display:block;<br />color:#333;<br />text-decoration:none;<br />text-align:center;<br />background:#f9e9a9;<br />font-size:12px;<br />}<br />#nav li a.active<br />{<br />background:white;<br />padding-bottom:5px;<br />}<br />#nav li:hover a,#nav li.over a<br />{<br />background:white;<br />padding-bottom:2px;<br />position:absolute;<br />}<br /></style><br /><script type="text/javascript"><br />var init = function()<br />{<br />var nav = document.getElementById('nav');<br />var childs = nav.childNodes;<br />for(var i = 0;i<childs.length;i++)<br />{<br />if(childs[i].nodeName=="LI")<br />{<br />childs[i].onmouseover = function(){this.className='over';}<br />childs[i].onmouseout = function(){this.className='';}<br />}<br />}<br />}<br />window.onload = init;<br /></script><br /></head><br /><body><br /><ul id="nav"><br /><li id="1"><a href="#1">aaa</a></li><br /><li><a href="#1">aaa</a></li><br /><li><a href="#1">aaa</a></li><br /><li><a href="#1">aaa</a></li><br /><li><a href="#1">aaa</a></li><br /><li><a href="#1">aaa</a></li><br /></ul><br /></body><br /></html><br />
每一個li設定好border屬性，除了底部的之外，因為底部那根線條要ul的border-bottom去處理。
因為橫向顯示，所以li要進行float:left；
再則，li進行float:left之後，ul無法確定其自身的高度，所以需要顯示指定一個高：
#nav
{
padding:10px 0 0 46px;
margin:0px;
width:80%;
list-style:none;
height:26px; /*這裡一定要指定*/
border-bottom:solid 1px #690; /*設定底部線條*/
}
由於IE與FireFox的差異性，需同時指定li與li a的width/height的值。
沒想到這樣一小小的東東，卻這樣大傷腦筋 T_T
另，css的選擇符，初學也會被弄暈
引用自:http://www.cnblogs.com/adandelion/archive/2007/05/23/757141.html
(1).AA{}表示偽類,使用的時候使用class="AA"
(2)Table{} 表示為表格設定預設樣式
(3)table.table1{} 表格樣式使用的時候,在<table>元素裡 class="table1" 在其他HTML標籤裡不可用.
(4)div#Search 表示為ID為Search的div設定樣式 使用的時候該DIV不需要設定class屬性
(5)div#HeadTop li 表示為id為HeadTop的DIV裡的<li>元素設定樣式,該元素無須設定class屬性
(6)div#HeadTop li.left表示為id為HeadTop的DIV裡的class="left"的<li>元素設定樣式
(7).rightContent li a,.rightContent h3 a {color:#1f3a87; } 表示為CLASS="rightContent"的元素裡的<li>裡面的<a>設定顏色屬性;
class="rightContent"元素的<h3>元素裡的<a>的顏色屬性亦如此.
(8).rightContent .theTip{ clear:both; padding:9px 0 0;} 表示為calss="rightContent" 裡的子項目中class="theTip"設定樣式.
(9)div#Head ul#GlobalNav div.NavAll li a:hover{}表示為id為Head的DIV元素裡的id為GlobalNav裡的UL元素裡的id為NavAll的div元素裡的的Li元素設定a的樣式.
(10)#ListPathLinks ul{float:left;} 表示為id為ListPathLinks裡的ul元素設定樣式.
(11)#dl_centerlist {}表示為ID="dl_centerlist"的元素設定樣式
(12)div#dl_centerlist和#dl_centerlist的區別:DIV元素指定了id="dl_centerlis";
如果存在"div#dl_centerlist" 則該樣式起作用,否則#dl_centerlist的樣式將起作用.
文章來源:http://www.lemongtree.com/Archives/733.aspx
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
