DIVCSS實(shí)例：一款不錯(cuò)的CSS翻頁(yè)效果(DIGG)_DIV+CSS實(shí)例
      
編輯Tag賺U幣
      


      教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!
      


      


						DIV CSS實(shí)例：一款不錯(cuò)的CSS翻頁(yè)效果（DIGG）

      下面是XHTML代碼：

      示例代碼 [www.wf0088.com]
      <p>
      <a href="http://www.wf0088.com/">Digg Style - MB5U.com</a>
      <div class="digg">
      <span class="disabled"> < </span>
      <span class="current">1</span>
      <a href="#?page=2">2</a>
      <a href="#?page=3">3</a>
      <a href="#?page=4">4</a>
      <a href="#?page=5">5</a>
      <a href="#?page=6">6</a>
      <a href="#?page=7">7</a>
      ...
      <a href="#?page=199">199</a>
      <a href="#?page=200">200</a>
      <a href="#?page=2"> > </a>
      </div>
      </p>

      以下是CSS代碼：

      示例代碼 [www.wf0088.com]
      DIV.digg {
          PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
      }
      DIV.digg A {
          BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none
      }
      DIV.digg A:hover {
          BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
      }
      DIV.digg A:active {
          BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; COLOR: #000; BORDER-BOTTOM: #000099 1px solid
      }
      DIV.digg SPAN.current {
          BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #fff; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000099
      }
      DIV.digg SPAN.disabled {
          BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
      }

      查看運(yùn)行效果：

       代碼調(diào)試框 [www.wf0088.com]

           [ 可先修改部分代碼 再運(yùn)行查看效果 ]
      




      

      



      


      來(lái)源：無(wú)憂整理//所屬分類：DIV+CSS實(shí)例/更新時(shí)間：2008-01-02


      

      



      


      



      相關(guān)DIV+CSS實(shí)例：