CSS 布局一个漂亮的滑块_软件编程_内江振祥营销策划有限公司

CSS 布局一个漂亮的滑块

发布时间：2026-01-11

点击量：

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

<!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> <script type="text/javascript" src="/public/static/common/js/ey_global.js?v=v1.7.1"></script>
</head> <body> <dl> <dt>生活满意度：</dt> <dd> <strong>63%</strong> </dd> <dt>工作满意度：</dt> <dd> <strong>38%</strong> </dd> <dt>爱情满意度：</dt> <dd> <strong>86%</strong> </dd> </dl> <script type="text/javascript">var root_dir="";var ey_aid=465817;</script>
<script language="javascript" type="text/javascript" src="/public/static/common/js/ey_footer.js?v=v1.7.1"></script>
</body> </html>

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

标签：# CSS # 滑块 # 满意度 # 会对 # 全选 # title # head # content # charset

上一篇：CSS 美化表格边框为凹陷立体效果的实现方法

下一篇：兼容多浏览器的JS 浮动广告[推荐]

CSS 布局一个漂亮的滑块

发布时间：2026-01-11

点击量：

返回

4008888355