分类
随意说

DIV CSS实例:橙蓝互换的CSS翻页效果

  CSS翻页效果在实际开发中是最常遇见的情况

  在前面的教程中我们曾经介绍过一篇相关的文章:
  DIV CSS实例:一款不错的CSS翻页效果(DIGG)
  http://www.52css.com/article.asp?id=647

  但编码不够优化,有些地方比较烦琐!

  现在我们再看这一款CSS翻页效果
  最终效果www.52CSS.com如下图所示

2200811801839

  下面的图片是本案例中的链接背景图片:

v200811802116
  下面是XHTML编码:

 Example Source Code
[www.52css.com]
<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编码:

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
* {
    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;
}

  最终的运行效果:

 Source Code to Run [
www.52css.com]

    [ 可先修改部分代码 再运行查看效果 ]

由柱子

我爱大理好风光