CSS分页 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>居中分页DIV CSS</title>
  <style>
 .pages{text-align: center;}
.pages li{display: inline-block;margin:5px 1px 0 0;}
.pages a{display:block;color: #000;height:23px;line-height:23px;padding:0 8px;background:#fff;border:1px solid #e5e5e5;text-decoration: none;}
.current a,.pages a:hover{background: blue;color: #fff}
.not_current a{cursor:not-allowed;color: #ccc}
.not_current a:hover{background:#fff;color: #ccc}
</style>
</head>
<body>
<ul class="pages">
<li class="not_current"><a href="javascript:void(0)">首页</a></li>

<li class="not_current"><a href="javascript:void(0)"><</a></li>
<li class="current"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><span>...</span></li>
<li><a href="#">></a> </li>
<li><a href="#">尾页</a> </li>
</ul>
</body>
</html>


javascript:void(0)点击A防止跳转和跳动，让它保持原来的位置，这里不用用其他标签也行，反正这里是到头的时候不给点击。根据你们后台选择适合的标签。


效果



posted @ 2015-01-15 09:52  rose_sun  阅读(247)  评论(0)  编辑  收藏  举报