the first one is from the 360 effect as shown in the figure: normal A-mark pagination, good compatibility. Green Style
Demo Code:
<style> pages{width:100.5% text-align:right; padding:10px 0 clear:both span,.pages a,.pages b{ ze:12px; Font-family:arial, Helvetica, Sans-serif; margin:0 2px;} . pages span font{color: #f00; font-size:12px; pages a,.pages b{border:1px solid #5FA623 background: #fff; padding:2px 6px; Text-decoration:none}. Pages span {padding-right:10px}. Pages b,.pages a:hover{background: #7AB63F; color: #fff;} </s tyle> <div class= "pages" ><span> total <font>1678</font> article reviews </span><b>1</b> 2345...168 Next Page >></div>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
the second type: dark blue effect, of course, the color can be modified by ourselves.
Effect as shown:
Demo Code:
<! 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> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>css paging style 2</title> <style type=" Text/css "> * {margin:0; padding:0;} body { font-size:12px; Font-family:verdana;} A {color: #333; Text-decoration:none} ul {List-style:none} #pagelist {width:600px; margin:30px auto; padding:6px 0px; h eight:20px;} #pagelist ul li {float:left; border:1px solid #5d9cdf; height:20px line-height:20px margin:0px 2px;} #pagelist ul Li A, . pageinfo {display:block padding:0px 6px; background: #e6f2fe;}. PageInfo {color: #555;}. Current {background: #a9d2ff; Display:block; padding:0px 6px; Font-weight:bold;} </style> </pead> <body> <div id= "PageList" > <ul> <li> Home </li> <LI&G t; Top page </li> <LI>1</LI> <li>2</li> <li class= "current" >3</li> <li>4</li> <li>5</li> <li> next page </li> <li> last </li> <li class= "pageinfo" > 3rd page </li> <li class= page Info "> Total 8 page </li> </ul> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The third type of code:
CSS code:
Copy Code code as follows:
#page {margin:5px; padding-bottom:20px; padding-top:20px;}
#page a{border:1px Solid #003399;p adding:5px;margin:2px;background-color: #FFFFFF; color: #003300; height:18px;}
#page a:hover{font-size:14px color: #FFFFFF; Background-color: #003399;p adding:5px;margin:2px;height:20px;
Effect picture.
This is mouse when it is not pointed.
It was pointed up when,
Okay, now let's see how we can use this code.
HTML code:
Copy Code code as follows:
<div id=page> Record strip Total 4 page per page 20 records <a href=?id=74&page=1>
</a>
<a href=?id=74&page=1 class= ' SF ' >1</a>
<a href=?id=74&page=2 class= ' SF ' >2</a>
<a href=?id=74&page=3 class= ' SF ' >3</a>
<a href=?id=74&page=4 class= ' SF ' >4</a>
<a href=?id=74&page=2></a>
<a href=?id=74&page=4></a>
</div>
