<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
margin: 0 auto;
height: 20px;
width: 700px;
list-style: none;
background: url("image/01.jpg");
background-repeat: repeat-x;
padding: 0 0 0 36px;
}
.menu li {
float: left;
}
.menu li a{
float: left;
display: block;
color: #ff04b7;
text-decoration: none;
font-family: Arial;
height: 60px;
text-align: center;
font-size: 12px;
cursor: pointer;
}
.menu li a b{
float: left;
display: block;
padding: 0px 24px 0px 8px;
border: 1px solid pink;
}
.menu li.current a:hover , .menu li a:hover{
color: #fff;
background: url("image/02.jpg") no-repeat;
background-position: left;
}
</style>
</head>
<body>
<ul class="menu">
<li class="current"><a href="#"><b>查看css样式表</b></a></li>
<li><a href="#"><b>参考资料</b></a></li>
<li><a href="#"><b>常见问题</b></a></li>
<li><a href="#"><b>投稿</b></a></li>
<li><a href="#"><b>翻译文件</b></a></li>
</ul>
</body>
</html>
css滑动门
最新推荐文章于 2023-04-17 22:18:39 发布