您的位置：首页 > Web前端 > CSS

css 创建水平导航条

2015-11-16 12:30 471 查看
效果如下所示：



html代码片段如下所示：

<body id="home">

<ul class="nav">
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Case Studies</a></li>
</ul>
<br class="clear" />
</body>


css样式如下：水平有方式列举了三种方式，参看注释

<style type="text/css">

ul.nav{
margin: 0;
padding: 0;
list-style: none;
width: 72em;
background: #faa819 url(img/mainNavBg.gif) repeat-x;
}

ul.nav li{
float: left;
}
/* 方法一：添加一个进行清理的元素*/
/*.nav:after{
content: ".";
height: 0;
visibility: hidden;
display: block;
clear:both;
}*/
/*方法二：父元素浮动，并使用某个元素（站点页脚）对它进行清理以便换行。*/
/*ul.nav{
float: left;
}
url.nav .clear{
clear: both;
}*/
/* 方法三：使用overflow：hidden技术（推荐） */
ul.nav{
margin: 0;
padding: 0;
list-style: none;
width: 72em;
overflow: hidden;
background: #FAA819 url(img/mainNavBg.gif) repeat-x;
}
ul.nav a{
display: block;
padding: 0 3em;
line-height: 2.1em;
background:url(img/divider.gif) repeat-y left top;
text-decoration: none;
color: #fff;
}
ul.nav .first a{
background-image: none;
}
ul.nav a:hover,
ul.nav a:focus{
color:#333;
}
</style>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航