CSS 布局一个漂亮的滑块

更新时间：2009年10月06日 16:38:27 作者：

这个是用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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS布局一个漂亮的滑块</title> <style type="text/css"> dl { margin: 0; padding: 0; } dt { position: relative; 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; display: block; float: left; width: 197px; height: 20px; margin: 0 0 15px; background: url("/upload/20091006163826471.jpg"); } * html dd { float: none; } dd div { position: relative; background: url("/upload/20091006163826679.jpg"); height: 20px; width: 75%; text-align:right; } dd div strong { position: absolute; right: -5px; top: -2px; display: block; background: url("/upload/20091006163826537.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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

CSS
滑块

推荐:极酷右键菜单
推荐:极酷右键菜单...
2006-11-11
任意位置显示html菜单
任意位置显示html菜单...
2007-02-02
数字金额千位分隔的Javascript
数字金额千位分隔的Javascript...
2006-08-08
实用的层滑开js实现代码
一款实用简洁的层滑开特效代码，鼠标放到“111”上，所对应的层会缓冲展开，过会会自动闭合起来，兼容性好，各位有用到的自己美化一下。
2009-11-11
连接文字不停变色
连接文字不停变色...
2006-08-08
永不消失的title提示代码
永不消失的title提示代码...
2007-02-02
兼容FF&IE的滚动代码
兼容FF&IE的滚动代码...
2007-01-01
CSS 美化表格边框为凹陷立体效果的实现方法
这个CSS美化实例应该属于布局的范畴吧。这里的重点是CSS，因此表格使用了TABle，用CSS控制Table的边框像Windows系统窗体里的边线一样，表格边框为凹陷立体效果。
2009-10-10
非常不错的页面特效建议大家看下
非常不错的页面特效建议大家看下...
2007-06-06
非常不错的模拟打字效果，目前仅支持纯文本、BR标签、和P标签
非常不错的模拟打字效果，目前仅支持纯文本、BR标签、和P标签...
2007-05-05