分页导航的实现方法
2016-12-15 16:43
190 查看
这个导航是阅读了精通css这本书后做的demo,感觉以前写的真的是弱爆了
演示地址:https://22337383.github.io/book/04/nav.html
<!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
相关文章推荐
- 图——普里姆算法——构建最小生成树(采用邻接矩阵的方式存储)
- proguard.txt
- [BZOJ3123][Sdoi2013]森林(主席树启发式合并)
- Tinker接入
- 海龟git操作教程
- socket状态查看
- elasticsearch-jdbc实现MySQL同步到ElasticSearch深入详解
- Spring的作用域以及RequestContextListener作用
- 第十五周 将字符串格式化后输出
- firefox出现连接不安全
- 一种多尺度的KCF跟踪程序代码分析(一)
- [Java]详解Socket和ServerSocket学习笔记
- C# winform写入和读取TXT文件
- Log4j的进阶使用 自定义类 日志类型 日志导出位置
- hpfeeds操作
- spring+hibernate+jta 分布式事务Demo
- 百度地图画出手机GPS行驶轨迹——Web端
- 基本概念学习(9000)---查看端口号是否被占用
- Android Fragment 的使用,一些你不可不知的注意事项
- [BZOJ3166][Heoi2013]Alo(可持久化线段树+可持久化tire树)