css pagination style code_Experience exchange

The first one is the effect from 360 as shown in the picture: ordinary a mark paging, good compatibility. Green style

演示代码:

<style> .pages{ width:100.5%; text-align:right; padding:10px 0; clear:both;} .pages span,.pages a,.pages b{ font-size: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;} </style> <div class="pages"> <span>共<font>1678</font>条评论</span><b>1</b><a href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a>...<a href="">168</a><a href="">下一页>></a> </div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]

The second type: dark blue effect, of course the color is everyone's You can modify it yourself.
The effect is as shown in the picture:

演示代码:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>css pagination 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; height: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> <div id="pagelist"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Previous page</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li class="current">3</li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">Next page</a></li> <li><a href="#">Last page</a></li> <li class="pageinfo">Page 3</li> <li class="pageinfo">8 pages in total</li> </ul> </div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh to execute]

The third code:
css Code:

Copy code The code is as follows:

#page{margin:5px; padding- bottom:20px; padding-top:20px;}
#page a{border:1px solid #003399;padding:5px;margin:2px;background-color:#FFFFFF;color:#003300;height:18px; }
#page a:hover{font-size:14px; color:#FFFFFF; background-color:#003399;padding:5px;margin:2px;height:20px;}

Effect pictures.

This is when the mouse points up.

This refers to when going up,

Okay, now let