.skin-box-bd{background:transparent}.skin-box-bd .menu-list{background:transparent}.skin-box-bd .menu-list .menu{background:transparentborder:none}.skin-box-bd .menu-list .menu .link{background:transparentborder:none}.all-cats{background:transparent}.all-cats .link{background:transparentborder:none}.skin-box-bd .menu-list .menu .link .title{color:#000000}.all-cats .link .title{color:#000000}.all-cats .link .popup-icon{background:transparent}
我百度空间中有代码生成工具,其中有一项就是关于导航栏CSS代码的,可以自助生成代码,你可以去看看。
制作一个放导航栏的容器制作一个放导航栏的容器,容器名为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>
导航栏在浏览器页面的显示结果如下图所示: