<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业1228</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.abc{
height: 42px;
width: 960px;
border: 1px solid #deddd9;
margin: 30px auto;
}
.a{
list-style: none;
margin: 0px 248px 0px 248px;
}
.a li{
float: left;
margin: 8px auto;
}
.b{
display: block;
font-size: 12px;
font-family: 微软雅黑;
color: black;
background-color: gold;
padding: 5px 10px;
text-decoration: none;
margin: 3px;
}
.box{
width: 960px;
height: 42px;
margin: 30px auto;
border: 1px solid #000;
}
.nav{
list-style: none;
margin: 4px 248px 4px 248px;
}
.nav li{
float: left;
margin: 8px auto;
display: block;
}
.nav a{
display: block;
font-size: 14px;
font-family: 微软雅黑;
color: black;
text-decoration: none;
margin-left: 6px;
margin-right: 6px;
font-weight: bold;
}
.bj{
margin-top: 100px;
width: 960px;
height: 40px;
background-color: #55a8ea;
}
.sy{
width: 700px;
height: 40px;
list-style: none;
float: left;
}
.sy li:hover{
background-color: #00619f;
}
.top-menu-li{
width: 100px;
line-height: 40px;
float: left;
text-align: center;
}
.sy1{
/*font: 14px '雅黑';*/
color: #fff;
text-decoration: none;
font: 14px tahoma, arial, 宋体;
}
.sy2{
color: #fff;
text-decoration: none;
font: 14px tahoma, arial, 宋体;
/*background: url(新建文件夹/new.png) no-repeat;
width: 33px;
height: 20px;*/
}
.sy2:after{
content: '';
position: absolute;
width: 33px;
height: 20px;
display: block;
background: url(img/new.png);
margin-top: -45px;
margin-left: 135px;
}
</style>
</head>
<body>
<div class="abc">
<ul class="a">
<li><a href="#" class="b">上一页</a><a href="#"></a></li>
<li><a href="#" class="b">1</a><a href="#"></a></li>
<li><a href="#" class="b">2</a></li>
<li><a href="#" class="b">3</a></li>
<li><a href="#" class="b">4</a></li>
<li>...</li>
<li><a href="#" class="b">17</a></li>
<li><a href="#" class="b">18</a></li>
<li><a href="#" class="b">19</a></li>
<li><a href="#" class="b">20</a></li>
<li><a href="#" class="b">下一页</a></li>
</ul>
</div>
<div class="box">
<ul class="nav">
<li><a href="#">首页</a></li>
<li>|</li>
<li><a href="#">网站建设</a></li>
<li>|</li>
<li><a href="#">程序开发</a></li>
<li>|</li>
<li><a href="#">网页营销</a></li>
<li>|</li>
<li><a href="#">企业VI</a></li>
<li>|</li>
<li><a href="#">实例展示</a></li>
<li>|</li>
<li><a href="#">联系我们</a></li>
</ul>
<div class="bj">
<ul class="sy">
<li class=top-menu-li><a href="#" class="sy1">首页</a></li>
<li class=top-menu-li><a href="#" class="sy1">网站建设</a></li>
<li class=top-menu-li><a href="#" class="sy1">程序开发</a></li>
<li class=top-menu-li><a href="#" class="sy2">网页营销</a></li>
<li class=top-menu-li><a href="#" class="sy1">企业VI</a></li>
<li class=top-menu-li><a href="#" class="sy1">实例展示</a></li>
<li class=top-menu-li><a href="#" class="sy1">联系我们</a></li>
</ul>
</div>
</body>
</html>
