分页导航的实现方法

这个导航是阅读了精通css这本书后做的demo,感觉以前写的真的是弱爆了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        ol.nav {
            padding: 0;
            margin: 0;
            list-style: none;
            overflow: hidden;
        }
        ol.nav li{
            float: left;
        }
        ol.nav li + li{
            margin-left: 0.8em;
        }
        /* 通过padding值撑开a链接的点击范围 */
        ol.nav a {
            display: block;
            padding: 0.5em 0.8em;
            text-decoration: none;
            color: gray;
            background: #f3f3f3;
            border: 1px solid gray;
        }
        ol.nav a:hover,
        ol.nav a:focus,
        ol.nav a.active {
            color: blue;
            background: orange;
        }
        ol.nav a[rel="prev"],
        ol.nav a[rel="next"] {
            border: none;
            background: none;
        }
        ol.nav a[rel="prev"]::before {
            content: "\00AB";
            padding-right: 0.8em;
        }
        ol.nav a[rel="next"]::after {
            content: "\00BB";
            padding-left: 0.8em;
        }
    </style>
</head>
<body>
    <ol class="nav">
        <li><a href="#" rel="prev">prev</a></li>
        <li><a href="#">2</a></li>
        <li><a class="active" href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#" rel="next">next</a></li>
    </ol>
</body>
</html>

演示地址:https://22337383.github.io/book/04/nav.html

时间: 2024-11-05 19:35:15

分页导航的实现方法的相关文章

Bootstarp学习(十二)分页导航

分页导航(带页码的分页导航) 分页导航几乎在哪个网站都可见.好的分页导航能给用户带来更好的用户体验.在Bootstrap框架中提供了两种分页导航: ?   带页码的分页导航 ?   带翻页的分页导航 带页码的分页导航 带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式.在Bootstrap框架为开发者提供不同的版本: ?   LESS版本:对应的源文件pagination.less ?   Sass版本:对应的源文件_pagination.sc

Bootstrap系列 -- 44. 分页导航

带页码的分页导航,可能是最常见的一种分页导航,特别是在列表页内容超多的时候,会给用户提供分页的导航方式.平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航.不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法. <ul class="pagination"> <li><a href="#">«</a></li>

Bootstrap之导航条,分页导航

导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.   基础导航条 使用方法: 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使

11款适合移动设备使用CSS3分页导航条

这是一组适合移动设备使用CSS3分页导航条插件.共有11种不同样式的分页导航条.它们在移动设备上能够很好的工作,是一款移动优先的分页导航条插件.分页导航条的作用是用户通过分页链接来浏览你的全部内容.一个可替代的方法是使用瀑布流布局,它们各有长处和短处. 在线演示:http://www.htmleaf.com/Demo/201501241269.html 下载地址:http://www.htmleaf.com/css3/daohangcaidan/201501241268.html

MongoDB学习笔记~为IMongoDBRepository接口添加分页取集合的方法

对于数据分页,我们已经见的太多了,几乎每个列表页面都要用到分页,这已经成了一种定理了,在进行大数据展示时,如果不去分页,而直接把数据加载到内存,这简直是不可以去相向的,呵呵,在很多ORM工具中都对分页有了更好的支持,如LINQ里有大家熟悉的take和skip,而在MongoDB里也有这种概念,它使用limit和skip实现,这在大多数的Mongo客户端上都集成了这个功能,即帮助我们组合命令参数,并带我们把分页取数据的指令发到Mongo服务器去,实现分页技术! 添加了分页后的IMongoDBRep

模拟ASP.Net分页的分页导航

获得如下分页导航   |<< < ... 9 10 11 12 13 14 15 16  ... > >>| 习惯了C的带类型编程,不大习惯JS的无类型编程.搞了半天才发现是类型错误...-  -  还是都取下整比较保险 //containerId 导航的目标容器,建议使用span标签 //url 默认为XXX.XX?pagenum= //curPage 当前的页码 //maxSection 最大的分段数(一段里面最大的页数) //totalPage 总共的页数 fun

bootstrap-分页导航(带页码的分页导航)

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>分页导航(带页码的分页导航)</title>     <!-- 最新

bootstrap-分页导航(翻页分页导航)

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>分页导航(翻页分页导航)</title>     <!-- 最新版本

05 导航条 分页导航

//导航条基础 <div class="navbar navbar-default" role="navigation">  //必须要在一个容器中     <ul class="nav navbar-nav">         <li class="active"><a href="##">网站首页</a></li>        &