核心提示：如何利用CSS制作导航条？附new小提示!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8title布局实例--导航条/titlestyle.menu{li...
如何利用CSS制作导航条？附“new”小提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局实例--导航条</title>
<style>
.menu{
list-style: none;
background: #55a8ba;
padding: 0;
width: 960px;
height: 40px;
margin: 50px auto;
/* 相对定位 */
position: relative;
}
.menu li{
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
}
.menu li a{
text-decoration: none;
font-size: 14px;
font-family: "Microsoft Yahei";
color: white;
}
.menu .active{
background-color: #00619f;
}
.menu li:hover{
background-color: #00619f;
}
.menu .new{
width: 25px;
height: 21px;
/* 背景图片 */
background: url(2.jpg) no-repeat;
/* 绝对定位 */
position: absolute;
/* 定位的位置 */
left: 436px;
top: -12px;
}
</style>
</head>
<body>
<ul class="menu">
<li class="active"><a href="">首页</a></li>
<li><a href="">网站介绍</a></li>
<li><a href="">站介绍</a></li>
<li><a href="">站介绍</a></li>
<li><a href="">站介绍</a></li>
<li><a href="">站介绍</a></li>
<li><a href="">站介绍</a></li>
<li class="new"></li>
</ul>
</body>
</html>
