<! 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> sequence table ol beautiful pagination style </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{; 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> <p> sequence Table ol paging source/style </p> <ul class= "pagination" title= "paging List" > <li class= "Totalann Al "> Total record number:<i>3</i></li> <li class= "Totalpage" > Total pages:<i>3</i></li> <li class= "currentpage" > Current page: <b>3</b ></li> <li class= "FirstPage currentstate" > Home </li> <li class= "previouspage currentstate" > ago One 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> &L t;li>8</li> <li>9</li> </ol> </li> <li class= "NextPage" > Next </li> <l I class= "LastPage" > Last </i> </ul> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
