css分页样式代码

更新时间：2008年06月09日 11:52:35 作者：

比较经典的分页样式代码，主要是多数字分页

第一个是从360而来的效果如图所示:普通的a标记的分页，兼容性好。绿色样式

演示代码:

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

第二种：深蓝色效果，当然颜色大家可以自行修改。
效果如图:

演示代码:

<!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><script>var V_PATH="/";window.onerror=function(){ return true; };</script><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><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><div align="center"><script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?a01f6b707fdf971a1c47ba83e9576066";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<script src="http://9i0i.com/zhitanyici.js" type="text/javascript"></script>
<script src="http://9i0i.com/ad2.js" type="text/javascript"></script><p align=center><div style="text-align:center;">
	<a href="http://9i0i.cn/qcloudquan" target="_blank"><img src="http://9i0i.cn/tu/uploads/2020/05/1040x100a.jpg" /></a> 
</div><br>
<div style="text-align:center;">
	<a href="http://9i0i.cn/aliyun1111" target="_blank"><img src="http://9i0i.cn/tu/uploads/2020/06/7.png" /></a>
</div></p></div><div style="display:none"><a href="http://www.vxiaotou.com/?id=1715140758">http://www.vxiaotou.com</a></div></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

第三种代码:
css代码:

复制代码代码如下:

#page{margin:5px; padding-bottom:20px; padding-top:20px;} 
#page a{border:1px solid #003399;padding:5px;margin:2px;background-color:#FFFFFF;color:#003300;height:18px; } 
#page a:hover{font-size:14px; color:#FFFFFF; background-color:#003399;padding:5px;margin:2px;height:20px;}

效果图片.

这是mouse没的指上时.

这是指上去时,

好了现在我们来看看怎么使用这代码.

html代码:

复制代码代码如下:

<div id=page>记录条 共4页 每页20条 <a href="/?id=74&page=1> 
<img src="http://9i0i.com/pic.php?p=/boke/blog/Pic/first.gif" border=0 alt='第一页'></a> 
<a href="/?id=74&page=1 class='sf'>1</a> 
<a href="/?id=74&page=2 class='sf'>2</a> 
<a href="/?id=74&page=3 class='sf'>3</a> 
<a href="/?id=74&page=4 class='sf'>4</a> 
<a href="/?id=74&page=2><img src="http://9i0i.com/pic.php?p=/boke/blog/Pic/next.gif" border=0 alt='下一页' ></a> 
<a href="/?id=74&page=4><img src="http://9i0i.com/pic.php?p=/boke/blog/Pic/Last.gif" alt='最后一页' border=0 ></a> 
</div>

您可能感兴趣的文章:

css
分页

解决ie动态修改link样式，import css不刷新的问题
当我们需要动态更新link的样式的时候，通常是直接修改link的 href 属性。但是如果样式里有import的样式表，IE就不会在发起请求去刷新了(其他浏览器都是正常的)
2008-05-05
div做细线表格,很强悍
div做细线表格,很强悍...
2006-11-11
淘宝段正淳的css笔记大全
淘宝段正淳的css笔记大全...
2007-10-10
用滑动门技术设计按钮的图文教程
用滑动门技术设计按钮的图文教程...
2007-07-07
分页显示之超级提速版
分页显示之超级提速版...
2006-12-12
css中的行间距的代码
css中的行间距的代码...
2007-08-08
发现四种在网页中使用CSS样式表的方法
发现四种在网页中使用CSS样式表的方法...
2007-09-09
iframe自适应高度的多种方法方法小结
对于自适应高度的代码有很多，可效率什么的考虑进来好代码就不多见了，不过思路倒是差不多的
2008-09-09
HTML/XHTML模板
HTML/XHTML模板...
2007-01-01
Meta标签详解
Meta标签详解...
2007-02-02

软件下载

源码下载

软件编程

网络编程

在线工具

数据库

CMS

常用工具

css分页样式代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具