设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 639|回复: 0

[HTML/CSS] 一个漂亮的分页样式CSS

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2014-2-22 16:50:35 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
分享一个漂亮的分页样式CSS。代码如下:
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>分页样式</title>
  6. <style type="text/css">
  7. html,body{margin:0;padding:0;list-style:none;border:none;font-size:12px;}
  8. .page_list{float:left;position:relative;left:50%;clear:both;padding:25px 0;text-align:center;font-family:Tahoma;}.page_list .p_l{position:relative;float:left;left:-50%;}
  9. .page_list a,.disabled,.page_list .current,.page_list .pageinfo{color:#403F3D;padding:0 11px 0 0;height:32px;display:block;float:left;line-height:32px;line-height:34px\9;_line-height:32px;text-decoration:none;margin:0 2px;background:url(bga.png) no-repeat right -150px;}
  10. .page_list a:hover{color:#333;font-weight:normal;background-position:right -230px;text-decoration:none;}
  11. .page_list .current{font-weight:bold;background-position:right -190px;color:#666;}
  12. .page_list .pageinfo{color:#666;background-position:right -330px;margin-right:4px;}
  13. .page_list u{width:3px;display:block;height:32px;float:left;padding-right:9px;*padding-right:9px;_padding-right:5px;overflow:hidden;background:url(bga.png) no-repeat 0 -150px;}
  14. .page_list .current u{background-position:0 -190px;}
  15. .page_list a:hover u{background-position:0 -230px;}
  16. .page_list .pageinfo u{background-position:0 -330px;}
  17. .page_list .disabled{color:#999;}
  18. .page_list .one,.page_list .last{display:none;}
  19. </style>
  20. </head>
  21. <body>
  22. <div class="page_list">
  23. <div class="p_l">
  24. <div id="page_ipng">
  25. <span class="disabled"><u></u>首页</span>
  26. <span class="disabled"><u></u>上页</span>
  27. <span class="current"><u></u>1</span>
  28. <a title="第2页" href="#"><u></u>2</a>
  29. <a title="第3页" href="#"><u></u>3</a>
  30. <a title="第4页" href="#"><u></u>4</a>
  31. <a title="第5页" href="#"><u></u>5</a>
  32. <a title="第6页" href="#"><u></u>6</a>
  33. <a title="第7页" href="#"><u></u>7</a>
  34. <a title="第8页" href="#"><u></u>8</a>
  35. <a title="第9页" href="#"><u></u>9</a>
  36. <a title=下页 href="#"><u></u>下页</a>
  37. <a title=末页 href="#"><u></u>末页</a>
  38. </div>
  39. </div>
  40. </div>
  41. </body>
  42. </html>
复制代码

下面是素材图片,我直接拿下来的,没有优化请自行修改优化:

需要的素材图片

需要的素材图片

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-4 14:11

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表