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訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些