第一个是从360而来的效果如图所示:普通的a标记的分页,兼容性好。绿色样式演示代码:
<style>
.pages{ width:100.5%; text-align:right; padding:10px 0; clear:both;}
.pages span,.pages a,.pages b{ font-size:12px; font-family:Arial, Helvetica,
sans-serif; margin:0 2px;}
.pages span font{ color:#f00; font-size:12px;}
.pages a,.pages b{ border:1px solid #5FA623; background:#fff; padding:2px
6px; text-decoration:none}
.pages span { padding-right:10px }
.pages b,.pages a:hover{ background:#7AB63F; color:#fff;}
</style>
<div class="pages"><span>共<font>1678</font>条评论</span><b>1</b><a
href="">2</a><a href="">3</a><a href="">4</a><a href="">5</a>...<a
href="">168</a><a href="">下一页>></a></div>
提示:您可以先修改部分代码再运行第二种:深蓝色效果,当然颜色大家可以自行修改。效果如图:演示代码:
<!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>css 分页样式2</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><a href="#">首页</a></li>
<li><a href="#">上页</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="current">3</li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">下页</a></li>
<li><a href="#">尾页</a></li>
<li class="pageinfo">第3页</li>
<li class="pageinfo">共8页</li>
</ul>
</div>
</body>
</html>
提示:您可以先修改部分代码再运行
推荐阅读
12种CSS BUG解决方法与技巧
一、 针对浏览器的选择器 这些选择器在你需要针对某款浏览器进行css设计时将非常有用. IE6及其更低版本,本文由52CSS.com整理,转载请注明出处! * html {} IE7及其更低版本 *:first-child+>>>详细阅读
本文标题:css 分页样式代码(基于a或li)绿色与蓝色
地址:http://www.17bianji.com/kaifa2/CSS/16534.html
1/2 1