当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css分页样式代码

CSS样式表
字符不会撑大表格的常见css样式
表格高级使用技巧_把表格进行到底(必看)
网页中Span和Div的区别
在IE与FF中如何居中的css写法
javascript横排竖排标准选项卡效果代码
解决ie动态修改link样式,import css不刷新的问题
css不用图片美化按钮
网页打开新窗口target=_blank不符合标准
Javascript的匿名函数讲解
Firefox2中输入框丢失光标bug的解决方法
Firefox返回时Iframe的显示Bug的解决方法
使网页成黑白色调的滤镜
CSS学习笔记Padding 属性中参数的定义与使用
无限级CSS树形菜单 Ver2.0
css多行多列的新闻模式
Internet Explorer 8 beta 中文版与IE7共存的解决方法
CSS对Web页面载入效率的影响分析总结
巧妙地使用CSS选择器
去除链接元素的虚线框 兼容IE7、IE6、FF
DIV border边框显示不完全问题的解决方法

CSS样式表 中的 css分页样式代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 152 ::
收藏到网摘: n/a

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

#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没的指上时.

这是指上去时,

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

<div id=page>记录条 共4页 每页20条 <a href=?id=74&page=1>
<img src="/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="/boke/blog/Pic/next.gif" border=0 alt='下一页' ></a>
<a href=?id=74&page=4><img src="/boke/blog/Pic/Last.gif" alt='最后一页' border=0 ></a>
</div>