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

CSS样式表
css important终级讲解
HTML 页面输出应该遵循的几点原则分析小结
Google 谷歌内页logo的呈现方式(图片下面有文字)
10个DIV+CSS需要注意的问题
最常用和实用的CSS技巧
CSS 首行缩进两个文字
黑客选择CSS挂马 CSS挂马攻防实录
制作高效可维护组件化的CSS代码
验证并修复css错误内容的相关连接
html+css实现数据图表的展示效果
减少代码和语义化标签实现方法
3个css框架分享网站
简单但很实用的5个css属性
DIV+CSS的叫法是不准确的
CSS 使用table布局网页是不明智
xHTML+CSS与SEO的关系
CSS 控制页面样式的4种方式和优先级问题
CSS教程 CSS选择器
CSS 选择器命名规范化
CSS 理解盒子模型

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


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