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

CSS样式表
img 标签下多余空白的解决方法
CSS 优先级使用技巧
IE对CSS样式的数量和大小是有限制的
CSS 柱状图实现代码其实很简单
HTML5和CSS3让网页设计提升到下一个高度
CSS 透明度属性
CSS less优化
网页制作需要了解的IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks
CSS 清除浮动方法大全
url 关于自动换行问题
css font-size属性说明
利用CSS3的定位页面元素
不使用class和id进行网页布局的方法
CSS 语义化标记抛弃DIV标记
css 字体设置(不同浏览器设置效果)
CSS教程 CSS定位属性
CSS 网页布局应该避免滥用div元素
CSS 设定文本尺寸的属性
14款免费的RSS、CSS和HTML验证工具
CSS haslayout学习

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 161 ::
收藏到网摘: 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>