日韩一区在线视频,亚洲视频1区,日韩网站免费观看

CSS+ul 實現(xiàn)的柱狀圖

深山行者個人網(wǎng)站 2009/9/21 8:36:45 深山行者字體:大中小瀏覽 8331

以下為詳細代碼

<!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>
  <title> 基于CSS的柱狀圖實現(xiàn)——Dudo博客 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
 body {padding:0;margin:40px;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;}
 h3 {font-weight:normal;display:block;width:600px;text-align:center;}
 /*ul*/
 ul#q-graph {
  border:2px solid #0063be;
  background:#ffc;
  background:#ffc repeat-x scroll 0 0;
  height:300px !important;
  height:304px;
  width:600px;
  position:relative;
  list-style:none;
  margin:1.1em 1em 3.5em;
  padding:0;
 }
 #q-graph li {
  position:absolute;
  text-align:center;
  bottom:0;
  padding:0
  margin:0;
 }
  /* ul li */
 li.qtr {
  width:150px;
  height:300px;
  border-right:1px dotted #41a3e2;
  z-index:2;
 }
 li#q1 {left:0;}
 li#q2 {left:150px;}
 li#q3 {left:300px;}
 li#q4 {left:450px;border-right:none;}
 /* ul li ul */
 #q-graph ul {list-style:none;}
 /* ul li ul li */
 li.bar {
  width:34px;
  color:#fff;
 }
 li.north {
  left:36px;
  background:#ddd url(/UploadFiles/20090921/20090921083857776.gif) no-repeat 0 0;
 }
 li.south {
  left:80px;
  background:#ddd url(/UploadFiles/20090921/20090921083857776.gif) no-repeat -34px 0;
 }
  /* ul li divs */
 li#ticks {
  left:0;
  height:300px;
  width:100%;
  z-index:1;
 }
 div.ticks {
  position:relative;
  height:60px;
  border-top:1px dotted #41a3e2;
 }
 div.ticks:first-child {border-top:none;} /*only4 Firefx IE 7+*/
 div.ticks p {
  position:absolute;
  left:101%;
  top:-2px;
  color:#f00;
  font-weight:bold;
 }
  </style>
 </head>
 <body>
<ul id="q-graph">
 <li id="q1" class="qtr">Q1
  <ul>
   <li class="north bar">20</li>
   <li class="south bar">40</li>
  </ul></li>
 <li id="q2" class="qtr">Q2
  <ul>
   <li class="north bar">30</li>
   <li class="south bar">11</li>
  </ul></li>
 <li id="q3" class="qtr">Q3
  <ul>
   <li class="north bar">40</li>
   <li class="south bar">29</li>
  </ul></li>
 <li id="q4" class="qtr">Q4
  <ul>
   <li class="north bar"></li>
   <li class="south bar">0</li>
  </ul></li>
 <li id="ticks">
 <div class="ticks"><p>50</p></div>
 <div class="ticks"><p>40</p></div>
 <div class="ticks"><p>30</p></div>
 <div class="ticks"><p>20</p></div>
 <div class="ticks"><p>10</p></div></li>
</ul>
<script>
function qt(tid,qid){
 var Hs=document.getElementById(tid).offsetHeight-5
 var oObj=document.getElementById(qid).childNodes,k=oObj.length;
 for (var oi=0;oi<k-1;oi++){
  var obj=oObj[oi].getElementsByTagName("li"),j=obj.length
  for (var i=0;i<j;i++){
   if (obj[i].innerHTML!="" && parseInt(obj[i].innerHTML)>=0)
   obj[i].style.height=Hs*parseInt(obj[i].innerHTML)/50+oi+1
   else obj[i].style.display="none"
  }
 }
}
onload=function(){qt("ticks","q-graph")}
</script>
</body>
</html>

以下為詳細代碼

