今天小编跟大家讲解下有关css实现的漂亮的分页效果代码(橘黄色与蓝色) ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css实现的漂亮的分页效果代码(橘黄色与蓝色) 的相关资料，希望小伙伴们看了有所帮助。
在做pj皮肤的时候到网上搜了个分页效果 因为颜色不搭就没用 但是个人认为挺漂亮。代码也够简洁。下面是用的背景图片：html代码： 复制代码代码如下: <div id="pagebar"> <a href=""><<</a> <span class="page_now">1</span> <a href="">2</a> <a href="">3</a> <a href="">4</a> <a href="">5</a> <a href="">6</a> <a href="">7</a> <a href="">8</a> <a href="">9</a> <a href="">10</a> <a href="">11</a> <a href="">12</a> <a href="">13</a> <a href="">14</a> <a href="">15</a> <a href="">>></a> </div> 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(pagebar_bg.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; } 预览效果： <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/> <title> - DIV CSS实例：橙蓝CSS翻页效果</title> <style type="text/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:///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;} </style> </head> <body> <div id="pagebar"> <a href="https:///"><<</a> <span class="page_now">1</span> <a href="https:///">2</a> <a href="https:///">3</a> <a href="https:///">4</a> <a href="https:///">5</a> <a href="https:///">6</a> <a href="https:///">7</a> <a href="https:///">8</a> <a href="https:///">9</a> <a href="https:///">10</a> <a href="https:///">11</a> <a href="https:///">12</a> <a href="https:///">13</a> <a href="https:///">14</a> <a href="https:///">15</a> <a href="https:///">>></a> </div> </body> </html> 提示：您可以先修改部分代码再运行来源：爱蒂网
