当前位置:  编程技术>WEB前端

css分页样式代码

    来源: 互联网  发布时间:2014-10-04

    本文导语:  第一个是从360而来的效果如图所示:普通的a标记的分页,兼容性好。绿色样式演示代码: .pages{ width:100.5%; text-align:right; padding:10px 0; clear:both;} .pages span,.pages a,.pages b{ font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0 2px;} .pages ...

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

演示代码:
.pages{ width:100.5%; text-align:right; padding:10px 0; clear:both;} .pages span,.pages a,.pages b{ font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0 2px;} .pages span font{ color:#f00; font-size:12px;} .pages a,.pages b{ border:1px solid #5FA623; background:#fff; padding:2px 6px; text-decoration:none} .pages span { padding-right:10px } .pages b,.pages a:hover{ background:#7AB63F; color:#fff;}
共1678条评论12345...168下一页>>

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

演示代码:
css 分页样式2 * { 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;}

[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代码:

代码如下:

记录条 共4页 每页20条
第一页

1
2
3
4
下一页
最后一页



    
 
 

您可能感兴趣的文章:

  • PHP去除html标签,php标记及css样式代码参考
  • jQuery CSS()方法改变现有的CSS样式
  • Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行
  • jquery css方法改变css样式用法介绍
  • HTML如何使用各种CSS 样式
  • 解决ie动态修改link样式,import css不刷新的问题
  • jsp页面中插入css样式的三种方法总结
  • 批量修改标签css样式以input标签为例
  • 移动 Web 的 CSS 样式工具库 Rider
  • CSS注释、命名、继承性、样式排序等CSS技巧的小结
  • 字符不会撑大表格的常见css样式
  • asp.net不影响CSS样式的弹出对话框
  • jquery实现不同大小浏览器使用不同的css样式表的方法
  • CSS样式表规划与管理的经验总结
  • 引入CSS样式的五种方式
  • JQuery中操作Css样式的方法
  • 网页编辑中CSS样式表技巧总结
  • 详谈 CSS样式表使用:链接/嵌入
  • jQuery操作元素css样式的三种方法
  • jQuery操作元素css样式三种方法示例
  • jquery操作css样式表文件的方法详解
  • CSS代码格式化 CSS Beautify
  • CSS代码检查工具 CSS Lint
  • 无用css代码检查工具 Helium-css
  • php 压缩多个CSS文件的实现代码
  • 快速编写HTML/CSS代码 Emmet
  • JS/CSS代码片段测试 JS Bin
  • 用css来控制图片大小显示的实现方法与代码
  • css li 超出隐藏代码
  • CSS实现简单的图片防盗链代码
  • css中的行间距的代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • 2 iis7站长之家
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • CSS 开发框架 Compass CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • BS项目中的CSS架构_仅加载自己需要的CSS


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3