1) 縱嚮導航菜單
<styletype="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>
<body>
<divid="menu">
<ul>
<li><ahref="@#">首頁</a></li>
<li><ahref="#">網頁版式布局</a></li>
</ul>
</div>
</body>
預設樣式是指,ul標籤預設樣式前面原點,載入圖片帶邊框等,去掉預設樣式方法:
ul{list-style:none;}
img{border-style=none;}
css派生選取器:有助於節約大量class的定義。#menu ul和#menu ul li即為派生選取器,只對id為menu的ul生效,屬性可以被id為menu下的li繼承。
2) 二級快顯功能表
當滑鼠放到一級菜單上後,彈出相應的二級菜單,移去滑鼠後自動消失。
<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>
<div id="menu">
<ul>
<li><ahref="#">首頁</a></li>
<li><ahref="#">視頻教程</a>
<ul>
<li><ahref="#">工具</a></li>
<li><ahref="#">書籤</a></li>
</ul>
</li>
<li><ahref="#">資料下載</a>
<ul>
<li><ahref="#">醫院</a></li>
<li><ahref="#">學校</a></li>
</ul>
</li>
</ul>
</div>
#menu ul li:hover ul { display:block;}代表當滑鼠放置到一級菜單時,二級菜單顯示。display屬性none表示元素隱藏;block表示顯示。
position定位屬性,值relative表示如果對一個元素進行相對定位,首先它將出現在它所在的位置,然後相對於原始起點進行水平或垂直的移動。無論是否移動,元素仍然佔據原來的空間; 值absolute表示絕對位置,依據瀏覽器左上方開始計算,絕對位置使元素脫離文檔流,因此不佔據空間,普通文檔流中元素的布局就像絕對位置的元素不存在一樣,絕對位置的元素與文檔流無關,可以覆蓋頁面上其他元素,可通過z-index來控制層級次序,值越高顯示越在上層。
父容器使用相對定位,子項目使用絕對位置後,子項目不再相對於瀏覽器左上方,而是相對於父容器左上方。相對定位和絕對位置需要配合top、right、bottom、left來定位具體位置。