CSS 布局一个漂亮的滑块
作者:bea
好好看看代码,相信会对你帮助不少。 <!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-T
好好看看代码,相信会对你帮助不少。
<!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需刷新才能执行]
有用 | 无用
<!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需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 有效的捕获JavaScript焦点的方法小结
- Javascript isArray 数组类型检测函数
- JavaScript 监听textarea中按键事件
- jquery 最简单的属性菜单
- Javascript 日期处理之时区问题
- 学习ExtJS table布局
- 学习ExtJS accordion布局
- 学习ExtJS form布局
- 学习ExtJS fit布局使用说明
- 学习ExtJS border布局
- 学习ExtJS Column布局
- 学习ExtJS 访问容器对象
- 学习ExtJS Window常用方法
- 学习ExtJS Panel常用方法
- 学习ExtJS TextField常用方法
- 学习ExtJS(二) Button常用方法
- 学习ExtJS(一) 之基础前提
- JavaScript 控制文本框的值连续加减
- 兼容多浏览器的JS 浮动广告[推荐]