特征布局1
2018-09-12 本文已影响0人
coolkid_carryon
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="generator" content="Bluefish 2.2.7" >
<meta name="author" content="dst" >
<meta name="date" content="2018-09-12T08:31:04+0800" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<link href="css/特征布局.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box1">
<a href="#"><span class="page">上一页</span></a>
<a href="#"><span class="page">1</span></a>
<a href="#"><span class="page">2</span></a>
<a href="#"><span class="page">3</span></a>
<a href="#"><span class="page">4</span></a>
<span id="ell">...</span>
<a href="#"><span class="page">17</span></a>
<a href="#"><span class="page">18</span></a>
<a href="#"><span class="page">19</span></a>
<a href="#"><span class="page">20</span></a>
<a href="#"><span class="page">下一页</span></a>
</div>
<div class="box2">
<a href="www.baidu.com" class="nav"><span>首页</span></a>
<span>|</span>
<a href="www.baidu.com" class="nav"><span>网站建设</span></a>
<span>|</span>
<a href="www.baidu.com" class="nav"><span>程序开发</span></a>
<span>|</span>
<a href="www.baidu.com" class="nav"><span>网络营销</span></a>
<span>|</span>
<a href="www.baidu.com" class="nav"><span>企业VI</span></a>
<span>|</span>
<a href="www.baidu.com" class="nav"><span>案例演示</span></a>
<span>|</span>
<a href="www.baidu.com" class="nav"><span>联系我们</span></a>
</div>
</body>
</html>
css:
.box1{
width: 958px;
height: 40px;
border: 1px solid gray;
margin: 18px auto;
text-align: center;
}
.box2{
width: 958px;
height: 40px;
border: 1px solid;
margin: 55px auto;
text-align: center;
}
.page{
display: inline-block;
background-color: gold;
padding: 5px 10px;
font: 12px 微软雅黑;
margin: 5px 2px;
}
.page:hover{
background-color: yellow;
}
.nav{
display: inline-block;
margin: 10px 20px;
font: 14px 微软雅黑;
color: skyblue;
}
a{
text-decoration: none;
}
.nav:link{
color: red;
}
.nav:visited{
color: purple;
}
.nav:hover{
color: blue;
}
.nav:active{
color: green;
}
效果图：
特征布局.png
