快捷導(dǎo)航

有序列表ol漂亮css分頁樣式代碼(純css)

更新時(shí)間：2011年03月13日 12:25:28 作者：

純css實(shí)現(xiàn)的ol漂亮css分頁樣式代碼，制作分頁的朋友可以參考下。比較漂亮。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>有序列表ol漂亮分頁樣式</title> </head> <body> <style type="text/css"> a { color:#000;} .pagination{ overflow:hidden; margin:0; padding:10px 10px 6px 10px; border-top:1px solid #f60; _zoom:1; } .pagination *{ display:inline; float:left; margin:0; padding:0; font-size:12px; } .pagination i{ float:none; padding-right:1px; } .currentPage b{ float:none; color:#f00; } .pagination li{ list-style:none; margin:0 5px; } .pagination li li{ position:relative; margin:-2px 0 0; font-family: Arial, Helvetica, sans-serif } .firstPage a,.previousPage a,.nextPage a,.lastPage a{ overflow:hidden; height:0; text-indent:-9999em; border-top:8px solid #fff; border-bottom:8px solid #fff; } .pagination li li a{ margin:0 1px; padding:0 4px; border:3px double #fff; +border-color:#eee; background:#eee; color:#06f; text-decoration:none; } .pagination li li a:hover{ background:#f60; border-color:#fff; +border-color:#f60; color:#fff; } li.firstPage{ margin-left:40px; border-left:3px solid #06f; } .firstPage a,.previousPage a{ border-right:12px solid #06f; } .firstPage a:hover,.previousPage a:hover{ border-right-color: #f60; } .nextPage a,.lastPage a{ border-left:12px solid #06f; } .nextPage a:hover,.lastPage a:hover{ border-left-color:#f60; } li.lastPage{ border-right:3px solid #06f; } li li.currentState a{ position:relative; margin:-1px 3px; padding:1px 4px; border:3px double #fff; +border-color:#f60; background:#f60; color:#fff; } li.currentState,.currentState a,.currentState a:hover{ border-color:#fff #ccc; cursor:default; } </style> <h3>有序列表ol分頁源碼/樣式</h3> <ul class="pagination" title="分頁列表"> <li id="wppm3vysvbp"    class="totalAnnal">總記錄數(shù)：<i>3</i></li> <li id="wppm3vysvbp"    class="totalPage">總頁數(shù)：<i>3</i></li> <li id="wppm3vysvbp"    class="currentPage">當(dāng)前頁：<b>3</b></li> <li id="wppm3vysvbp"    class="firstPage currentState"> <a href="javascript:;" title="首頁">首頁</a></li> <li id="wppm3vysvbp"    class="previousPage currentState"> <a href="javascript:;" title="前一頁">前一頁</a></li> <li> <ol> <li><a title="轉(zhuǎn)到第1頁" href="javascript:;">1</a></li> <li><a title="轉(zhuǎn)到第2頁" href="javascript:;">2</a></li> <li id="wppm3vysvbp"    class="currentState" title="當(dāng)前頁"> <a href="javascript:;">3</a></li> <li><a title="轉(zhuǎn)到第4頁" href="javascript:;">4</a></li> <li><a title="轉(zhuǎn)到第5頁" href="javascript:;">5</a></li> <li><a title="轉(zhuǎn)到第6頁" href="javascript:;">6</a></li> <li><a title="轉(zhuǎn)到第7頁" href="javascript:;">7</a></li> <li><a title="轉(zhuǎn)到第8頁" href="javascript:;">8</a></li> <li><a title="轉(zhuǎn)到第9頁" href="javascript:;">9</a></li> </ol> </li> <li id="wppm3vysvbp"    class="nextPage"> <a href="javascript:;" title="后一頁">后一頁</a></li> <li id="wppm3vysvbp"    class="lastPage"> <a href="javascript:;" title="尾頁">尾頁</a></i> </ul> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]