标签：type 阅读 htm pre add text gray order body
这个导航是阅读了精通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
标签：type 阅读 htm pre add text gray order body
原文地址：http://www.cnblogs.com/yesyes/p/6183845.html
