html图片分页效果代码,css实现的漂亮的分页效果代码(橘黄色与蓝色)

www.jb51.net - DIV CSS实例：橙蓝CSS翻页效果

* { margin:0; padding:0; text-decoration:none;}

#pagebar { float:left; display:inline; width:570px; height:32px; margin:50px; font-size:13px; }

#pagebar a,#pagebar .page_now { display:block; float:left; margin-right:4px; padding:2px 5px; border:1px solid #f30; color:#fff; font-weight:800; background:url(https://www.jb51.net/do/uploads/userup/1006/061S14Y600.png) repeat-x 0 0 ;}

#pagebar a { display:inline;}

#pagebar a:hover { border:1px solid #03c; background-position:0 -30px;}

#pagebar .page_now { border:1px solid #333; background-image:none; background:#666;}

<<

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

>>

提示：您可以先修改部分代码再运行