- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业</title>
<style type='text/css'>
*{margin:0;
padding:0;}
.box1{width:960px;
height:42px;
border:1px solid #fbfbfb;
margin:50px auto;
padding-top:15px;
text-align: center;
}
.box1 a{
font-family :'雅黑';
padding:5px 10px;
background-color: gold;
color:black ;
font-size:12px;
text-decoration: none;
}
.box1 a:hover{
background-color: #cc0000;
}
.box{
list-style: none;
width: 960px;
height:42px;
margin:50px auto;
overflow: hidden;
border-style: solid;
border-color:black;
text-align: center;
}
.box2{padding-left:120px;}
.box li{
float: left;
text-align: :center;
padding-right: 20px
padding-left:-20px;
}
.box a{
display: block;
text-align: center;
padding:10px 10px;
text-decoration: none;
color:#33;
font:14px '雅黑';
}
.box a:hover{
/*padding-left:10px;*/
background-color: #cc0000;
}
.box span{padding-left:20px;
</style>
</head>
<body>
<div class="box1">
<a href= '#'>上一页</a>
<a href= '#'>1</a>
<a href= '#'>2</a>
<a href= '#'>3</a>
<a href= '#'>4</a>
<span>...</span>
<a href= '#'>17</a>
<a href= '#'>18</a>
<a href= '#'>19</a>
<a href= '#'>20</a>
<a href= '#'>下一页</a>
</div>
<ul class="box">
<li class = 'box2'><a href="#">首页<span> |</span></a></li>
<li><a href="#">网站建设<span> |</span></a></li>
<li><a href="#">程序开发<span> |</span></a></li>
<li><a href="#">网络营销<span> |</span></a></li>
<li><a href="#">企业VI<span> |</span></a></li>
<li><a href="#">案例展示<span> |</span></a></li>
<li><a href="#">联系我们<span> |</span></a></li>
</ul>
</body>
</html>
-
效果图
Image 1.png
