用背景圖片實現(xiàn)CSS柱狀圖表一例_DIV+CSS實例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

我們現(xiàn)在介紹，用背景圖片的方法實現(xiàn)柱狀圖表。看下面的效果圖：

　　實現(xiàn)這樣的圖表并沒有什么難處，我們看下面的xhtml代碼：

示例代碼 [m.dounai2.com]

　　這是一個無序列表，我們注重到，我們在xhtml中使用行內(nèi)樣式定義了不同的li的高度。
　　我們在這一圖表的制作中，需要使用兩張圖片，分別如下：

　　我們看下面的css代碼：

示例代碼 [m.dounai2.com]

#vertgraph {
width: 378px;
height: 207px;
position: relative;
background: url("g_backbar.gif") no-repeat;
}
#vertgraph ul {
width: 378px;
height: 207px;
margin: 0;
padding: 0;
}
#vertgraph ul li {
position: absolute;
width: 28px;
height: 160px;
bottom: 34px;
padding: 0 !important;
margin: 0 !important;
background: url("g_colorbar3.jpg") no-repeat !important;
text-align: center;
font-weight: bold;
color: white;
line-height: 2.5em;
}
#vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
#vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
#vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
#vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
#vertgraph li.info { left: 327px; background-position: -112px bottom !important; }

　　這段CSS代碼就定義了這個柱狀圖表的顯示，我們需要注重的是background-position屬性的應(yīng)用，這一屬性是實現(xiàn)圖表的要害.
　　我們看最終的運行效果：

代碼調(diào)試框 [m.dounai2.com]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>m.dounai2.com</title>
<style type="text/css">
#vertgraph {
width: 378px;
height: 207px;
position: relative;
background: url("/uploads/divcss/l2007323214817.gif") no-repeat;
}
#vertgraph ul {
width: 378px;
height: 207px;
margin: 0;
padding: 0;
}
#vertgraph ul li {
position: absolute;
width: 28px;
height: 160px;
bottom: 34px;
padding: 0 !important;
margin: 0 !important;
background: url("/uploads/divcss/32007323214824.jpg") no-repeat !important;
text-align: center;
font-weight: bold;
color: white;
line-height: 2.5em;
}
#vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
#vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
#vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
#vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
#vertgraph li.info { left: 327px; background-position: -112px bottom !important; }
</style>
</head>
<body>
<div id="vertgraph">
<ul>
<li class="critical" style="height: 150px;">22</li>
<li class="high" style="height: 80px;">7</li>
<li class="medium" style="height: 50px;">3</li>
<li class="low" style="height: 90px;">8</li>
<li class="info" style="height: 40px;">2</li>
</ul>
</div>
</body>
</html>

[ 可先修改部分代碼再運行查看效果 ]