酷知百科網

位置:首頁 > 遊戲數碼 > 電腦

網頁導航欄製作:如何爲網頁添加導航欄

電腦8.39K

操作方法

製作一個放導航欄的容器
製作一個放導航欄的容器,容器名爲nav,容器寬爲1000px,高爲30px,背景顏

色爲灰色,相關代碼如下:
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
<div id="nav"></div>

網頁導航欄製作:如何爲網頁添加導航欄

顯示結果
在瀏覽器中顯示的結果爲下圖所示:

網頁導航欄製作:如何爲網頁添加導航欄 第2張

在容器中放入一些導航欄
導航欄代碼如下:
<ul>
<li>模組一</li>
<li>模組二</li>
<li>模組三</li>
<li>模組四</li>
<li>模組五</li>
<li>模組六</li>
</ul>

網頁導航欄製作:如何爲網頁添加導航欄 第3張

爲導航欄添加一些屬性
<style type="text/css">
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
#nav ul
{
width:960px;
height:35px;

}
#nav ul li
{
float:left;
width:100px;
float:left;
list-style:none;
background:yellow;
line-height:35px;
}

</style>

網頁導航欄製作:如何爲網頁添加導航欄 第4張
網頁導航欄製作:如何爲網頁添加導航欄 第5張

導航欄在瀏覽器頁面的顯示結果如下圖所示:

網頁導航欄製作:如何爲網頁添加導航欄 第6張
標籤:網頁 導航