编程之家 jb51.cc 这个是用CSS美化出来的一个漂亮滑块，注意它是一个静态的，没有加入JS,因此不能适时拖动，本示例重点是想表述CSS布局复杂图形的一种方法，好好看看代码，相信会对你帮助不少。
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd><html xmlns=http://www.w3.org/1999/xhtml><head><<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv=Content-Type content=text/html; charset=gb2312 /><title>CSS布局<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>漂亮的滑块</title><style type=text/css>dl {margin: 0;padding: 0;}dt {position: relative;clear: both;<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: block;float: left;width: 104px;height: 20px;line-height: 20px;margin-right: 17px;font-size: .75em;text-align: right;}dd {position: relative;<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: block;float: left;width: 197px;height: 20px;margin: 0 0 15px;background: url(http://www.wfuyu.com/uploads/userup/1/0910/colorbar.jpg);}* html dd { float: none; }dd div {position: relative;background: url(http://www.wfuyu.com/uploads/userup/1/0910/colorbar2.jpg);height: 20px;width: 75%;text-align:right;}dd div strong {position: absolute;right: -5px;top: -2px;<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: block;background: url(http://www.wfuyu.com/uploads/userup/1/0910/marker.gif);height: 24px;width: 9px;text-align: left;text-indent: -9999px;overflow: hidden;}</style></head><body><dl><dt>生活满意度：</dt><dd><div style=width:95%;><strong>63%</strong></div></dd><dt>工作满意度：</dt><dd><div style=width:55%;><strong>38%</strong></div></dd><dt>爱情满意度：</dt><dd><div style=width:75%;><strong>86%</strong></div></dd></dl></body></html><br /><center>网更多教程，请访问：<a href=http://www.wfuyu.com/ target=_blank _fcksavedurl=http://www.wfuyu.com/ target=_blank>http://www.wfuyu.com/</a></center>提示：可修改后代码再运行!
