CSS条状图表:复合型

* html dd { float: none; }

运行代码框
<style> dl { margin: 0; padding: 0; } 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; } dd { position: relative; /* IE is dumb */ display: block; float: left; width: 197px; height: 20px; margin: 0 0 15px; background: url("http://www.ximicc.com/attachments/month_0803/n20083922945.jpg"); } * html dd { float: none; } /* IE is dumb; Quick IE hack, apply favorite filter methods for wider browser compatibility */ dd div { position: relative; background: url("http://www.ximicc.com/attachments/month_0803/e20083922951.jpg"); height: 20px; text-align:right; } dd div strong { position: absolute; right: -5px; top: -2px; display: block; background: url("http://www.ximicc.com/attachments/month_0803/b20083922100.gif"); height: 24px; width: 9px; text-align: left; text-indent: -9999px; overflow: hidden; } </style> <dl> <dt>Spring</dt> <dd> <div style="width:25%;"><strong>25%</strong></div> </dd> <dt>Ximicc</dt> <dd> <div style="width:55%;"><strong>55%</strong></div> </dd> <dt>Technique</dt> <dd> <div style="width:75%;"><strong>75%</strong></div> </dd> </dl>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

输入您的搜索字词 提交搜索表单