CSS+ul 实现的柱状图 -- [DIV+CSS]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

CSS+ul 实现的柱状图

深山行者个人网站 2009/9/21 8:36:45 深山行者字体:大中小浏览 8660

以下为详细代码

<!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的柱状图实现——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的柱状图实现——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的柱状图实现——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等

相关阅读: 一个非常不错的文字的提示; 主流web2.0网站的配色参考方案; AJAX弹出提示信息效果与lightbox效果一样; 超级实用且不花哨的js代码大全( 1 ); 微信小程序转uni-app项目; CSS的十八般技巧; uni-app基础知识使用hidden条件显示; 页面文字变色、变大、还原

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: jquery设置或获取修改classname; 利用css3.0写出一个音乐播放的唱片碟盘的效果; 利用css中的scale()实现放大缩小效果; 利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明; css背景使用base64编码或者将base64编码放在img图片标签中; 利用css3中的-webkit-font-smoothing把网页文字的毛边去掉

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: 详细的百度蜘蛛爬行检测代码诠释; 连云港汽车门户网站; 键盘上shift键的奇妙用途; SEO工具让你网站忧化更加随心所欲; 仿淘宝首页商品分类列表效果; javascript时间显示01

更多标签热门标签

框架表达式随机上下左右县下拉框汉字强度 blog 返回快捷对联文件夹 flash 访问量广告万年历工作保护眼睛的电脑色 csss 理想加密处理背景色 link 网站地图利用position把div放在flash上编辑 meta 面板字母显示 maryabbsby IE8 滚动条 tags 默认高度百度 265 提交命名获得版权声明 slectindext 杈规 防止 time Excel clear div的高度