<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.box{
width: 1200px;
margin: 50px auto;
background-image: url(jianbian.jpg);
background-repeat: repeat-x;
font-size: 15px;
font-family: "微软雅黑";
}
.box ul{
overflow: hidden;
}
.box ul li{
float: left;
width: 150px;
line-height: 60px;
text-align: center;
font-size: 30px;
}
.box ul li a{
display: block;
color: white;
text-decoration: none;
}
.box ul li a:hover,.box ul li.current{
display: block;
text-decoration: none;
font-weight: bold;
background-image: url(orange.jpg);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="current"><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><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
css制作简易导航栏(html+css学习第5天)鼠标悬停变色
猜你喜欢
转载自blog.csdn.net/weixin_41306215/article/details/105014739
今日推荐
周排行