欢迎您访问365答案网,请分享给你的朋友!
生活常识 学习资料

网页导航栏制作:如何为网页添加导航栏

时间:2022-01-02
操作方法

制作一个放导航栏的容器制作一个放导航栏的容器,容器名为nav,容器宽为1000px,高为30px,背景颜色为灰色,相关代码如下: #nav { width:1000px; height:30px; background:#CCC; margin:0 auto; margin-top:50px; } <div id="nav"></div>

显示结果在浏览器中显示的结果为下图所示:

在容器中放入一些导航栏导航栏代码如下: <ul> <li>模块一</li> <li>模块二</li> <li>模块三</li> <li>模块四</li> <li>模块五</li> <li>模块六</li> </ul>

为导航栏添加一些属性<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>

导航栏在浏览器页面的显示结果如下图所示:

Copyright © 2016-2020 www.365daan.com All Rights Reserved. 365答案网 版权所有 备案号:

部分内容来自互联网,版权归原作者所有,如有冒犯请联系我们,我们将在三个工作时内妥善处理。