div css3屬性制作圓形和三角形圖表統計數據代碼



153 611 204



特效描述:divcss3屬性制作 圓形和三角形圖表 統計數據代碼,圓形和三角形圖表統計數據

代碼結構

1. 引入CSS

<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />

2. HTML代碼

<div id="wrapper">
	<div id="q2_2010">
	<div id="q1_2010">
	<div id="q4_2009">
	<div id="q3_2009">
	<div id="q2_2009">
	<div id="q1_2005">
		<div id="labels">
			<ul>
				<li><span></span>Internet Explorer</li>
				<li><span></span>Mozilla Firefox</li>
				<li><span></span>Google Chrome</li>
				<li><span></span>Safari</li>
				<li><span></span>Opera</li>
			</ul>
		</div>
		<div id="pie_ico">Pie &raquo;</div>
		<div id="pyr_ico">&laquo; Pyramid</div>
		<div id="percentage_wrapper">
			<div id="percentage">
				<ul>
					<li><p>60.14%</p><p>61.79%</p><p>63.90%</p><p>67.02%</p><p>68.28%</p><p>89.68%</p></li>
					<li><p>24.98%</p><p>24.56%</p><p>24.39%</p><p>23.28%</p><p>23.22%</p><p>6.83%</p></li>
					<li><p>7.14%</p><p>6.03%</p><p>4.27%</p><p>3.08%</p><p>2.35%</p><p>0%</p></li>
					<li><p>5.10%</p><p>4.91%</p><p>4.64%</p><p>4.35%</p><p>3.89%</p><p>2.36%</p></li>
					<li><p>2.66%</p><p>2.73%</p><p>2.52%</p><p>2.29%</p><p>2.27%</p><p>1.15%</p></li>
				</ul>
			</div>
		</div>
		<div id="slider">
			<div id="chart_holder">
				<div id="pie_chart">
					<ul>
						<li id="c1_r"><p><span class="pie_left"></span></p></li> 	
						<li id="c1_l"><p><span class="pie_right"></span></p></li>
						<li id="c2_r"><p><span class="pie_left"></span></p></li> 	
						<li id="c2_l"><p><span class="pie_right"></span></p></li>
						<li id="c3_r"><p><span class="pie_left"></span></p></li> 	
						<li id="c3_l"><p><span class="pie_right"></span></p></li>
						<li id="c4_r"><p><span class="pie_left"></span></p></li> 	
						<li id="c4_l"><p><span class="pie_right"></span></p></li>
						<li id="c5_r"><p><span class="pie_left"></span></p></li> 	
						<li id="c5_l"><p><span class="pie_right"></span></p></li>
					</ul>
				</div>
				<div id="pyr_chart">
					<ul>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>
		<div id="btn_panel">
			<ul>
				<li><a href="#q1_2005"><span>Q1</span><span>2005</span></a></li>
				<li><a href="#q2_2009"><span>Q2</span><span>2009</span></a></li>
				<li><a href="#q3_2009"><span>Q3</span><span>2010</span></a></li>
				<li><a href="#q4_2009"><span>Q4</span><span>2011</span></a></li>
				<li><a href="#q1_2010"><span>Q1</span><span>2012</span></a></li>
				<li><a href="#q2_2010"><span>Q2</span><span>2013</span></a></li>
			</ul>
		</div>
	</div> <!--q1_2005-->
	</div> <!--q2_2009-->
	</div> <!--q3_2009-->
	</div> <!--q4_2009-->
	</div> <!--q1_2010-->
	</div> <!--q2_2010-->
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 其他 圖片拖動 圖片拖拽 圖表
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子