题目有点标题党了先来个图弥补一下。怎么样是不是有点心动了完全CSSDiv打造。再看一下简单而又漂亮的是不是也还可以呢下面看下代码是怎样的css代码1 .graph {2 position: relative;3 width: 200px;4 border: 1px solid #B1D632;5 padding: 2px;6 margin-bottom: .5em;7 }8 .graph .bar {9 display: block;10 position: relative;11 background: #B1D632;12 text-align: center;13 color: #333;14 height: 2em;15 line-height: 2em;16 }17 .graph .bar span { position: absolute; left: 1em; }HTML代码1 h3简单进度条/h32 div classgraph3 strong classbar stylewidth: 54%;span54%/span/strong4 /div5 div classgraph6 strong classbar stylewidth: 8%;span8%/span/strong7 /div8只要改变bar的width就可以随意改变进度条的长度简单易用吧。再看上面复杂的代码又是怎么实现的CSS代码1 /* 复杂进度条 */2 dl {3 margin: 0;4 padding: 0;5 }6 dt {7 position: relative;8 clear: both;9 display: block;10 float: left;11 width: 104px;12 height: 20px;13 line-height: 20px;14 margin-right: 17px;15 font-size: .75em;16 text-align: right;17 }18 dd {19 position: relative;20 display: block;21 float: left;22 width: 197px;23 height: 20px;24 margin: 0 0 15px;25 background: url(g_colorbar.jpg);26 }27 * html dd { float: none; } /*此处为 IE hack */2829 dd div {30 position: relative;31 background: url(g_colorbar2.jpg);32 height: 20px;33 width: 75%;34 text-align:right;35 }36 dd div strong {37 position: absolute;38 right: -5px;39 top: -2px;40 display: block;41 background: url(g_marker.gif);42 height: 24px;43 width: 9px;44 text-align: left;45 text-indent: -9999px;46 overflow: hidden;47 }48HTML:代码1 h3复杂进度条/h32 dl3 dt喜欢博客园/dt4 dd5 div stylewidth:25%;strong25%/strong/div6 /dd7 dt很喜欢/dt8 dd9 div stylewidth:55%;strong55%/strong/div10 /dd11 dt超级喜欢/dt12 dd13 div stylewidth:75%;strong75%/strong/div14 /dd15 /dl16CSS中用到了几个图片在示例代码下载中有。使用方法同样简单。再看一下柱状图的效果我觉得这个是最炫的偷笑一个^_^其实最主要的地方在图片上代码就不贴了有兴趣的请下载示例代码。