免费模板网
当前位置: 首页>CSS图表> CSS无图水平分节图表

CSS图表

CSS无图水平分节图表

分类:CSS图表 时间:2009/6/5 16:08:35 浏览:4045 次

演示效果截图

 CSS无图水平分节图表

CSS代码

<style type="text/css">
html * { margin: 0; padding: 0; border: 0; }
body { text-align: center; }
h1 { padding: 0 0 5px 0; text-align: center;
width: 400px; margin: 0 auto 10px auto; border-bottom: 1px solid #8f8f8f; }
p#contact { font: 10pt Arial, sans-serif; width: 398px; margin: 0 auto; 
padding-top: 7px; text-align: left; line-height: 140%; }
a:link, a:visited, a:hover { color: rgb(32,108,223); font-weight: bold; 
text-decoration: none; }
a:hover { color: #cc0000; font-weight: bold; }
div#container { position: relative; margin: 0 auto; padding: 0; 
text-align: left; top: 80px; width: 250px; }
div.box-wrap { position: relative; width: 200px; height: 21px; 
top: 0; left: 0; margin: 0; padding: 0; }
div.box1 { position: absolute; height: 20px; width: 30%; left: 0; 
background-color: #eeeeee; z-index: 1; font-size: 0; }
div.box2 { position: absolute; height: 20px; width: 30%; left: 30%; 
background-color: #dddddd; z-index: 1; font-size: 0; }
div.box3 { position: absolute; height: 20px; width: 30%; left: 60%; 
background-color: #bbbbbb; z-index: 1; font-size: 0; }
div.box4 { position: absolute; height: 20px; width: 10%; left: 90%; 
background-color: #bbbbbb; z-index: 1; font-size: 0; }
div.target { position: absolute; height: 20px; width: 1px; left: 32px; 
top: 0; background-color: #cc0000; z-index: 7; font-size: 0; }
div.actual { position: absolute; height: 8px; left: 0px; top: 6px; 
background-color: #000000; font-size: 0; z-index: 5; font-size: 0; }
div.actualMAX { position: absolute; height: 8px; left: 0px; top: 6px; 
background-color: #70a1d8; font-size: 0; z-index: 5; font-size: 0; }
div.actualPART { position: absolute; height: 8px; left: 0px; top: 6px; 
background-color: #0a50a1; font-size: 0; z-index: 5; font-size: 0; }
div.mylabel { position: relative; height: 20px; width: 145px; left: -155px; 
top: 2px; background-color: #fff; z-index: 7; font-size: 0; color: #000000; 
font: 10pt, Arial, sans-serif; text-align: right; }
div.scale-tb1 { padding: 0; margin: 0;font-size: 0;width: 200px;border: 0;	
position: relative; top: 10px; left: 0px; border-top: 1px solid #8f8f8f; }
div.scale-tb2 {	padding: 0; margin: 0; font-size: 0; width: 200px; border: 0; 
position: relative; top: 0px; left: 0px; }
div.sc21 { position: absolute; height: 7px; width: 1px; left: 0px; top: 0px; 
background-color: #8f8f8f; z-index: 7; font-size: 0; }
div.sc22 { position: absolute; height: 7px; width: 1px; left: 39px; top: 0px; 
background-color: #8f8f8f; z-index: 7; font-size: 0; }
div.sc23 { position: absolute; height: 7px; width: 1px; left: 79px; top: 0px; 
background-color: #8f8f8f; z-index: 7; font-size: 0; }
div.sc24 { position: absolute; height: 7px; width: 1px; left: 119px; top: 0px; 
background-color: #8f8f8f; z-index: 7; font-size: 0; }
div.sc25 { position: absolute; height: 7px; width: 1px; left: 159px; top: 0px; 
background-color: #8f8f8f; z-index: 7; font-size: 0; }
div.sc26 { position: absolute; height: 7px; width: 1px; left: 199px; top: 0px; 
background-color: #8f8f8f; z-index: 7; font-size: 0; }
div.sc31 { position: absolute; height: 7px; width: 1px; left: 0px; top: 0px; 
background-color: #8f8f8f; z-index: 7; font-size: 0; }
div.sc32 { position: absolute; height: 7px; width: 1px; left: 39px; top: 0px; 
background-color: #8f8f8f; z-index: 7; font-size: 0; }
div.sc33 { position: absolute; height: 7px; width: 1px; left: 79px; top: 0px; 
background-color: #8f8f8f; z-index: 7; font-size: 0; }
div.sc34 { position: absolute; height: 7px; width: 1px; left: 119px; top: 0px; 
background-color: #8f8f8f; z-index: 7; font-size: 0; }
div.sc35 { position: absolute; height: 7px; width: 1px; left: 159px; top: 0px; 
background-color: #8f8f8f; z-index: 7; font-size: 0; }
div.sc36 { position: absolute; height: 7px; width: 1px; left: 199px; top: 0px; 
background-color: #8f8f8f; z-index: 7; font-size: 0; }
div.cap21 { position: absolute; top: 40px; left: -2px; width: 15px; 
font: 8pt Arial, sans-serif; text-align: center; color: #575757; }
div.cap22 { position: absolute; top: 40px; left: 35px; width: 15px; 
font: 8pt Arial, sans-serif; text-align: center; color: #575757; }
div.cap23 { position: absolute; top: 40px; left: 71px; width: 15px; 
font: 8pt Arial, sans-serif; text-align: center; color: #575757; }
div.cap24 { position: absolute; top: 40px; left: 112px; width: 15px; 
font: 8pt Arial, sans-serif; text-align: center; color: #575757; }
div.cap25 { position: absolute; top: 40px; left: 152px; width: 15px; 
font: 8pt Arial, sans-serif; text-align: center; color: #575757; }
div.cap26 { position: absolute; top: 40px; left: 191px; width: 15px; 
font: 8pt Arial, sans-serif; text-align: center; color: #575757; }
div.cap31 { position: absolute; top: 29px; left: -2px; width: 15px; 
font: 8pt Arial, sans-serif; text-align: center; color: #575757; }
div.cap32 { position: absolute; top: 29px; left: 35px; width: 15px; 
font: 8pt Arial, sans-serif; text-align: center; color: #575757; }
div.cap33 { position: absolute; top: 29px; left: 71px; width: 15px; 
font: 8pt Arial, sans-serif; text-align: center; color: #575757; }
div.cap34 { position: absolute; top: 29px; left: 112px; width: 15px; 
font: 8pt Arial, sans-serif; text-align: center; color: #575757; }
div.cap35 { position: absolute; top: 29px; left: 152px; width: 15px; 
font: 8pt Arial, sans-serif; text-align: center; color: #575757; }
div.cap36 { position: absolute; top: 29px; left: 191px; width: 15px; 
font: 8pt Arial, sans-serif; text-align: center; color: #575757; }
</style>

HTML代码

<div id="container">
<div class="box-wrap">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div class="target"></div>
	<div class="actual" style="width: 37%"></div>
	<div class="mylabel">Client ABC</div>
</div>
	<p style="height: 15px;"></p>
<div class="box-wrap">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div class="target"></div>
	<div class="actual" style="width: 47%"></div>
	<div class="mylabel">Client KLM</div>
</div>
	<p style="height: 15px;"></p>
<div class="box-wrap">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div class="target"></div>
	<div class="actual" style="width: 57%"></div>
	<div class="mylabel">Client EFG</div>
  	<div class="cap21">0%</div>
  	<div class="cap22">5%</div>
  	<div class="cap23">10%</div>
  	<div class="cap24">15%</div>
  	<div class="cap25">20%</div>
  	<div class="cap26">25%</div>
    <div class="scale-tb1">
	<div class="sc21"></div>
	<div class="sc22"></div>
	<div class="sc23"></div>
	<div class="sc24"></div>
	<div class="sc25"></div>
	<div class="sc26"></div>
    </div>
</div>
	<p style="height: 50px;"></p>
	<p style="height: 50px;"></p>
<div class="box-wrap">
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>
	<div class="target"></div>
  	<div class="actualMAX" style="width: 20.12%"></div>
  	<div class="actualPART" style="width: 11.92%"></div>
	<div class="cap31">0%</div>
	<div class="cap32">5%</div>
	<div class="cap33">10%</div>
	<div class="cap34">15%</div>
	<div class="cap35">20%</div>
	<div class="cap36">25%</div>	
	<div class="mylabel">Client XYZ</div>
    <div class="scale-tb2">
	<div class="sc31"></div>
	<div class="sc32"></div>
	<div class="sc33"></div>
	<div class="sc34"></div>
	<div class="sc35"></div>
	<div class="sc36"></div>
    </div>	
</div>
</div>
<h1>www.865171.cn</h1>

上一篇:CSS控制背景图片产生的图表效果

下一篇:三种风格的CSS图表(点图、线图、柱状图)

站长常用工具

最新图表

热门图表

赞助商链接