粉嫩aⅴ一区二区三区,黄色网址中文字幕,久久午夜免费视频

利div+css做的柱狀圖，代碼超級簡潔

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

以下為詳細(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做的柱狀圖，代碼超級簡潔深山行者</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>合計</li>
<li>連云</li>
<li>贛榆</li>
<li>新海</li>
<li>東海</li>
<li>灌云</li>
<li>灌南</li>
</ul>
</div>

</div>

</body>
</html>

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

后一頁:利用DIV+CSS制作浮動廣告,沒有用到多少javascript,全是css

相關(guān)閱讀: 右下角彈出框帶關(guān)閉，非常不錯，可以用于后臺提示; 最新縣及縣以上1980年以來歷史行政區(qū)劃代碼大全截止2018年3月31日; 深山旅行社網(wǎng)站管理系統(tǒng)5.0發(fā)布; 深山旅行社網(wǎng)站管理系統(tǒng) v1.6; 紅色圣誕老人留言板模板; 模板自由切換; 淺談 Vista系統(tǒng)設(shè)置IIS7攻略; 愛度旅行網(wǎng)

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

正在加載評論......

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

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

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

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

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

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

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

更多>>隨機(jī)抽取信息: 連云港門窗制作; 深山行者留言系統(tǒng)V3.0 發(fā)布; uni-app開發(fā)微信小程序使用button的open-type為contact調(diào)用微信客服不能用view或者js調(diào)用; 右下角彈出框帶關(guān)閉，非常不錯，可以用于后臺提示; 連云港看網(wǎng); 穿越火線風(fēng)格-網(wǎng)吧留言本V4.3

更多標(biāo)簽熱門標(biāo)簽

頂部 Session 圖層表達(dá) 三級 VBScript link 注冊表調(diào)色器漢字 vista 網(wǎng)頁豎排設(shè)計關(guān)鍵字正則失效物理在線 iis 安裝建立日期例子 hack DropShadow submit 旅游 FTP ul weatherxml 閉合提示 lightbox 左右 ie5.5 市連云港旅游電影背景萬年歷無限許愿墻產(chǎn)品數(shù)據(jù) 替換邊界重疊按鈕版權(quán)聲明考試字節(jié)數(shù) 珍惜

国产免费av片在线观看-国产免费av观看-国产免费av电影-国产免费a-四虎网站在线观看-四虎网站在线

利div+css做的柱狀圖，代碼超級簡潔