分頁css樣式

頁面

1. <div class="pagination">  
2. <ul>  
3. <li class="disablepage">上一頁</li>  
4. <li class="currentpage">1</li>  
5. <li><a href="#">2</a></li>  
6. <li><a href="#">3</a></li>  
7. <li><a href="#">4</a></li>  
8. <li><a href="#">5</a></li>  
9. <li><a href="#">6</a></li>  
10. <li><a href="#">7</a></li>  
11. <li><a href="#">8</a></li>  
12. <li><a href="#">9</a>...</li>  
13. <li><a href="#">15</a></li>  
14. <li><a href="#">16</a></li>  
15. <li class="nextpage"><a href="#">下一頁</a></li>  
16. </ul>  
17. </div>  

CSS

1. .pagination{   
2. padding: 2px;   
3. }   
4.   
5. .pagination ul{   
6. margin: 0;   
7. padding: 0;   
8. text-align: left; /*Set to "right" to right align pagination interface*/   
9. font-size: 12px;   
10. }   
11.   
12. .pagination li{   
13. list-style-type: none;   
14. display: inline;   
15. padding-bottom: 1px;   
16. }   
17.   
18. .pagination a, .pagination a:visited{   
19. padding: 0 5px;   
20. border: 1px solid #9aafe5;   
21. text-decoration: none;    
22. color: #2e6ab1;   
23. }   
24.   
25. .pagination a:hover, .pagination a:active{   
26. border: 1px solid #2b66a5;   
27. color: #000;   
28. background-color: lightyellow;   
29. }   
30.   
31. .pagination li.currentpage{   
32. font-weight: bold;   
33. padding: 0 5px;   
34. border: 1px solid navy;   
35. background-color: #2e6ab1;   
36. color: #FFF;   
37. }   
38.   
39. .pagination li.disablepage{   
40. padding: 0 5px;   
41. border: 1px solid #929292;   
42. color: #929292;   
43. }   
44.   
45. .pagination li.nextpage{   
46. font-weight: bold;   
47. }   
48.   
49. * html .pagination li.currentpage, * html .pagination li.disablepage{ /*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/   
50. margin-right: 5px;   
51. padding-right: 0;   
52. }