网页柱状图，CSS实现的网页特效代码

时间:2008-07-24 08:51:12  来源:  作者:  【背景色 】

<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:#adfe12 url(/upimg/allimg/080724/1656450.png) repeat-x scroll 0 0 !important; background:#adfe12 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(/upimg/userup//0807/241A512FO.gif) no-repeat 0 0; } li.south { left:80px; background:#ddd url(/upimg/userup//0807/241A512FO.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:103%; top:-11pt; } </STYLE> <UL id=q-graph> <LI class=qtr id=q1>Q1 <UL> <LI class="north bar" style="HEIGHT: 111px">18 </LI> <LI class="south bar" style="HEIGHT: 99px">16 </LI></UL></LI> <LI class=qtr id=q2>Q2 <UL> <LI class="north bar" style="HEIGHT: 198px">32 </LI> <LI class="south bar" style="HEIGHT: 210px">34 </LI></UL></LI> <LI class=qtr id=q3>Q3 <UL> <LI class="north bar" style="HEIGHT: 260px">43 </LI> <LI class="south bar" style="HEIGHT: 198px">32 </LI></UL></LI> <LI class=qtr id=q4>Q4 <UL> <LI class="north bar" style="HEIGHT: 111px">18 </LI> <LI class="south bar" style="HEIGHT: 198px">32 </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>

    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]