數字按鈕分頁CSS樣式程式碼

admin發表於2017-02-23
CSS
現在網頁的分頁效果開始流行數字分頁，可能比較人性化和直觀，當然需要後臺或者js配合，這裡都不是我們們要介紹了，我們們這裡只需要負責數字分頁的美觀度就可以了，下面是一段這樣程式碼，比較美觀，和大家分享一下。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0;
  padding:0;
}
body {
  font-size:12px;
  font-family:Verdana;
}
a {
  color:#333;
  text-decoration:none;
}
ul{list-style:none;}
#pagelist {
  width:600px;
  margin:30px auto;
  padding:6px 0px;
  height:20px;
}
#pagelist ul li {
  float:left;
  border:1px solid #5d9cdf;
  height:20px;
  line-height:20px;
  margin:0px 2px;
}
#pagelist ul li a, .pageinfo {
  display:block;
  padding:0px 6px;
  background:#e6f2fe;
}
.pageinfo{color:#555;}
.current {
  background:#a9d2ff;
  display:block;
  padding:0px 6px;
  font-weight:bold;
}
</style>
</head>
<body>
<div id="pagelist">
  <ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">上一頁</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="current">3</li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">下一頁</a></li>
    <li><a href="#">尾頁</a></li>
    <li class="pageinfo">第3頁</li>
    <li class="pageinfo">共8頁</li>
  </ul>
</div>
</body>
</html>

相關文章