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

CSS中，制作导航条实例，外加“new”小提示

2017-12-15 19:02 399 查看

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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航