DIV+CSS布局：制作橫向導航欄

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> DIV+CSS布局：制作橫向導航欄

DIV+CSS布局：制作橫向導航欄

編輯：CSS詳解

導航欄是為了讓訪問者更清晰明朗的找到所需要的資源,是網站提供給用戶的最直接最方便的訪問網站內容的工具。

網站的主導航一般采用橫向導航，其核心目標是設計一個簡便快捷的操作入口，幫助用戶快速到達網站中的相應內容。

今天我們將使用css制作橫向導航欄，效果如下圖：

在使用css制作導航欄之前，先看一下傳統的表格式布局導航制作。

如果表格式布局實現如上圖所示的導航，需要設計一個表格table。導航有5個欄目組成，需要設計一個1行5列的表格，並在每一個單元<td></td>標簽中插入導航文字，然後　讓每個單元格的文本居中,代碼如下：

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td align="center"><a href="http://www.xin126.cn">主頁</a></td>
    <td align="center"><a href="http://www.xin126.cn/list.asp?id=314">DIV+CSS布局</a></td>
    <td align="center"><a href="http://www.xin126.cn/list.asp?id=313">網頁配色</a></td>
    <td align="center"><a href="http://www.xin126.cn/list.asp?id=247">建站入門</a></td>
    <td align="center"><a href="http://www.xin126.cn/soft_list.asp?id=293">站長工具</a></td>
</tr>
</table>

而使用CSS,可以實現表現和內容的分離，代碼示例：

<div id="nav">
<ul>
<li><a href="http://www.xin126.cn">主頁</a></li>
<li><a href="http://www.xin126.cn/list.asp?id=314">DIV+CSS布局</a></li>
<li><a href="http://www.xin126.cn/list.asp?id=313">網頁配色</a></li>
<li><a href="http://www.xin126.cn/list.asp?id=247">建站入門</a></li>
<li><a href="http://www.xin126.cn/soft_list.asp?id=293">站長工具</a></li>
</ul>
</div>

加入一些簡單的CSS代碼：

效果如下：

默認ul下的li對象，每一個列表項從上至下的排列，所以效果如上圖。為了讓ul下的li對象橫向排列，我們給#nav li指定float:left;

#nav ul li { float:left; }

導航居中顯示，需要設置#nav 的 margin:0 auto;

#nav { margin:0 auto;width:600px; border: 1px solid #CCC; height:26px; background: #eee;}
#nav ul { list-style: none; margin: 0px; padding: 0px; }

上面的list-style: none; margin: 0px; padding: 0px;去除浏覽器默認ul顯示樣式以及外邊距、內邊距。
總導航欄寬度600，5個欄目，一個欄目寬度為120px，並且設置欄目中文字居中顯示代碼如下：

#nav ul li a {width:120px; display:block; height: 26px; line-height: 26px; text-align:center; float:left;}

當鼠標放上去的時候背景顏色和文字顏色都有變化：

#nav ul li a:hover { background:#333; color:#fff;}

整體代碼：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>DIV+CSS布局：制作橫向導航欄</title> <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; } #nav { margin:0 auto;width:600px; border: 1px solid #CCC; height:26px; background: #eee;} #nav ul { list-style: none; margin: 0px; padding: 0px; } #nav ul li { float:left; } #nav ul li a {width:120px; display:block; height: 26px; line-height: 26px; text-align:center; float:left;} #nav ul li a:hover { background:#333; color:#fff;} </style> </head> <body> <div id="nav"> <ul> <li><a href="http://www.xin126.cn">主頁</a></li> <li><a href="http://www.xin126.cn/list.asp?id=314">DIV+CSS布局</a></li> <li><a href="http://www.xin126.cn/list.asp?id=313">網頁配色</a></li> <li><a href="http://www.xin126.cn/list.asp?id=247">建站入門</a></li> <li><a href="http://www.xin126.cn/soft_list.asp?id=293">站長工具</a></li> </ul> </div> </body> </html>
提示：可以先修改部分代碼後再運行

CSS詳解

IE7、IE8、Firefox中實現DIV自動適應高度: 你對DIV+CSS在IE7、IE8、Firefox中實現DIV自動適應高度的方法是否了解，這裡和大
各種跨浏覽器兼容的CSS編碼准則和技巧: 很多人認為，完美的跨浏覽器兼容並不必要，這樣說雖然沒錯，但在很多情形，一種近似的兼容還是很容易實現
CSS自定義select下拉選擇框不用其他標簽模擬且兼容多數浏覽器: 怎麼自定義select下拉選擇框的樣式，起先考慮怎樣使用純CSS實現，把浏覽器默認的樣式覆蓋掉，但

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

CSS兩種方式link和@import CSS控制二級菜單動態出現不只有js才能做到 CSS代碼實例:用CSS代碼寫出的各種形狀圖 CSS布局實例:上中下三行,中間自適應通過CSS規則禁止選中文字的實現代碼 css3.0的新屬性的參考列表狀態欄字符跳動特效 CSS擴展濾鏡屬性及語法判斷用戶浏覽器及分辨率調用不同的CSS樣式文件關於 CSS 選擇器

DIV CSS 佈局教程網

相關文章