当前位置:主页 > IT技术新闻 >

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

作者:凯发K发表时间:2019-01-03

  帮客之家(www.Bkjia.com)教程 这个是用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.bkjia.com/uploads/userup/1/0910/colorbar.jpg");
}
* html dd { float: none; }
dd div {
position: relative;
background: url("http://www.bkjia.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.bkjia.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.bkjia.com/ target=_blank _fcksavedurl="http://www.bkjia.com/ target=_blank">http://www.bkjia.com/</a></center>

提示:可修改后代码再运行!

http://www.bkjia.com/HTML_CSS/366136.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML_CSS/366136.htmlTechArticle烈火网(LieHuo.Net)教程 这个是用CSS美化出来的一个漂亮滑块,注意它是一个静态的,没有加入JS,因此不能适时拖动,本示例重点是想表述CS...

本文源自: 环亚娱乐

下一篇:没有了 上一篇:什么是XML及XML和HTML的区别
IT技术新闻
联系我们