|
在CSS樣式中，dl部分只是簡單的把內(nèi)外邊距設(shè)置為0，dd部分有一個clear屬性需要特別注意。當(dāng)某個元素的屬性設(shè)置float浮動時，它所在的物理位置已經(jīng)脫離文檔流了，但是大多時候我們希望文檔流能識別float浮動，或者是希望浮動元素后面的內(nèi)容不被其float浮動所影響，這個時候我們就需要設(shè)置clear來清除這種浮動關(guān)聯(lián)。舉個例子，假如文檔中有下列內(nèi)容：
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
如果不使用浮動清除，那么第3個P里的文字就緊跟在第一、二個P顯示在同一行，這個時候如果要達(dá)到預(yù)期中的效果，我們需要在第3個P的樣式中加一個清除浮動：
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
在本例中，如果dt不使用浮動清除，三個圖表的內(nèi)容就無法實現(xiàn)對齊，如圖：
dt和dd涉及到的其它樣式都比較簡單，主要是背景、寬高、浮動等屬性，這里就不一一解釋了。進度條效果的實現(xiàn)依靠背景覆蓋來完成，因為兩張背景圖只是在色彩鮮明度上有所差異，使得最終的效果呈現(xiàn)出類似一個半透明圖層覆蓋在底部背景上，兼顧了視覺上的差異和融合。
指針的效果在strong標(biāo)簽中定義，來看看它的完整CSS：
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url(http://m.95time.cn/articleimg/2008/07/5924/05.gif);
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}
里面所用到的背景就是指針圖像，需要注意的是該圖像的尺寸是24*9像素，所以這里有幾個數(shù)值要進行精確的計算。首先因為一部分的指針圖像要顯示在dl區(qū)域之外，因此使用了absolute絕對定位方式；其次因為dl元素的高度我們設(shè)置成了20像素，所以指針的上、下溢出部分在高度上均為(24-20)/2即2像素，水平方向的溢出也同理參照指針的寬度9像素進行計算，根據(jù)這些數(shù)據(jù)最終計算出right和top的值。最后通過text-indent屬性設(shè)置文本的縮進，目的是實現(xiàn)對文本的隱藏。
最后在CSS樣式中還要加入一行Hack完善其在IE中的效果：
* html dd { float: none; }
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
本文鏈接：http://m.95time.cn/tech/web/2008/5924.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 CSS條狀圖表:復(fù)合型 [1] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 CSS條狀圖表:復(fù)合型 [2]
