CSS布局一個(gè)漂亮的滑塊_層和布局特效

這個(gè)是用CSS美化出來(lái)的一個(gè)漂亮滑塊，注意它是一個(gè)靜態(tài)的，沒(méi)有加入JS,因此不能適時(shí)拖動(dòng)，本示例重點(diǎn)是想表述CSS布局復(fù)雜圖形的一種方法，好好看看代碼，相信會(huì)對(duì)你幫助不少。

<!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布局一個(gè)漂亮的滑塊</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>愛(ài)情滿意度：</dt>
    <dd>
        <div style="width:75%;"><strong>86%</strong></div>
    </dd>
</dl>
</body>
</html>

所屬頻道：層和布局特效/更新時(shí)間：2012-11-04

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)層和布局特效：

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索CSS布局一個(gè)漂亮的滑塊
特效說(shuō)明：
層和布局模板-CSS布局一個(gè)漂亮的滑塊。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

CSS布局一個(gè)漂亮的滑塊_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些