css分页样式代码 - 绿夏技术导航

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

演示代码:
共1678条评论12345...168下一页>>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
第二种：深蓝色效果，当然颜色大家可以自行修改。
效果如图:
查看图片

演示代码:
css 分页样式2 首页上页 1 2 3 4 5 下页尾页第3页共8页
[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://www.gimoo.net/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://www.gimoo.net/boke/blog/Pic/next.gif" border=0 alt='下一页' ></a> 
<a href=?id=74&page=4><img src="http://www.gimoo.net/boke/blog/Pic/Last.gif" alt='最后一页' border=0 ></a> 
</div>

#免责声明#

本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容，请支持正版，购买注册，得到更好的正版服务。我们非常重视版权问题，如有侵权请邮件[lxwl@lxwl520.cn]与我们联系进行删除处理。敬请谅解！