导航编辑
作者:
CdMedici | 来源:发表于
2015-11-12 15:05 被阅读0次
![](https://img.haomeiwen.com/i1183604/18f8900be844381d.png)
模仿导航栏
<head>
<style>
ul{list-style-type:none; }/*去掉ul的默认list style*/
li{float:left; }/*浮动让其在一行显示*/
a{display:block; }/*把a转换为块级元素。用于设置宽高*/
.nav {
background: url(images/nav_bg.gif) ; /* 设置大背景*/
height: 48px;
width: 700px;
margin: 20px auto;
}
.nav_l {
background: url(images/nav_l_bg.gif); /*设置左边圆角背景*/
height: 48px;
width: 9px;
float: left;
}
.nav_r {
background: url(images/nav_r_bg.gif);
height: 48px;
width: 9px;
float: right;
}
.nav ul li {
background: url(images/nav_li_right.gif) no-repeat right center;
height: 48px;
text-align: center;
padding: 0 10px;
}
.nav ul li a {
text-decoration: none; /*去掉a默认下划线*/
color: #fff;
font-weight: bold; /*设置加粗属性*/
width: 88px;
height: 37px;
line-height: 48px; /*设置行高*/
display: block;
}
.nav ul li a:hover {
background: url(images/nav_li_hover.gif);
line-height: 37px;
}
.nav ul li a.active {
background: url(images/nav_li_current.gif);
line-height: 37px;
}
</style>
</head>
<body>
<div class="nav">
<!--lift-->
<div class="nav_l"></div>
<!--middle-->
<ul>
<li><a href="#" class="active">首页</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">产品动态</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<!--right-->
<div class="nav_r"></div>
</div>
</body>
本文标题:导航编辑
本文链接:https://www.haomeiwen.com/subject/efihhttx.html
网友评论