CSS滑動(dòng)式條狀圖表如何實(shí)現(xiàn)?_DIV+CSS實(shí)例
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
現(xiàn)在我們介紹如何實(shí)現(xiàn)CSS滑動(dòng)式條狀圖表。效果如下圖:
這種形式的條狀圖在實(shí)際應(yīng)用中有著非常好的表現(xiàn)力,有現(xiàn)實(shí)使用意義。我們可以通過(guò)這樣的方式形象的表述出數(shù)值的變化與對(duì)比關(guān)系。
這樣的CSS滑動(dòng)式條狀圖表如何實(shí)現(xiàn)?我們看下面的代碼:
我們了解到,dl 標(biāo)簽是HTML自定義列表,dt 表示列表元素的標(biāo)題,dd 描述列表中元素的內(nèi)容。在dd中,我們?cè)O(shè)置了容器div,以及子元素strong。我們將通過(guò)CSS對(duì)其表現(xiàn)進(jìn)行定義,使其成為我們想要的CSS滑動(dòng)式條狀圖表。我們看下面的CSS代碼:
在這些代碼中,實(shí)現(xiàn)滑動(dòng)式條狀圖表的思路在于:
我們的目標(biāo)是實(shí)現(xiàn)圖形化數(shù)字,更直觀而易于理解。所以數(shù)字并不是非常重要了。
我們看最終的效果:
[ 可先修改部分代碼 再運(yùn)行查看效果 ]
這種形式的條狀圖在實(shí)際應(yīng)用中有著非常好的表現(xiàn)力,有現(xiàn)實(shí)使用意義。我們可以通過(guò)這樣的方式形象的表述出數(shù)值的變化與對(duì)比關(guān)系。
這樣的CSS滑動(dòng)式條狀圖表如何實(shí)現(xiàn)?我們看下面的代碼:
示例代碼 [m.dounai2.com]
<dl>
<dt>Love Life</dt>
<dd>
<div style="width:25%;"><strong>25%</strong></div>
</dd>
<dt>Education</dt>
<dd>
<div style="width:55%;"><strong>55%</strong></div>
</dd>
<dt>War Craft 3 Rank</dt>
<dd>
<div style="width:75%;"><strong>75%</strong></div>
</dd>
</dl>
<dt>Love Life</dt>
<dd>
<div style="width:25%;"><strong>25%</strong></div>
</dd>
<dt>Education</dt>
<dd>
<div style="width:55%;"><strong>55%</strong></div>
</dd>
<dt>War Craft 3 Rank</dt>
<dd>
<div style="width:75%;"><strong>75%</strong></div>
</dd>
</dl>
我們了解到,dl 標(biāo)簽是HTML自定義列表,dt 表示列表元素的標(biāo)題,dd 描述列表中元素的內(nèi)容。在dd中,我們?cè)O(shè)置了容器div,以及子元素strong。我們將通過(guò)CSS對(duì)其表現(xiàn)進(jìn)行定義,使其成為我們想要的CSS滑動(dòng)式條狀圖表。我們看下面的CSS代碼:
示例代碼 [m.dounai2.com]
dl {
margin: 0;
padding: 0;
}
dt {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: right;
}
dd {
position: relative; /* IE is dumb */
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background: url("g_colorbar.jpg");
}
* html dd { float: none; }
/* IE is dumb; Quick IE hack, apply favorite filter methods for
wider browser compatibility */
dd div {
position: relative;
background: url("g_colorbar2.jpg");
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url("g_marker.gif");
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}
margin: 0;
padding: 0;
}
dt {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: right;
}
dd {
position: relative; /* IE is dumb */
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background: url("g_colorbar.jpg");
}
* html dd { float: none; }
/* IE is dumb; Quick IE hack, apply favorite filter methods for
wider browser compatibility */
dd div {
position: relative;
background: url("g_colorbar2.jpg");
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url("g_marker.gif");
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}
在這些代碼中,實(shí)現(xiàn)滑動(dòng)式條狀圖表的思路在于:
示例代碼 [m.dounai2.com]
dd中我們?cè)O(shè)置了背景g_colorbar.jpg。
在dd的div容器中我們?cè)O(shè)置了背景圖片g_colorbar2.jpg。并對(duì)此容器的width寬度進(jìn)行設(shè)置。
在div容器內(nèi)部的strong里我們?cè)O(shè)置了滑動(dòng)的“游標(biāo)”g_marker.gif。或許大家有疑問(wèn),為什么看不到strong元素內(nèi)的文字?因?yàn)樵O(shè)置了text-indent: -9999px; overflow: hidden;將其隱藏起來(lái)了。
在dd的div容器中我們?cè)O(shè)置了背景圖片g_colorbar2.jpg。并對(duì)此容器的width寬度進(jìn)行設(shè)置。
在div容器內(nèi)部的strong里我們?cè)O(shè)置了滑動(dòng)的“游標(biāo)”g_marker.gif。或許大家有疑問(wèn),為什么看不到strong元素內(nèi)的文字?因?yàn)樵O(shè)置了text-indent: -9999px; overflow: hidden;將其隱藏起來(lái)了。
我們的目標(biāo)是實(shí)現(xiàn)圖形化數(shù)字,更直觀而易于理解。所以數(shù)字并不是非常重要了。
我們看最終的效果:
代碼調(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í)例推薦
- CSS實(shí)例:如何讓無(wú)空格的長(zhǎng)字符在IE和FF下面實(shí)現(xiàn)自動(dòng)換行?
- CSS實(shí)例教程:紅藍(lán)炫CSS橫向菜單
- DIVCSS菜單:黑白灰?guī)в嘘幱靶Ч腃SS橫向菜單
- CSS實(shí)例:kijiji社區(qū)頭像CSS效果
- CSS實(shí)例:list-style-type在IE與FF中奇怪的現(xiàn)象解析
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- DIVCSS布局教程:應(yīng)用ul、li實(shí)現(xiàn)表格形式
- Div CSS實(shí)例:如何用CSS實(shí)現(xiàn)背景半透明效果
- DivCSS布局關(guān)于分辨率與100%自適應(yīng)問(wèn)題的探討!
- CSS折疊菜單一例:可自由伸縮折疊
猜你也喜歡看這些
- CSSfloats來(lái)創(chuàng)建三欄網(wǎng)頁(yè)布局的方法
- 網(wǎng)頁(yè)制作中如何精確還原設(shè)計(jì)稿的幾個(gè)步驟
- IE對(duì)CSS的渲染引擎hasLayout
- 用CSS控制輸入框input樣式,懸停交互如何實(shí)現(xiàn)?
- WEB2.0標(biāo)準(zhǔn)教程:第五天head區(qū)的其他設(shè)置
- ol有序列表居然沒(méi)有按順序顯示的奇怪現(xiàn)象
- DIVCSS網(wǎng)頁(yè)布局常用的方法與技巧
- table建站,XHTML建站和DIV建站的不同
- 如何用CSS定義表格行背景色交替出現(xiàn)?
- 不規(guī)則文字排版的CSS樣式如何定義?
- 相關(guān)鏈接:
- 教程說(shuō)明:
DIV+CSS實(shí)例-CSS滑動(dòng)式條狀圖表如何實(shí)現(xiàn)?。