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

CSS样式网页导航条

2016-05-18 11:35 579 查看
1、图片素材：

2、实现代码：

</pre><p><pre name="code" class="html"><!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
li {
list-style: none;
float: left;
font-size: 14px;
text-align: center;
}

a:link,
a:visited {
display: block;
width: 84px;
font-weight: bold;
color: black;
text-align: center;
text-decoration: none;
}

a:hover,a:active{
background:url(img/nav_bg.gif);
width: 84px;
height: 26px;
position: relative;
line-height: 28px;
text-align: center;
font-size: 14px;
letter-spacing: 3px;/*字符间距*/
margin-top: -7px;
/*z-index: -1;*/
}

.bg {
margin-left: 100px;
color: #F8A046;
font-size: 18px;
font-weight: bold;
background-image: url(img/h_bg.jpg);
background-repeat: no-repeat;
width: 1200px;
height: 150px;
white-space: nowrap;
background-position: -20px 1px;
}

ul {
padding-top: 104px;
padding-left: 2px;
}
</style>

</head>

<body>
<div class="bg">
<ul>
<li><a href="">首  页</a></li>
<li><a href="">家用电器</a></li>
<li><a href="">手机数码</a></li>
<li><a href="">日用百货</a></li>
<li><a href="">书  籍</li>
<li><a href="">帮助中心</li>
<li><a href="">免费开店</li>
<li><a href="">全球资讯</li>

</ul>
</div>
</body>
</html>

3、实现效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航