代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>翻页</title> <style type="text/css"> .pagenation{ list-style: none; margin:0; padding:0; width:600px; height:40px; border:1px solid #000; font-size:0; /* 取消间隙 */ text-align:center; } .pagenation li{ display:inline-block; height:26px; /*background-color: gold;*/ font-size:12px; margin-top:7px; /* 设置水平居中 */ margin-left:5px; /* 设置左右间隙 */ } .pagenation li a{ display:block; height:26px; line-height:26px; padding:0 10px; text-decoration:none; font:normal 12px/26px "Microsoft YaHei"; color:#000; background-color: gold; } .pagenation li a:hover{ color:#fff; background-color:red; } </style> </head> <body> <!-- 规范的做法还是用ul、li --> <ul class="pagenation"> <li><a href="#">上一页</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>
页面效果：