網頁導航欄制作：如何為網頁添加導航欄
在很多網站中都需要一個導航欄。下面，我們來看看如何為網頁添加導航欄吧。
操作方式
-
01
建造一個放導航欄的容器
建造一個放導航欄的容器，容器名為nav，容器寬為1000px，高為30px，布景顏
色為灰色，相關代碼如下：
#nav
{
width:1000px;
height:30px;
background:#CCC;
margin:0 auto;
margin-top:50px;
}
<div id="nav"></div> -
02
顯示成果
在瀏覽器中顯示的成果為下圖所示： -
03
在容器中放入一些導航欄
導航欄代碼如下:
<ul>
<li>模塊一</li>
<li>模塊二</li>
<li>模塊三</li>
<li>模塊四</li>
<li>模塊五</li>
<li>模塊六</li>
</ul> -
04
為導航欄添加一些屬性
<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> -
05
導航欄在瀏覽器頁面的顯示成果如下圖所示：
- End
- 發表于 2018-04-01 00:00
- 閱讀 ( 909 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章