<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <title> ordered list ol pretty paging style </title> </pead> <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 {position: relative; margin:-2px 0 0; font-family: Arial, Helvetica, sans-serif }. firstPage ,. previousPage ,. nextPage ,. lastPage a {overflow: hidden; height: 0; text-indent:-9999em; border-top: 8px solid # fff; border-bottom: 8px solid # fff ;}. pagination li a {margin: 0 1px; padding: 0 4px; border: 3px double # fff; + border-color: # eee; background: # eee; color: # 06f; text-decoration: none ;}. pagination li a: hover {background: # f60; border-color: # fff; + border-color: # f60; color: # fff;} li. firstPage {margin-left: 40px; border-left: 3px solid # 06f ;}. firstPage ,. previousPage a {border-right: 12px solid # 06f ;}. firstPage a: hover ,. previousPage a: hover {border-right-color: # f60 ;}. nextPage ,. 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. currentState a {position: relative; margin:-1px 3px; padding: 1px 4px; border: 3px double # fff; + border-color: # f60; background: # f60; color: # fff;} li. currentState ,. currentState ,. currentState a: hover {border-color: # fff # ccc; cursor: default ;} </style> ordered list ol paging source code/style <ul class = "pagination" title = "Paging list"> <li class = "totalAnnal"> total number of records: <I> 3 </I> </li> <li class = "totalPage"> total number of pages: <I> 3 </I> </li> <li class = "currentPage"> current page: <B> 3 </B> </li> <li class = "firstPage currentState"> homepage </li> <li class = "previousPage currentState"> previous page </li> <li> <ol> <li> 1 </li> <li> 2 </li> <li class = "currentState" title = "Current page"> 3 </ li> <li> 4 </li> <li> 5 </li> <li> 6 </li> <li> 7 </li> <li> 8 </ li> <li> 9 </li> </ol> </li> <li class = "nextPage"> next page </li> <li class = "lastPage"> last page </I> </ul> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]