<!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>
  <title> 基于CSS的柱狀圖實現(xiàn)——Dudo博客 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
 body {padding:0;margin:40px;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;}
 h3 {font-weight:normal;display:block;width:600px;text-align:center;}
 /*ul*/
 ul#q-graph {
  border:2px solid #0063be;
  background:#ffc;
  background:#ffc repeat-x scroll 0 0;
  height:300px !important;
  height:304px;
  width:600px;
  position:relative;
  list-style:none;
  margin:1.1em 1em 3.5em;
  padding:0;
 }
 #q-graph li {
  position:absolute;
  text-align:center;
  bottom:0;
  padding:0
  margin:0;
 }
  /* ul li */
 li.qtr {
  width:150px;
  height:300px;
  border-right:1px dotted #41a3e2;
  z-index:2;
 }
 li#q1 {left:0;}
 li#q2 {left:150px;}
 li#q3 {left:300px;}
 li#q4 {left:450px;border-right:none;}
 /* ul li ul */
 #q-graph ul {list-style:none;}
 /* ul li ul li */
 li.bar {
  width:34px;
  color:#fff;
 }
 li.north {
  left:36px;
  background:#ddd url(/UploadFiles/20090921/20090921083857776.gif) no-repeat 0 0;
 }
 li.south {
  left:80px;
  background:#ddd url(/UploadFiles/20090921/20090921083857776.gif) no-repeat -34px 0;
 }
  /* ul li divs */
 li#ticks {
  left:0;
  height:300px;
  width:100%;
  z-index:1;
 }
 div.ticks {
  position:relative;
  height:60px;
  border-top:1px dotted #41a3e2;
 }
 div.ticks:first-child {border-top:none;} /*only4 Firefx IE 7+*/
 div.ticks p {
  position:absolute;
  left:101%;
  top:-2px;
  color:#f00;
  font-weight:bold;
 }
  </style>
 </head>
 <body>
<ul id="q-graph">
 <li id="q1" class="qtr">Q1
  <ul>
   <li class="north bar">20</li>
   <li class="south bar">10</li>
  </ul></li>
 <li id="q2" class="qtr">Q2
  <ul>
   <li class="north bar">30</li>
   <li class="south bar">11</li>
  </ul></li>
 <li id="q3" class="qtr">Q3
  <ul>
   <li class="north bar">46</li>
   <li class="south bar">29</li>
  </ul></li>
 <li id="q4" class="qtr">Q4
  <ul>
   <li class="north bar"></li>
   <li class="south bar">0</li>
  </ul></li>
 <li id="ticks">
 <div class="ticks"><p>50</p></div>
 <div class="ticks"><p>40</p></div>
 <div class="ticks"><p>46</p></div>
 <div class="ticks"><p>20</p></div>
 <div class="ticks"><p>10</p></div></li>
</ul>
<script>
function qt(tid,qid){
 var Hs=document.getElementById(tid).offsetHeight-5
 var oObj=document.getElementById(qid).getElementsByTagName("ul"),k=oObj.length;
 for (var oi=0;oi<k;oi++){
  var obj=oObj[oi].getElementsByTagName("li"),j=obj.length;
  for (var i=0;i<j;i++){
   if (obj[i].innerHTML!="" && parseInt(obj[i].innerHTML)>=0)
   obj[i].style.height=Hs*parseInt(obj[i].innerHTML)/50+oi+1
   else obj[i].style.display="none"
  }
 }
}
onload=function(){qt("ticks","q-graph")}
</script>
</body>
</html>

以下為詳細代碼

<!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>
  <title> 基于CSS的柱狀圖實現(xiàn)——Dudo博客 </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
	body {padding:0;margin:40px;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;}
	h3 {font-weight:normal;display:block;width:600px;text-align:center;}
	/*ul*/
	ul#q-graph {
		border:2px solid #0063be;
		background:#ffc;
		background:#ffc repeat-x scroll 0 0;
		height:300px !important;
		height:304px;
		width:600px;
		position:relative;
		list-style:none;
		margin:1.1em 1em 3.5em;
		padding:0;
	}
	#q-graph li {
		position:absolute;
		text-align:center;
		bottom:0;
		padding:0
		margin:0;
	}
		/* ul li */
	li.qtr {
		width:150px;
		height:300px;
		border-right:1px dotted #41a3e2;
		z-index:2;
	}
	li#q1 {left:0;}
	li#q2 {left:150px;}
	li#q3 {left:300px;}
	li#q4 {left:450px;border-right:none;}
	/* ul li ul */
	#q-graph ul {list-style:none;}
	/* ul li ul li */
	li.bar {
		width:34px;
		color:#fff;
	}
	li.north {
		left:36px;
		background:#ddd url(/UploadFiles/20090921/20090921083857776.gif) no-repeat 0 0;
	}
	li.south {
		left:80px;
		background:#ddd url(/UploadFiles/20090921/20090921083857776.gif) no-repeat -34px 0;
	}
		/* ul li divs */
	li#ticks {
		left:0;
		height:300px;
		width:100%;
		z-index:1;
	}
	div.ticks {
		position:relative;
		height:60px;
		border-top:1px dotted #41a3e2;
	}
	div.ticks:first-child {border-top:none;}	/*only4 Firefx IE 7+*/
	div.ticks p {
		position:absolute;
		left:101%;
		top:-2px;
		color:#f00;
		font-weight:bold;
	}
  </style>
 </head>
 <body>
