DIVCSS實(shí)例:橙藍(lán)互換的CSS翻頁(yè)效果_DIV+CSS實(shí)例
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
DIV CSS實(shí)例:橙藍(lán)互換的CSS翻頁(yè)效果
CSS翻頁(yè)效果在實(shí)際開(kāi)發(fā)中是最常遇見(jiàn)的情況
現(xiàn)在我們看這一款CSS翻頁(yè)效果
最終效果m.dounai2.com如下圖所示
下面的圖片是本案例中的鏈接背景圖片:
下面是XHTML編碼:
示例代碼 [m.dounai2.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>
<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編碼:
示例代碼 [m.dounai2.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;
}
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;
}
最終的運(yùn)行效果:
代碼調(diào)試框 [m.dounai2.com]
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁(yè)最后更新時(shí)間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來(lái)制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- DIVCSS實(shí)例教程:蔚藍(lán)色的海洋漂亮的CSS縱向菜單
- 一個(gè)無(wú)序列表UL鼠標(biāo)激活顯示背景色的實(shí)例
- CSS菜單實(shí)例:簡(jiǎn)潔的效果火紅的圍城
- DIV CSS網(wǎng)頁(yè)布局分析的兩個(gè)小例子
- 用CSS打造評(píng)分星級(jí)效果的一個(gè)實(shí)例
- DIVCSS圖形菜單之仿DreamWeaver
- HowCSSLayoutWorks-如何進(jìn)行CSS布局
- CSS菜單實(shí)例:按鈕效果跳躍的藍(lán)色精靈
- CSS基礎(chǔ)實(shí)例:CSS實(shí)現(xiàn)帶背景圖片的文字鏈接的方法
- DIVCSS布局實(shí)例:DIV CSS新聞列表制作
猜你也喜歡看這些
- DivCSS中id與class的使用原則
- CSS三列浮動(dòng)中間列寬度自適應(yīng)
- divcss表單布局的五個(gè)小技巧
- 如何制作可控制顯示或隱藏的伸縮式DIV CSS新聞列表?
- 圖片半透明效果如何用CSS實(shí)現(xiàn)?
- Div CSS教程:如何閉合浮動(dòng)元素?
- Web標(biāo)準(zhǔn)設(shè)計(jì)技巧之三布局深入
- 自動(dòng)播放效果SlideShow在相冊(cè)網(wǎng)頁(yè)中的應(yīng)用
- 閉合浮動(dòng)元素(clearingfloat)的簡(jiǎn)單方法
- Div CSS教程:html中的換行造成空格問(wèn)題的探討
- 相關(guān)鏈接:
- 教程說(shuō)明:
DIV+CSS實(shí)例-DIVCSS實(shí)例:橙藍(lán)互換的CSS翻頁(yè)效果。