zoukankan
html css js c++ java
一个分页栏的样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>分页栏</title> <style type="text/css"> /* Page CSS */ body, html { background: #333; } body { padding: 1em; } h1 { color: #DDD; font-size: 2em; } .back { color: #DDF; display: block; margin: 0 auto; padding: 0.5em; } #wrapper { border: 1px solid #999; background: #FFF; padding: 1em; text-align: center; 500px; } /* Widget CSS */ .audible { left: -999em; position: absolute; } ul { display: inline; position: relative; } li { border- 0; display: inline; margin: 0 2px; } li a, .prev, .next { border: 1px solid #EEE; color: #369; padding: 2px 5px; text-decoration: none; } li a:hover, a:hover .prev, a:hover .next, li a:focus, a:focus .prev, a:focus .next { background: #0063DC; color: #FFF; border-color: #FFF; } .prev { position: absolute; left: -7em; top: -3px; } .prev:before { content: "← "; } .next { position: absolute; right: -5em; top: -3px; } .next:after { content: " →"; } p { border: 1px solid #EEE; color: #FF0084; display: inline; padding: 2px 4px; } ul, li, a, p { /** * @HACK: The `ul` needs "layout" in IE. */ _zoom: 1; } /** * @HACK: The `.prev` and `.next` spans apparently ignore the * link's padding in IE. The left/right positions also * ought be adjusted, since they don't get the generated * arrows. */ .prev, .next { _top: 0px; } .prev { _left: -5em; } .next { _right: -4em; } </style> </head> <body> <div id="wrapper"> <p id="paginglabel" class="audible">Example Pagination</p> <ul role="navigation" aria-labelledby="paginglabel"> <li><a href="#page1"><span class="audible">Example Page</span>1</a></li> <li><a href="#page2" rel="prev"><span class="prev">Previous<span class="audible">: Example Page</span></span>2</a></li> <li><p><span class="audible">You're currently reading Example page </span>3</p></li> <li><a href="#page4" rel="next"><span class="next">Next<span class="audible">: Example Page</span></span>4</a></li> <li><a href="#page5"><span class="audible">Example Page </span>5</a></li> </ul> </div> </body> </html>
运行代码
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
查看全文
相关阅读:
ZOJ 3954 Seven-Segment Display
ZOJ 3955 Saddle Point
ZOJ 3950 How Many Nines
ZOJ 3957 Knuth-Morris-Pratt Algorithm
PAT L2-018. 多项式A除以B
hihocoder 1500 EL SUENO
hihocoder 1498 Diligent Robots
hihocoder 1497 Queen Attack
hihocoder 1490 Tree Restoration
SCU 4443 Range Query
原文地址:https://www.cnblogs.com/rubylouvre/p/2000039.html
最新文章
BZOJ 4589 Hard Nim(FWT+博弈论+快速幂)
BZOJ 1260 [CQOI2007]涂色paint(区间DP)
BZOJ 3391 [Usaco2004 Dec]Tree Cutting网络破坏(树形DP)
BZOJ 1202 [HNOI2005]狡猾的商人(并查集)
BZOJ 1251 序列终结者(Splay)
BZOJ 1257 [CQOI2007]余数之和sum(分块)
BZOJ 1109 [POI2007]堆积木Klo(树状数组)
BZOJ 1123 [POI2008]BLO(Tarjan算法)
BZOJ 1106 [POI2007]立方体大作战tet(树状数组)
BZOJ 1132 [POI2008]Tro(极角排序)
热门文章
BZOJ 1131 [POI2008]Sta(树形DP)
BZOJ 2527 [Poi2011]Meteors(整体二分)
BZOJ 1116 [POI2008]CLO(并查集)
BZOJ 1532 [POI2005]Kos-Dicing(二分+最大流判断)
BZOJ 1115 [POI2009]石子游戏Kam(阶梯博弈)
BZOJ 1098 [POI2007]办公楼biu(反向图bfs+并查集优化)
URAL 1997 Those are not the droids you're looking for
URAL 1995 Illegal spices
URAL 1998 The old Padawan
ZOJ 3953 Intervals
Copyright © 2011-2022 走看看