有序列表ol漂亮css分页样式代码(纯css)

有序列表ol漂亮分页样式

a { color:#000;}
.pagination{
overflow:hidden;
margin:0;
padding:10px 10px 6px 10px;
border-top:1px solid #f60;
_zoom:1;
}
.pagination *{
display:inline;
float:left;
margin:0;
padding:0;
font-size:12px;
}
.pagination i{
float:none;
padding-right:1px;
}
.currentPage b{
float:none;
color:#f00;
}
.pagination li{
list-style:none;
margin:0 5px;
}
.pagination li li{
position:relative;
margin:-2px 0 0;
font-family: Arial, Helvetica, sans-serif
}
.firstPage a,.previousPage a,.nextPage a,.lastPage a{
overflow:hidden;
height:0;
text-indent:-9999em;
border-top:8px solid #fff;
border-bottom:8px solid #fff;
}
.pagination li li a{
margin:0 1px;
padding:0 4px;
border:3px double #fff;
+border-color:#eee;
background:#eee;
color:#06f;
text-decoration:none;
}
.pagination li li a:hover{
background:#f60;
border-color:#fff;
+border-color:#f60;
color:#fff;
}
li.firstPage{
margin-left:40px;
border-left:3px solid #06f;
}
.firstPage a,.previousPage a{
border-right:12px solid #06f;
}
.firstPage a:hover,.previousPage a:hover{
border-right-color: #f60;
}
.nextPage a,.lastPage a{
border-left:12px solid #06f;
}
.nextPage a:hover,.lastPage a:hover{
border-left-color:#f60;
}
li.lastPage{
border-right:3px solid #06f;
}
li li.currentState a{
position:relative;
margin:-1px 3px;
padding:1px 4px;
border:3px double #fff;
+border-color:#f60;
background:#f60;
color:#fff;
}
li.currentState,.currentState a,.currentState a:hover{
border-color:#fff #ccc;
cursor:default;
}

有序列表ol分页源码/样式

  • 总记录数：3
  • 总页数：3
  • 当前页：3
  • 首页
  • 前一页
    1. 1
    2. 2
    3. 3
    4. 4
    5. 5
    6. 6
    7. 7
    8. 8
    9. 9
  • 后一页
  • 尾页

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

赞 (0)

相关推荐

  • 有序列表ol漂亮css分页样式代码(纯css)

    有序列表ol漂亮分页样式 a { color:#000;} .pagination{ overflow:hidden; margin:0; padding:10px 10px 6px 10px; border-top:1px solid #f60; _zoom:1; } .pagination *{ display:inline; float:left; margin:0; padding:0; font-size:12px; } .pagination i{ float:none; paddi

  • css分页样式代码

    css分页样式代码

    第一个是从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

  • Laravel框架自定义分页样式操作示例

    Laravel框架自定义分页样式操作示例

    本文实例讲述了Laravel框架自定义分页样式操作.分享给大家供大家参考,具体如下: 操作步骤如下: (1)  对应public/css/paging.css 文件建立分页样式. (2)  控制器查出分页数据使用 paginate函数进行分页处理.(禁止使用group by处理查询). (3) 对应视图引入分页样式. 例如: paging.css 样式文件代码(复制即可用,实际操作过)如下 #pull_right{ text-align:center; } .pull-right { /*flo

  • thinkPHP5框架分页样式类完整示例

    本文实例讲述了thinkPHP5分页样式类.分享给大家供大家参考,具体如下: 在配置文件中改路径 把这段代码放入extend文件下 可以在这个文件下创建个page文件 在分页的控制器方法中 ->paginate(12,false,[ 'type'=> 'page\Page','var_page'=>'page']); <?php namespace page; // +---------------------------------------------------------

  • TP5框架实现自定义分页样式的方法示例

    本文实例讲述了TP5框架实现自定义分页样式的方法.分享给大家供大家参考,具体如下: 1. 在extend\目录下创建page目录,在page目录下创建Page.php文件,将以下代码放入文件中. <?php namespace page; use think\Paginator; class Page extends Paginator { //首页 protected function home() { if ($this->currentPage() > 1) { return &q

  • 纯CSS实现标签导航制作

    在网上搜索了一下都没怎么看到纯用CSS制作标签导航方面的教程或者说明,大部分都是要涉及到JS的编写的.这对于很多CSS学习中的人来说实在有些不够体贴,既然没人做那我来先来试试!我在这里做的CSS标签导航是纯CSS无JS无背景图片的绿色导航.此文章适合初学者,高手可以路过,呵呵! nav02 *{ margin:0; padding:0; } .mainNav{ margin:0 20px; height:47px; border-bottom:2px solid #000; } ul{ marg

  • css ol有序列表

    今天看了振之关于有序列表的一篇文章,觉得挺不错的.写个例子: 类型值  生成样式  序列举例  A  大写字母  A.B.C.D.E  a  小写字母  a.b.c.c.e  I  大写罗马数字  I.II.III.IV.V  i  小写罗马数字  i.ii.iii.iv.v  1  阿拉伯数字  1.2.3.4.5 有序列表_www.jb51.net 第一名 第二名 第三名 第四名 第五名 第六名 第七名 第八名 第九名 第十名 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • jquery+json实现数据列表分页示例代码

    该实例中,新闻数据列表未使用表格显示.下面将所有源码附上,其中用到jquery插件. 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <c:

  • 精美漂亮的php分页类代码

    这是一款简单,方便,功能齐全的分页类,可以根据自己的需要更改CSS样式文件以实现分页颜色的控制,利用php分页类,可以省去自己很多时间,只需要在分页的地方嵌入即可,下面看下使用方法: 1,在head里包含pager.css 复制代码 代码如下: <link href="pager.css" type="text/css" rel="stylesheet" /> 2,在分页处进行类的实例化: 复制代码 代码如下: <?php   

  • CSS标签切换代码实例教程 比较漂亮

    CSS标签切换代码实例教程 比较漂亮

    我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容.与此同时我们发现一些问题,内容的简单排列总使页面很长.滚屏很多才能将显示的内容布局完毕.YAHOO与网易率先应用了标签切换的布局方式,打破了常规布局的局限性,在相同尺寸的区域内,可以放置更多的内容.我们只需要点击不同的选项卡或链接就能展开内容,这并不需要打开新的网页,只是在同一页内完成. 一.标签切换总体的实现思路: 实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用DIV CSS进行布局,首先来整理一下思路,

随机推荐