这样的页面，在每个购物的网站都有，大家有没有想过是怎么做出来的呢，今天就给大家揭秘一下：

<!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 > 里面有详细的备注，大家可以仔细的看看，练习一下

更多推荐

做一个简单的上下翻页的html