DIVCSS實例:一款不錯的CSS翻頁效果(DIGG)_DIV+CSS實例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
DIV CSS實例:一款不錯的CSS翻頁效果(DIGG)
下面是XHTML代碼:
以下是CSS代碼:
查看運(yùn)行效果:
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
下面是XHTML代碼:
示例代碼 [m.dounai2.com]
<p>
<a href="http://m.dounai2.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>
<a href="http://m.dounai2.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代碼:
示例代碼 [m.dounai2.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
}
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)試框 [m.dounai2.com]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
相關(guān)DIV+CSS實例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個很酷的涂鴉風(fēng)格國外網(wǎng)店設(shè)計展示
- jquery模擬瀏覽器滾動條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁最后更新時間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實例:很實用的圖文混排CSS列表-富有語義
- DivCSS實例:CSS菜單Flash效果用圖片模擬實現(xiàn)
- DivCSS布局實例用dldtdd來制作列表
DIV+CSS實例Rss訂閱Div+Css教程搜索
DIV+CSS實例推薦
猜你也喜歡看這些
- DIVCSS網(wǎng)頁布局:三行三列自適應(yīng)高度的DIV布局
- IE對CSS的渲染引擎hasLayout
- DivCSS教程:CSS控制Table單元格強(qiáng)制換行與強(qiáng)制不換行
- 固定寬度布局Div CSS如何創(chuàng)建?
- CSS selector 選擇符是我們進(jìn)行CSS網(wǎng)頁布局的基
- CSS初學(xué)者如何選擇相應(yīng)的書籍來學(xué)習(xí)?
- CSS 連接后面的問號 表示什么意思,有什么作用?
- DW中的可視化效果與瀏覽器的為什么不同?
- CSS網(wǎng)頁布局開發(fā)應(yīng)該使用什么軟件比較好?
- 該如何正確的使用position屬性它的作用是什么?
- 相關(guān)鏈接:
- 教程說明:
DIV+CSS實例-DIVCSS實例:一款不錯的CSS翻頁效果(DIGG)。