CSS实现分页效果制作实例,教程和代码如下: 这个教程要说明的是如何为搜索结果或更长记录列表设计分页。因为经常有人问我这个问题,所以我决定发一个帖子来说明如何用少量的 HTML 和 CSS 代码设计出完美的分页样式。
HTML代码很简单,而且你只需更改<ul>的ID就可以重复应用这个结构于所有分页样式中(在这个案例中我增加了“pagination-flickr”,如下面加粗的代码) <ul id="pagination-flickr"> <li class="previous-off">?Previous</li> </ul><li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=2">Next ?</a></li>
ul{border:0; margin:0; padding:0;} #pagination-flickr li{ border:0; margin:0; padding:0; }font-size:11px; list-style:none; #pagination-flickr a{ border:solid 1px #DDDDDD; }margin-right:2px; #pagination-flickr .previous-off, #pagination-flickr .next-off { color:#666666; }display:block; float:left; font-weight:bold; padding:3px 4px; #pagination-flickr .next a, #pagination-flickr .previous a { font-weight:bold; } border:solid 1px #FFFFFF; #pagination-flickr .active{ color:#ff0084; }font-weight:bold; display:block; float:left; padding:4px 6px; #pagination-flickr a:link, #pagination-flickr a:visited { color:#0063e3; }display:block; float:left; padding:3px 6px; text-decoration:none; #pagination-flickr a:hover{ border:solid 1px #666666; }Digg式的分页:HTML 代码
<ul id="pagination-digg"> <li class="previous-off">?Previous</li> </ul><li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=2">Next ?</a></li>
ul{border:0; margin:0; padding:0;} #pagination-digg li{ border:0; margin:0; padding:0; }font-size:11px; list-style:none; margin-right:2px; #pagination-digg a{ border:solid 1px #9aafe5 }margin-right:2px; #pagination-digg .previous-off, #pagination-digg .next-off { border:solid 1px #DEDEDE }color:#888888 display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; #pagination-digg .next a, #pagination-digg .previous a { font-weight:bold; } #pagination-digg .active{ background:#2e6ab1; }color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; #pagination-digg a:link, #pagination-digg a:visited { color:#0e509e }display:block; float:left; padding:3px 6px; text-decoration:none; #pagination-digg a:hover{ border:solid 1px #0e509e }
<ul id="pagination-clean"> <li class="previous-off">?Previous</li> </ul><li class="active">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=6">6</a></li> <li><a href="?page=7">7</a></li> <li class="next"><a href="?page=2">Next ?</a></li>
ul{border:0; margin:0; padding:0;}
#pagination-clean li{ border:0; margin:0; padding:0; }font-size:11px; list-style:none; #pagination-clean li, #pagination-clean a{ border:solid 1px #DEDEDE }margin-right:2px; #pagination-clean .previous-off, #pagination-clean .next-off { color:#888888 }display:block; float:left; font-weight:bold; padding:3px 4px; #pagination-clean .next a, #pagination-clean .previous a { font-weight:bold; } border:solid 1px #FFFFFF; #pagination-clean .active{ color:#00000 }font-weight:bold; display:block; float:left; padding:4px 6px; #pagination-clean a:link, #pagination-clean a:visited { color:#0033CC }display:block; float:left; padding:3px 6px; text-decoration:none; #pagination-clean a:hover{ text-decoration:none; } |
|