在很多网站中都需要一个导航栏 。 下面, 我们来看看如何为网页添加导航栏吧 。 操作方式 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 导航栏在浏览器页面的显示成果如下图所示:
文章插图
以上内容就是网页导航栏制作:如何为网页添加导航栏的内容啦, 希望对你有所帮助哦!
推荐阅读
- 按键精灵如何注销网页用户
- 怎么把网页下载下来
- 手机离线观看网页
- 网页错误代码:连接错误解决方法
- 怎么样登录网页版QQ
- 怎样制作凯立德导航外置手机SD卡
- 用电视家浏览器在智能电视上浏览网页的教程
- 打开网页提示403 Forbidden错误怎么办
- ps如何制作Web按钮
- 网页被阻止怎么办