CSS 布局一个漂亮的滑块

好好看看代码，相信会对你帮助不少。


</p> <p><title>CSS布局一个漂亮的<a href="https://www.kunjuke.com/tag/6131/" title="滑块" target="_blank">滑块</a></title> </p> <p>dl {<br /> margin: 0;<br /> padding: 0;<br /> }<br /> dt {<br /> position: relative;<br /> clear: both;<br /> display: block;<br /> float: left;<br /> width: 104px;<br /> height: 20px;<br /> line-height: 20px;<br /> margin-right: 17px;<br /> font-size: .75em;<br /> text-align: right;<br /> }<br /> dd {<br /> position: relative;<br /> display: block;<br /> float: left;<br /> width: 197px;<br /> height: 20px;<br /> margin: 0 0 15px;<br /> background: url("/upload/20091006163826471.jpg");<br /> }<br /> * html dd { float: none; }<br /> dd div {<br /> position: relative;<br /> background: url("/upload/20091006163826679.jpg");<br /> height: 20px;<br /> width: 75%;<br /> text-align:right;<br /> }<br /> dd div strong {<br /> position: absolute;<br /> right: -5px;<br /> top: -2px;<br /> display: block;<br /> background: url("/upload/20091006163826537.gif");<br /> height: 24px;<br /> width: 9px;<br /> text-align: left;<br /> text-indent: -9999px;<br /> overflow: hidden;<br /> } </p> <dl> <dt>生活满意度：</dt> <dd> <strong>63%</strong> </dd> <dt>工作满意度：</dt> <dd> <strong>38%</strong> </dd> <dt>爱情满意度：</dt> <dd> <strong>86%</strong> </dd> </dl> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]