久久久久国产精品午夜一区,欧美日韩激情一区,www.视频一区

利div+css做的柱狀圖，代碼超級(jí)簡(jiǎn)潔

深山行者個(gè)人網(wǎng)站 2009/2/4 20:45:56 深山行者字體:大中小瀏覽 20314

以下為詳細(xì)代碼

<!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>利div+css做的柱狀圖，代碼超級(jí)簡(jiǎn)潔深山行者</title>
<style>
h1,h2,h3,h4,h5,h6,form,div,p,img,ul,li,table,tr,td,dl,dt,dd,body {margin:0;padding:0;}
body {width:915px;margin:auto;font:normal 12px/160% Arial,宋體,Tahoma,sans-serif;color:#393939;font-size:9pt;background:#fff;}
ul {list-style-type:none;}
a:link,a:visited {color:#393939;text-decoration:none;}
a:hover {color:#f00;text-decoration:underline;}
/*column start*/
.column {margin:50px;background:#fff;width:650px;height:240px;}
.columnl {background:#fff;width:40px;height:240px;position:relative;float:left;}
.columnl ul {position:absolute;bottom:3px;right:3px;text-align:right;line-height:40px;font-weight:bold;}
.columnc {flaot:left;margin-left:40px;background:#fff url(./UploadFiles/200924204856914.gif) left bottom;width:600px;height:220px;border-left:solid 1px #a6a6a6;border-bottom:solid 1px #a6a6a6;position:relative;}
.columnc ul {position:absolute;bottom:0px;left:0px;}
.columnc li {float:left;width:81px;height:220px;background:url(./UploadFiles/200924205055615.gif) repeat-y right bottom;}
.columnc dl {text-align:center;position:absolute;bottom:0px;margin-left:26px;}
.columnc dt {font-weight:bold;}
.columnc dd {width:24px;}
.columnc span {display:block;width:100%;height:100%;}
.columnc span {display:block;width:100%;height:100%;background:url(/UploadFiles/demo/ups_columncspanbg.png) repeat-y left !important;}
*html .columnc span {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/UploadFiles/demo/ups_columncspanbg.png");background:none;filter:alpha(opacity=50);}
.columnb {float:left;background:#fff;width:600px;}
.columnb ul {margin:0px;}
*html .columnb ul {margin-left:3px;}
.columnb li {float:left;border-left:solid 1px #a6a6a6;width:80px;line-height:26px;text-align:center;font-weight:bold;}
</style>
</head>
<body>

<div class="column">

<div class="columnl">
<ul>
<li>100%</li>
<li>80%</li>
<li>60%</li>
<li>40%</li>
<li>20%</li>
<li>0%</li>
</ul>
</div>


<div class="columnc">
<ul>
<li>
<dl>
<dt style="color:#f00;">20%</dt>
<dd style="height:40px;background:#f00;"><span></span></dd>
</dl>
</li>
<li>
<dl>
<dt style="color:green;">40%</dt>
<dd style="height:80px;background:green;"><span></span></dd>
</dl>
</li>
<li>
<dl>
<dt style="color:#c6c6c6;">30%</dt>
<dd style="height:60px;background:#c6c6c6;"><span></span></dd>
</dl>
</li>
<li>
<dl>
<dt style="color:#076599;">50%</dt>
<dd style="height:100px;background:#076599;"><span></span></dd>
</dl>
</li>
<li>
<dl>
<dt style="color:#234345;">80%</dt>
<dd style="height:160px;background:#234345;"><span></span></dd>
</dl>
</li>
<li>
<dl>
<dt style="color:#076599;">100%</dt>
<dd style="height:200px;background:#076599;"><span></span></dd>
</dl>
</li>
<li>
<dl>
<dt style="color:#076599;">60%</dt>
<dd style="height:120px;background:#076599;"><span></span></dd>
</dl>
</li>
</ul>
</div>


<div class="columnb">
<ul>
<li>合計(jì)</li>
<li>連云</li>
<li>贛榆</li>
<li>新海</li>
<li>東海</li>
<li>灌云</li>
<li>灌南</li>
</ul>
</div>

</div>

</body>
</html>

前一頁(yè):24款實(shí)用的翻頁(yè)頁(yè)碼css代碼

后一頁(yè):利用DIV+CSS制作浮動(dòng)廣告,沒(méi)有用到多少javascript,全是css

相關(guān)閱讀: 收集各種游覽器禁止javascript的方法; httpd.ini一些參數(shù)說(shuō)明; python+appium自動(dòng)化測(cè)試-滑動(dòng); 留言板留言板V7.2; 利用CSS中的float屬性實(shí)現(xiàn)文字環(huán)繞圖片的效果; 微信公眾平臺(tái); 旅行社手機(jī)網(wǎng)站模板10; asp遠(yuǎn)程調(diào)用XML

共有0條關(guān)于《利div+css做的柱狀圖，代碼超級(jí)簡(jiǎn)潔》的評(píng)論: 發(fā)表評(píng)論

正在加載評(píng)論......

返回頂部發(fā)表評(píng)論

呢稱(chēng):
表情:
內(nèi) 容:	評(píng)論內(nèi)容:不能超過(guò) 1000 字,需審核,請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。
驗(yàn)證碼:

網(wǎng)友評(píng)論聲明,請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。

您發(fā)布的評(píng)論即表示同意遵守以下條款:
一、不得利用本站危害國(guó)家安全、泄露國(guó)家秘密,不得侵犯國(guó)家、社會(huì)、集體和公民的合法權(quán)益;
二、不得發(fā)布國(guó)家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對(duì)自己在本站的言論和行為負(fù)責(zé);
三、本站對(duì)您所發(fā)布內(nèi)容擁有處置權(quán)。

更多信息>>欄目類(lèi)別選擇: 百度小程序開(kāi)發(fā); 微信小程序開(kāi)發(fā); 微信公眾號(hào)開(kāi)發(fā); uni-app; asp函數(shù)庫(kù); ASP; DIV+CSS; HTML; python

更多>>同類(lèi)信息: jquery設(shè)置或獲取修改classname; 利用css3.0寫(xiě)出一個(gè)音樂(lè)播放的唱片碟盤(pán)的效果; 利用css中的scale()實(shí)現(xiàn)放大縮小效果; 利用background-color:#000000a8在背景顏色16進(jìn)制代碼之后加字母加上數(shù)字讓背景色透明; css背景使用base64編碼或者將base64編碼放在img圖片標(biāo)簽中; 利用css3中的-webkit-font-smoothing把網(wǎng)頁(yè)文字的毛邊去掉

更多>>最新添加文章: dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT; Android移動(dòng)端自動(dòng)化測(cè)試：使用UIAutomatorViewer與Selenium定位元素; 抖音直播音掛載小雪花懂車(chē)帝小程序; javascript獲取瀏覽器指紋可以用來(lái)做投票; 火狐Mozilla Firefox出現(xiàn)：無(wú)法載入您的Firefox配置文件它可能已經(jīng)丟失或是無(wú)法訪問(wèn) 問(wèn)題解決集合處理辦法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑; python通過(guò)代碼修改pip下載源讓下載庫(kù)飛起; python里面requests.post返回的res.text還有其它的嗎

更多>>隨機(jī)抽取信息: 深山留言板過(guò)年回家效果; Python PyInstaller安裝和使用教程（詳解版）; 利用javascript來(lái)靜態(tài)添加表格行; 07 問(wèn)題錯(cuò)誤整理程序目錄權(quán)限父路徑?jīng)]打開(kāi)錯(cuò)誤; 控制背景色; 超簡(jiǎn)潔版式留言板模板

更多標(biāo)簽熱門(mén)標(biāo)簽

SEO 版權(quán)聲明組件建立日期 265 縣獲取替換快捷對(duì)象 word-break 保留我想你選擇符首字母模板 flash 透明憂化選項(xiàng)卡面板框架顯示 float qq right Request function 移動(dòng) 省市 flush 游戲 important 右擊彈出跳轉(zhuǎn) DIV+CSS做的透明菜單兼容IE、FF等倒計(jì)時(shí) 選項(xiàng) 工作室輪流利用position把div放在flash上上傳代碼 css 省略 time 用戶(hù)體驗(yàn) 數(shù)據(jù)庫(kù) csss JS效果翻滾左右

能看的av_午夜黄色av_在线观看国产视频_天天爱综合_国产精品亚洲成在人线_日韩一

利div+css做的柱狀圖，代碼超級(jí)簡(jiǎn)潔