DIV CSS實例：橙藍互換的CSS翻頁效果

dlalden

下面的圖片是本案例中的鏈接背景圖片：


下面是XHTML編碼：

<div id="pagebar">
    <a href="#"><<</a>
    <span class="page_now">1</span>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
    <a href="#">11</a>
    <a href="#">12</a>
    <a href="#">13</a>
    <a href="#">14</a>
    <a href="#">15</a>
    <a href="#">>></a>
</div>

下面是CSS編碼：

* {
    margin:0;
    padding:0;
    text-decoration:none;
}
#pagebar {
    float:left;
    display:inline;
    width:570px;
    height:32px;
    margin:50px;
    font-size:13px; }
#pagebar a,#pagebar .page_now {
    display:block;
    float:left;
    margin-right:4px;
    padding:2px 5px;
    border:1px solid #f30;
    color:#fff;
    font-weight:800;
    background:url(pagebar_bg.png) repeat-x  0 0 ;
}
#pagebar a {
    display:inline;
}
#pagebar a:hover {
    border:1px solid #03c;
    background-position:0 -30px;
}
#pagebar .page_now {
    border:1px solid #333;
    background-image:none;
    background:#666;
}