<Br/> <! Doctype HTML> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <br/> <title> pagination bar </title> <br/> <style type =" text/CSS "> <br/>/* Page CSS */<br/> body, HTML {<br/> Background: #333; <br/>}< br/> body {<br/> padding: 1em; <br/>}< br/> H1 {<br/> color: # DDD; <br/> font-size: 2em; <br/>}< br/>. back {<br/> color: # DDF; <br/> display: block; <br/> margin: 0 auto; <br/> padding: 0.5em; <br/>}< br/> # wrapper {<br/> border: 1px solid #999; <br/> Background: # FFF; <br/> padding: 1em; <br/> text-align: center; <br/> width: 500px; <br/>}</P> <p>/* widget CSS */<br/>. audible {<br/> left:-999em; <br/> position: absolute; <br/>}< br/> ul {<br/> display: inline; <br/> position: relative; <br/>}< br/> Li {<br/> border-width: 0; <br/> display: inline; <br/> margin: 0 2px; <br/>}< br/> Li ,. prev ,. next {<br/> border: 1px solid # Eee; <br/> color: #369; <br/> padding: 2px 5px; <br/> text-Decoration: none; <br/>}< br/> Li A: hover, A: hover. prev, A: hover. next, <br/> Li A: focus, A: focus. prev, A: focus. next {<br/> Background: # 0063dc; <br/> color: # FFF; <br/> border-color: # FFF; <br/>}< br/>. prev {<br/> position: absolute; <br/> left:-7em; <br/> top:-3px; <br/>}< br/>. PREV: Before {<br/> content: "contents"; <br/>}< br/>. next {<br/> position: absolute; <br/> right:-5em; <br/> top:-3px; <br/>}< br/>. next: After {<br/> content: "→"; <br/>}< br/> P {<br/> border: 1px solid # Eee; <br/> color: # ff0084; <br/> display: inline; <br/> padding: 2px 4px; <br/>}</P> <p> ul, li, A, P {<br/>/** <br/> * @ hack: The 'ul 'needs "layout" in IE. <br/> */<br/> _ ZOOM: 1; <br/>}< br/>/** <br/> * @ hack: '. prev 'and '. next 'spans apparently ignore the <br/> * Link's padding in IE. the left/right positions also <br/> * ought be adjusted, since they don't get the generated <br/> * arrows. <br/> */<br/>. prev ,. next {<br/> _ top: 0px; <br/>}< br/>. prev {<br/> _ left:-5em; <br/>}< br/>. next {<br/> _ Right:-4em; <br/>}</P> <p> </style> <br/> </pead> <br/> <body> </P> <p> <Div id = "wrapper"> <br/> <p id = "paginglabel" class = "audible"> example pagination </P> <br/> <ul role = "navigation" aria-labelledby = "paginglabel"> <br/> <li> <a href = "# page1"> <SPAN class = "audible"> Example page </span> 1 </A> </LI> <br/> <li> <a href = "# page2" rel = "Prev"> <SPAN class = "Prev"> previous <SPAN class = "audible">: example page </span> 2 </a> </LI> <br/> <li> <p> <SPAN class = "audible"> You're currently reading Example page </span> 3 </P> </LI> <br/> <li> <a href = "# page4" rel = "Next"> <Span class = "Next"> next <SPAN class = "audible">: example page </span> 4 </a> </LI> <br/> <li> <a href = "# page5"> <SPAN class =" audible "> Example page </span> 5 </a> </LI> <br/> </ul> <br/> </div> </P> <p> </body> <br/> </ptml> <br/>
RunCode
