CSS布局一个漂亮的滑块_层和布局特效

这个是用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" mrc="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("/jscss/demoimg/200910/colorbar.jpg"); 
     }
     * html dd { float: none; } 
     dd div { 
        position: relative; 
        background: url("/jscss/demoimg/200910/colorbar2.jpg"); 
        height: 20px; 
        width: 75%; 
        text-align:right; 
     }
     dd div strong { 
        position: absolute; 
        right: -5px; 
        top: -2px; 
        display: block; 
        background: url("/jscss/demoimg/200910/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>

所属频道：层和布局特效/更新时间：2012-11-04

[收藏][报错][返回列表]

CSS布局一个漂亮的滑块_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些