您当前位置：首页 > web前端 > htmlcss > 用CSS实现的滑动模块布局的例子

用CSS实现的滑动模块布局的例子

来源：程序员人生发布时间：2014-05-28 03:34:07 阅读次数：2489次

　　网(LieHuo.Net)教程这个是用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("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;display: 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>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 如何使用 CSS 隐藏网页文字？

下一篇 收到 " 您试图打开读 - 仅数据库 " 错误打开在早期版本的 Access 2002、 Acces

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点