登 录
/* Widget CSS */ .audible { left: -999em; position: absolute; } ul { display: inline; position: relative; } li { border-width: 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>
运行代码
抱歉!评论已关闭.