css给你灵感--css动态图表设计大全

Freeren希望以下图表的设计制作，能给做网站设计的你提供些许灵感。如有更好的图表设计，可以留言哦。

图表一

这是最简单的一个

Region 1

25%

Region 2

55%

Region 3

75%

需要的图片有这么三个

代码如下：

<style> <!-- #grath1 { margin: 0; padding: 0; } #grath1 dt { position: relative; /* IE is dumb */ clear: both; display: block; float: left; width: 104px; height: 20px; line-height: 20px; margin-right: 17px; font-size: .75em; text-align: right; } #grath1 dd { position: relative; /* IE is dumb */ display: block; float: left; width: 197px; height: 20px; margin: 0 0 15px; background: url("g_colorbar.jpg"); } * html #grath1 dd { float: none; } /* IE is dumb; Quick IE hack, apply favorite filter methods for wider browser compatibility */ #grath1 dd div { position: relative; background: url("g_colorbar2.jpg"); height: 20px; width: 75%; text-align:right; } #grath1 dd div strong { position: absolute; right: -5px; top: -2px; display: block; background: url("g_marker.gif"); height: 24px; width: 9px; text-align: left; text-indent: -9999px; overflow: hidden; } --> </style> <dl id="grath1"> <dt>Region 1</dt> <dd> <div style="width:25%;"><strong>25%</strong></div> </dd> <dt>Region 2</dt> <dd> <div style="width:55%;"><strong>55%</strong></div> </dd> <dt>Region 3</dt> <dd> <div style="width:75%;"><strong>75%</strong></div> </dd> </dl>

图表二

增加一个

图表三

Region 2

55%

20%

图片有三个

代码如下：

<style type="text/css" media="all"> <!-- dl#grath2 { margin: 0; padding: 0; } #grath2 dt { position: relative; /* IE is dumb */ clear: both; display: block; float: left; width: 104px; height: 12px; line-height: 12px; margin-right: 17px; font-size: .75em; text-align: right; } #grath2 dd { position: relative; /* IE is dumb */ display: block; float: left; width: 197px; height: 12px; margin: 0 0 20px; background: url("g_colorbar.gif") repeat-x; border:5px solid #000; } * html #grath2 dd { float: none; } /* IE is dumb; Quick IE hack, apply favorite filter methods for wider browser compatibility */ #grath2 dd div { position:absolute; background: url("g_colorbar2.gif") repeat-x; height: 12px; width: 100%; text-align:right; } #grath2 dd div.grath3 { background: url("g_colorbar3.gif") repeat-x; } #grath2 dd div span { position: absolute; right: -5px; top: -2px; display: block; background: url("g_marker_1.gif") no-repeat; height: 15px; width: 9px; text-align: left; text-indent: -9999px; cursor:w-resize; } #grath2 dd div strong{ position: absolute; right: -8px; top: -20px; display: block; font-size:11px; width:auto; height:12px; text-indent:1px; border:1px solid #ddd; background:#efefef; cursor:pointer; } --> </style> <dl id="grath2"> <dt>Region 2</dt> <dd> <div style="width:55%;"><span><strong>55%</strong></span></div><div style="width:20%;" class="grath3"><span><strong>20%</strong></span></div> </dd> </dl>

图表四

<style> <!-- #grath3 { background:url(graph1.gif) no-repeat; width:402px; height:304px; padding-top:40px; } #grath3 dl { margin: 0; padding: 0; position:relative; display:block; height:75px; } #grath3 dd { position: relative; /* IE is dumb */ display: block; float: left; width: 318px; height: 20px; margin-left: 53px; } * html #grath3 dd { float: none; } /* IE is dumb; Quick IE hack, apply favorite filter methods for wider browser compatibility */ #grath3 dd div { position: relative; height: 20px; line-height:20px; width: 100%; text-align:center; border-width:1px 1px 1px 0px; border-color:#000; border-style:solid; margin-bottom:-1px; } #grath3 dd div strong { display: block; font-size:11px; color:#fff; } --> </style> <div id="grath3"> <dl> <dd> <div style="width:80px; background:#506c46;"><strong>42</strong></div> </dd> <dd> <div style="width:170px; background:#bf8f46;"><strong>85</strong></div> </dd> <dd> <div style="width:280px; background:#51637a;"><strong>140</strong></div> </dd> </dl> <dl> <dd> <div style="width:120px; background:#506c46;"><strong>60</strong></div> </dd> <dd> <div style="width:200px; background:#bf8f46;"><strong>100</strong></div> </dd> <dd> <div style="width:80px; background:#51637a;"><strong>40</strong></div> </dd> </dl> <dl> <dd> <div style="width:40px; background:#506c46;"><strong>20</strong></div> </dd> <dd> <div style="width:120px; background:#bf8f46;"><strong>60</strong></div> </dd> <dd> <div style="width:60px; background:#51637a;"><strong>30</strong></div> </dd> </dl> </div>

