制作一個(gè)放導(dǎo)航欄的容器

制作一個(gè)放導(dǎo)航欄的容器，容器名為nav，容器寬為1000px，高為30px，背景顏

色為灰色，相關(guān)代碼如下：
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
<div id="nav"></div>

顯示結(jié)果

在瀏覽器中顯示的結(jié)果為下圖所示：

在容器中放入一些導(dǎo)航欄

導(dǎo)航欄代碼如下:
<ul>
<li>模塊一</li>
<li>模塊二</li>
<li>模塊三</li>
<li>模塊四</li>
<li>模塊五</li>
<li>模塊六</li>
</ul>

為導(dǎo)航欄添加一些屬性

<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>

導(dǎo)航欄在瀏覽器頁(yè)面的顯示結(jié)果如下圖所示：