两款精美的CSS分页样式

学习笔记 马富天 2016-04-29 14:50:18 83 1

【摘要】介绍两款精美的CSS分页样式,自适应(响应式布局),有需要的可以参考,仅需修改颜色或大小即可。

第一款,不连续在一起的分页

  1. <!DOCTYPE>
  2. <html>
  3. 	<head>
  4. 		<title>一个精美的CSS分页样式(1)</title>
  5. 		<meta charset = "utf-8" />
  6. 		<style type="text/css">
  7. 			.page{border:1px solid #999;margin:0;padding:0px 0px 10px 0px;list-style:none;font-size:12px;margin:100px auto;height:auto;width:auto;}
  8. 			.page li{float:left;display:block;}
  9. 			.page .clear{clear:both;}
  10. 			.page li a{display:inline-block;float:left;border:1px solid #CCC;text-decoration:none;line-height:24px;padding:0 5px;margin:10px 6px 0px 0px;color:#337AB7;min-width:14px;text-align:center;}
  11. 			.page li a:hover{background-color:#EEEEEE;}			
  12. 			.page li .active{background-color:#337AB7;color:#FFFFFF;border-color:#337AB7;cursor:default;}
  13. 			.page li .active:hover{background-color:#337AB7;}
  14. 			.page li .disabled{background-color:#EEEEEE;color:#999;cursor:default;}
  15. 			.page li .disabled:hover{background-color:#EEEEEE;}
  16. 			.page li .last{margin-right:0;}
  17. 		</style>
  18. 	</head>
  19. 	<body>
  20. 		<ul class="page"> 
  21. 			<li><a href="">首页</a></li>
  22. 			<li><a href="">1</a></li>
  23. 			<li><a href="">2</a></li>
  24. 			<li><a href="">3</a></li>
  25. 			<li><a href="">4</a></li>
  26. 			<li><a href="">5</a></li>
  27. 			<li><a href="">6</a></li>
  28. 			<li><a href="">7</a></li>
  29. 			<li><a href="javascript:void(0)" class="active">8</a></li>
  30. 			<li><a href="">9</a></li>
  31. 			<li><a href="">10</a></li>
  32. 			<li><a href="javascript:void(0)">尾页</a></li>
  33. 			<li><a href="javascript:void(0)" class="disabled">第1页</a></li>
  34. 			<li><a href="javascript:void(0)" class="disabled">每页1条</a></li>
  35. 			<li><a href="javascript:void(0)" class="disabled">共1页</a></li>
  36. 			<li><a href="javascript:void(0)" class="last disabled">共1条</a></li>
  37. 			<div class="clear"></div>
  38. 		</ul>
  39. 	</body>
  40. </html>

效果图如下:

请输入图片名称

第二款,连续在一起的,并且最左端和最右端是圆角,代码如下:

  1. <!DOCTYPE>
  2. <html>
  3. 	<head>
  4. 		<title>一个精美的CSS分页样式(2)</title>
  5. 		<meta charset = "utf-8" />
  6. 		<style type="text/css">
  7. 			.page{margin:0;padding:0px 0px 10px 0px;list-style:none;font-size:12px;margin:100px auto;height:auto;width:auto;}
  8. 			.page li{float:left;display:block;}
  9. 			.page .clear{clear:both;}
  10. 			.page li a{display:inline-block;float:left;border:1px solid #CCC;border-right:none;text-decoration:none;line-height:24px;padding:0 5px;margin:10px 0px 0px 0px;color:#337AB7;min-width:14px;text-align:center;}
  11. 			.page li a:hover{background-color:#EEEEEE;}			
  12. 			.page li .active{background-color:#337AB7;color:#FFFFFF;border-color:#337AB7;cursor:default;}
  13. 			.page li .active:hover{background-color:#337AB7;}
  14. 			.page li .disabled{background-color:#EEEEEE;color:#999;cursor:default;}
  15. 			.page li .disabled:hover{background-color:#EEEEEE;}
  16. 			.page li .last{margin-right:0;border:1px solid #CCC;border-top-right-radius:3px;border-bottom-right-radius: 3px;}
  17. 			.page li .last{border-top-left-radius:3px;border-bottom-right-radius: 3px;}
  18. 		</style>
  19. 	</head>
  20. 	<body>
  21. 		<ul class="page"> 
  22. 			<li><a href="" class="first">首页</a></li>
  23. 			<li><a href="">1</a></li>
  24. 			<li><a href="">2</a></li>
  25. 			<li><a href="">3</a></li>
  26. 			<li><a href="">4</a></li>
  27. 			<li><a href="">5</a></li>
  28. 			<li><a href="">6</a></li>
  29. 			<li><a href="">7</a></li>
  30. 			<li><a href="javascript:void(0)" class="active">8</a></li>
  31. 			<li><a href="">9</a></li>
  32. 			<li><a href="">10</a></li>
  33. 			<li><a href="javascript:void(0)">尾页</a></li>
  34. 			<li><a href="javascript:void(0)" class="disabled">第1页</a></li>
  35. 			<li><a href="javascript:void(0)" class="disabled">每页1条</a></li>
  36. 			<li><a href="javascript:void(0)" class="disabled">共1页</a></li>
  37. 			<li><a href="javascript:void(0)" class="last disabled">共1条</a></li>
  38. 			<div class="clear"></div>
  39. 		</ul>
  40. 	</body>
  41. </html>

效果图如下:

请输入图片名称

版权归 马富天PHP博客 所有

本文标题:《两款精美的CSS分页样式》

本文链接地址:http://www.mafutian.net/79.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 开发网站需要注意的几个重要的点 》 下一篇《 一个精美的CSS二级导航栏样式 》

所有评论

  1. 首页
  2. 上一页
  3. 1
  4. 下一页
  5. 尾页
  6. 第1页
  7. 每页12条
  8. 共1页
  9. 共1条
评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码

TOP10

  • 浏览最多
  • 评论最多