图表五

<style type="text/css"> <!-- #vertgraph { width: 325px; height: 241px; position: relative; background:url(graph0.gif) no-repeat; padding-left:76px; padding-top:60px; } #vertgraph ul { width: 300px; height: 196px; margin: 0; padding: 0; vertical-align:bottom; position:relative; } #vertgraph ul li { line-height:40px; width:25px; color:#fff; text-align:center; position:absolute; bottom:0px; font-size:12px; } #vertgraph li.critical {left:25px; background-color:#9f6384 ; } #vertgraph li.high {left:100px; background-color:#d8ab65; } #vertgraph li.medium {left:175px; background-color:#628193; } #vertgraph li.low {left:250px; background-color:#687f70; } --> </style> <div id="vertgraph"> <ul> <li class="critical" style="height: 75%;">75%</li> <li class="high" style="height: 35%;">35%</li> <li class="medium" style="height: 25%;">25%</li> <li class="low" style="height: 45%;">45%</li> </ul> </div>

图表六

<style type="text/css"> <!-- #vertgraph2 { width: 325px; height: 241px; position: relative; background:url(graph0.gif) no-repeat; padding-left:76px; padding-top:60px; } #vertgraph2 ul { width: 300px; height: 196px; margin: 0; padding: 0; vertical-align:bottom; position:relative; } #vertgraph2 ul li { line-height:40px; width:15px; color:#fff; text-align:center; position:absolute; bottom:0px; font-size:12px; } #vertgraph2 ul li span{ top:-30px; left:-1px; position:relative; cursor:pointer; } #vertgraph2 li.critical {left:15px; background-color:#9f6384; } #vertgraph2 li.critical2 {left:30px; background-color:#d8ab65; } #vertgraph2 li.critical3 {left:45px; background-color:#628193; } #vertgraph2 li.high {left:90px; background-color:#d8ab65; } #vertgraph2 li.high2 {left:105px; background-color:#687f70; } #vertgraph2 li.high3 {left:120px; background-color:#628193; } #vertgraph2 li.medium {left:165px; background-color:#9f6384; } #vertgraph2 li.medium2 {left:180px; background-color:#d8ab65; } #vertgraph2 li.medium3 {left:195px; background-color:#628193; } #vertgraph2 li.low {left:240px; background-color:#687f70; } #vertgraph2 li.low2 {left:255px; background-color:#d8ab65; } #vertgraph2 li.low3 {left:270px; background-color:#628193; } --> </style><div id="vertgraph2"> <ul> <li class="critical" style="height: 75%;"><span>75%</span></li> <li class="critical2" style="height: 45%;"><span>45%</span></li> <li class="critical3" style="height: 25%;"><span>25%</span></li> <li class="high" style="height: 55%;"><span>55%</span></li> <li class="high2" style="height: 85%;"><span>85%</span></li> <li class="high3" style="height: 35%;"><span>35%</span></li> <li class="medium" style="height: 20%;"><span>20%</span></li> <li class="medium2" style="height: 40%;"><span>40%</span></li> <li class="medium3" style="height: 25%;"><span>25%</span></li> <li class="low" style="height: 45%;"><span>45%</span></li> <li class="low2" style="height: 65%;"><span>65%</span></li> <li class="low3" style="height: 75%;"><span>75%</span></li> </ul> </div>

图表七

Css 图表

 

说明文字75%

<style type="text/css"> <!-- #vertgraph3 { margin: 0; padding: 0; background:url(grath3.gif) no-repeat; height:304px; width:129px; } #vertgraph3 dt { position: relative; /* IE is dumb */ clear: both; display: block; width: 74px; height: 30px; line-height: 30px; font-size:14px; font-weight:bold; color:#f9e39f; text-align:left; padding-left:55px; } #vertgraph3 dd { position: relative; /* IE is dumb */ display: block; float: left; width: 129px; height: 244px; margin: 0; } * html #vertgraph3 dd { float: none; } /* IE is dumb; Quick IE hack, apply favorite filter methods for wider browser compatibility */ #vertgraph3 dd div { background:url(line.gif) bottom no-repeat; width: 100%; } #vertgraph3 strong { left: 52px; position:relative; display: block; height:67px; line-height:18px; width: 67px; font-size:12px; text-align:center; overflow: hidden; cursor:pointer; color:#009900; } #vertgraph3 strong span{ font-size:18px; color:#FFFFFF; } --> </style><dl id="vertgraph3"> <dt>Css 图表</dt> <dd> <div style="height:25%;"></div><strong style="bottom:58px; background:url(tishi.gif) no-repeat; ">说明文字<span style="font-size:18px;">75%</span></strong> </dd> </dl>