css 分頁效果製作

css 分頁這是本人在給客戶開發網站時要用到了,所以我把它拿出來新手們學學,我們這裡只是css分頁效果而不是用伺服器指令碼那種分頁了,這種只是做出一種漂亮的效果來哦,下面我們先看看效果圖片吧.

就是這種效果,像dz論壇一樣的分頁效果吧,那我是如何?的呢,我們就來看看原始碼與樣式吧.

 <div class="jogger">
            <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>

簡單的很,就是定義jogger時面的disabled,與current當前樣式的a 標籤就OK了.下面我們來看看樣式定義代碼.

DIV.jogger {
 PADDING-RIGHT: 2px;
 PADDING-LEFT: 2px;
 PADDING-BOTTOM: 2px;
 MARGIN: 7px;
 PADDING-TOP: 2px;
 FONT-FAMILY: "Lucida Sans Unicode", "Lucida Grande", LucidaGrande, "Lucida Sans", Geneva, Verdana, sans-serif;
 text-align: right;
 font-size: 12px;
}
DIV.jogger A {
 PADDING-RIGHT: 0.64em;
 PADDING-LEFT: 0.64em;
 PADDING-BOTTOM: 0.43em;
 MARGIN: 2px;
 COLOR: #fff;
 PADDING-TOP: 0.5em;
 BACKGROUND-COLOR: #333;
 TEXT-DECORATION: none;
 font-size: 12px;
}
DIV.jogger A:hover {
 PADDING-RIGHT: 0.64em;
 PADDING-LEFT: 0.64em;
 PADDING-BOTTOM: 0.43em;
 MARGIN: 2px;
 COLOR: #fff;
 PADDING-TOP: 0.5em;
 BACKGROUND-COLOR: #fc8dbd
}
DIV.jogger A:active {
 PADDING-RIGHT: 0.64em;
 PADDING-LEFT: 0.64em;
 PADDING-BOTTOM: 0.43em;
 MARGIN: 2px;
 COLOR: #fff;
 PADDING-TOP: 0.5em;
 BACKGROUND-COLOR: #333
}
DIV.jogger SPAN.current {
 PADDING-RIGHT: 0.64em;
 PADDING-LEFT: 0.64em;
 PADDING-BOTTOM: 0.43em;
 MARGIN: 2px;
 COLOR: #fff;
 PADDING-TOP: 0.5em;
 BACKGROUND-COLOR: #fc8dbd
}
DIV.jogger SPAN.disabled {
 DISPLAY: none
}

好了就這麼簡單了,本站原創轉請註明來自:  www.111cn.net/cssdiv/css.html