<ul id="q-graph">
 <li id="q1" class="qtr">Q1
	 <ul>
	  <li class="north bar">20</li>
	  <li class="south bar">10</li>
	 </ul></li>
 <li id="q2" class="qtr">Q2
	 <ul>
	  <li class="north bar">30</li>
	  <li class="south bar">11</li>
	 </ul></li>
 <li id="q3" class="qtr">Q3
	 <ul>
	  <li class="north bar">40</li>
	  <li class="south bar">29</li>
	 </ul></li>
 <li id="q4" class="qtr">Q4
	 <ul>
	  <li class="north bar"></li>
	  <li class="south bar">0</li>
	 </ul></li>
 <li id="ticks">
	<div class="ticks"><p>50</p></div>
	<div class="ticks"><p>40</p></div>
	<div class="ticks"><p>30</p></div>
	<div class="ticks"><p>20</p></div>
	<div class="ticks"><p>10</p></div></li>
</ul>
<script>
function qt(tid,qid){
	var Hs=document.getElementById(tid).offsetHeight-5
	var oObj=document.getElementById(qid).getElementsByTagName("li"),k=oObj.length;
	for (var oi=0;oi<k-1;oi++){
               if(oObj[oi].id!=''){
		var obj=oObj[oi].getElementsByTagName("li"),j=obj.length
		for (var i=0;i<j;i++){
			if (obj[i].innerHTML!="" && parseInt(obj[i].innerHTML)>=0)
			{obj[i].style.height=Hs*parseInt(obj[i].innerHTML)/50+oi+1+"px"}
			else {obj[i].style.display="none"}
		}}
	}
}
onload=function(){qt("ticks","q-graph")}
</script>
</body>
</html>

前一頁:仿taobao效果拼音字母檢索功能

后一頁:DIV+CSS做的透明菜單兼容IE、FF等

相關(guān)閱讀: 網(wǎng)頁調(diào)用msn/qq/email記錄，淘寶，skype掛在網(wǎng)頁上; Vista中使用IIS 7.0三個常見問題; asp文章內(nèi)容自定義分頁; optgroup 標(biāo)簽; 四川省中國青年旅行社長順分社; 利用DIV+CSS制作右下角彈出留言板; 內(nèi)蒙古香格里拉旅行社有限公司; 酒店客房預(yù)訂

共有0條關(guān)于《CSS+ul 實現(xiàn)的柱狀圖》的評論: 發(fā)表評論

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

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

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

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

您發(fā)布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權(quán)益;
二、不得發(fā)布國家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對自己在本站的言論和行為負責(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()實現(xiàn)放大縮小效果; 利用background-color:#000000a8在背景顏色16進制代碼之后加字母加上數(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還有其它的嗎

更多>>隨機抽取信息: 關(guān)于網(wǎng)頁中pt和px的單位換算！; ASP+Access隨機讀取數(shù)據(jù)庫記錄的方法; 旅行社網(wǎng)站模板默認風(fēng)格5; 13種樣式檢測QQ是否在線的代碼; 幾種javascript導(dǎo)航菜單; 移動層，并且保存各個層的位置，可以方便的制作成為一個動態(tài)的頁面

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

后臺 strong 縮放 skype 數(shù)據(jù)庫鏈接絕對九宮格個人 hidden 路徑深山v1.0旅行社網(wǎng)站管理系統(tǒng) 彈窗 flash IE8 上一頁廣告站長 font-size 學(xué)習(xí) loading 焦點操作 Javascript實現(xiàn)CSS代碼高亮顯示1 變幻 weatherxml 樹型在線思考 VBScript 代碼 css 滾動調(diào)色板左右左右全 input 文件夾 FTP button 網(wǎng)站地圖模板彩色 dw 訪問量 ewebeditor 等高參數(shù) 柱狀 ie5.5 media 愛墻點擊

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

CSS+ul 實現(xiàn)的柱狀圖