如何使用CSS3制作一個簡單的進度條-創新互聯

小編給大家分享一下如何使用CSS3制作一個簡單的進度條，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創新互聯公司是一家集網站建設,金安企業網站建設,金安品牌網站建設,網站定制,金安網站建設報價,網絡營銷,網絡優化,金安網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

這里只是一個小demo,一個用CSS3寫的進度條。

如圖所示：

如何使用CSS3制作一個簡單的進度條

具體代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"   />
<meta name="viewport" content="initial-scale=1">
<style>
.process-bar
{
    width:100px;
    display:inline-block;
    *zoom:1;
}
.pb-wrapper
{
    border:1px solid #cfd0d2;
    position:relative;
    background:#cfd0d2;
    border-radius: 8px;
}
.pb-container
{
    height:12px;
    position:relative;
    left:-1px;
    margin-right:-2px;
    font:1px/0 arial;
    padding:1px;
}
.pb-highlight
{
    position:absolute;
    left:0;
    top:0;
    _top:1px;
    width:100%;
    opacity:0.6;
    filter:alpha(opacity=60);
    height:6px;
    background:white;
    font-size:1px;
    line-height:0;
    z-index:1
}
.pb-text
{
    width:100%;
    position:absolute;
    left:0;
    top:0;
    text-align:center;
    font:10px/12px arial;
    color:black;
    font:10px/12px arial
}
</style>
</head>
<body>
    <div class="process-bar skin-green">
        <div class="pb-wrapper">
            <div class="pb-highlight"></div>
            <div class="pb-container">
                <div class="pb-text">50%</div>
                <div class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></div>
            </div>
        </div>
    </div>
</body>
</html>

看完了這篇文章，相信你對“如何使用CSS3制作一個簡單的進度條”有了一定的了解，如果想了解更多相關知識，歡迎關注創新互聯行業資訊頻道，感謝各位的閱讀！

當前文章：如何使用CSS3制作一個簡單的進度條-創新互聯
轉載源于：http://m.kartarina.com/article6/dcjpig.html

成都網站建設公司_創新互聯，為您提供面包屑導航、企業網站制作、響應式網站、標簽優化、品牌網站設計、App設計

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容