这样的页面，在每个购物的网站都有，大家有没有想过是怎么做出来的呢，今天就给大家揭秘一下：
<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< style >
.con {
width: 960px;
height: 40px;
border: 1px solid #d1d1d1;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
font-size: 0;
}
.con li {
margin: 7px 5px 0;
/*把li转为内联块 排成一排*/
display: inline-block;
}
/*把大小的改变加到a上
一般超链接的点击范围要大一些
*/
.con a {
/*转换为内联块 才可以增加a标签的大小*/
display: inline-block;
background: gold;
/*14 12*/
padding: 7px 10px;
font-size: 12px;
/*把行高设置和文字一样 方便计算a标签的高度*/
line-height: 12px;
color: #393c35;
text-decoration: none;
}
.con a:hover {
color: red;
background-color: blue;
}
.con span {
font-size: 12px;
}
< / style >
</ head >
< body >
< ul class= "con" >
< li >
< a href= "" >上一页 </ a >
</ li >
< li >< a href= "" >1 </ a ></ li >
< li >< a href= "" >2 </ a ></ li >
< li >< a href= "" >3 </ a ></ li >
< li >< a href= "" >4 </ a ></ li >
< li >< span >... </ span ></ li >
< li >< a href= "" >17 </ a ></ li >
< li >< a href= "" >18 </ a ></ li >
< li >< a href= "" >19 </ a ></ li >
< li >< a href= "" >20 </ a ></ li >
< li >< a href= "" >下一页 </ a ></ li >
</ ul >
</ body >
</ html >
版权声明：本文为master_ning原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。