一个分页栏的样式

<!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;
                width:      500px;
            }
 
            /* 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>

posted on 2011-03-30 16:31 司徒正美阅读(2107) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Ruby's Louvre

导航

公告

一个分页栏的样式