蓝色CSS分页样式-取自DedeCms

2024-09-05 12:16:58

字体：大中小

来源：转载

供稿：网友

从DEDECMS里整理出来的CSS分页按钮样式，不具备分页功能，只是一个CSS分页的样式，经典的蓝色风格，CSS代码也是超简单的，各位前端开发者若有需要分页样式的，您可借鉴一下。整体我觉得还是挺简洁的，从美感还是实用的角度，都是搬完不错的。

<!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=utf-8" /><title>Dedecms分页样式 www.vevb.com</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></head><body><div id="pagelist">  <ul>    <li>首页</li>    <li>上一页</li>    <li>1</li>    <li>2</li>    <li class="current">3</li>    <li>4</li>    <li>5</li>    <li>下一页</li>    <li>尾页</li>    <li class="pageinfo">第3页</li>    <li class="pageinfo">共8页</li>  </ul></div></body></html>

上一篇：CSS3仿LOGO图片阴影特效

下一篇：CSS文字溢出添加省略号的代码