网页导航栏制作：如何为网页添加导航栏
在很多网站中都需要一个导航栏。下面，我们来看看如何为网页添加导航栏吧。
操作方式
-
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
- 阅读 ( 907 )
- 分类：电脑网络
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章