模仿海内网的投票结果条形图
分类：技术学习 | 时间：2008-07-29 10:55 | 阅读：1619人/次 | 标签：
用CSS制作的投票结果条形图，模仿海内网。挺简单的，但效果却很好很漂亮，用程序控制起来也非常容易。
演示：http://www.lisijie.com.cn/demo/hainei_vote.html
XML/HTML代码
- <!doctype html public "-//w3c//dtd html 4.0 transitional//en">
- <html>
- <head>
- <title>海内网的投票结果条形图</title>
- <meta name="author" content="李思杰 www.lisijie.com.cn">
- </head>
- <style type="text/css">
- body,td,th {font-size:12px;}
- table {width:600px}
- caption {font-weight:bold;}
- th {text-align:right;font-weight:normal}
- .bg {background:#f0f0f0;width:400px;}
- strong {display:block;border:1px solid;}
- i {overflow:hidden;border:1px solid;border-bottom:none;height:8px;display:block}
- /*定义图形颜色*/
- .color1 {color:#c18f5a}
- .color1 strong {background:#e7ab6d;border-color:#c18f5a;}
- .color1 i {border-color:#f7ca9b;}
- .color2 {color:#478F45}
- .color2 strong {background:#5DBC5B;border-color:#478F45;}
- .color2 i {border-color:#BDE875}
- .color3 {color:#586E97}
- .color3 strong {background:#6C81B6;border-color:#586E97;}
- .color3 i {border-color:#9EB5F0}
- .color4 {color:#8AABB4}
- .color4 strong {background:#A5CBD6;border-color:#8AABB4;}
- .color4 i {border-color:#AEE7F8}
- .color5 {color:#B0248D}
- .color5 strong {background:#D843B3;border-color:#B0248D}
- .color5 i {border-color:#FB85DF}
- .color6 {color:#67B410}
- .color6 strong {background:#C2F263;border-color:#67B410;}
- .color6 i {border-color:#E2FEA7}
- </style>
- <body>
- <table>
- <caption>有一天早上醒来你发现你可以隐身了，你会做的第一件事是？</caption>
- <tr>
- <th class="color1">去银行搬钱</th>
- <td><div class="bg color1"><strong style="width:38%"><i></i></strong></div></td>
- <td>38%</td>
- </tr>
- <tr>
- <th class="color2">去澡堂子看免费人体展</th>
- <td><div class="bg color2"><strong style="width:5%"><i></i></strong></div></td>
- <td>5%</td>
- </tr>
- <tr>
- <th class="color3">去痛扁一顿你最恨的人</th>
- <td><div class="bg color3"><strong style="width:11%"><i></i></strong></div></td>
- <td>11%</td>
- </tr>
- <tr>
- <th class="color4">去中南海怀仁堂刻字“总理们辛苦了“</th>
- <td><div class="bg color4"><strong style="width:4%"><i></i></strong></div></td>
- <td>4%</td>
- </tr>
- <tr>
- <th class="color5">抽自己几个大嘴巴看看醒没醒</th>
- <td><div class="bg color5"><strong style="width:32%"><i></i></strong></div></td>
- <td>32%</td>
- </tr>
- <tr>
- <th class="color6">马上打车去医院</th>
- <td><div class="bg color6"><strong style="width:10%"><i></i></strong></div></td>
- <td>10%</td>
- </tr>
- </table>
- </body>
- </html>
本站提供网站建设/程序开发/模板定制服务，价格从优，在线交谈
CSS的优势体现出来了~
Jesse啊,给发了封邮件,请检查