如何使用CSS3製作進度條的簡單範例程式碼

來源:互聯網
上載者:User
這篇文章主要介紹了使用CSS3製作一個簡單的進度條(demo)的相關資料,需要的朋友可以參考下

這裡只是一個小demo,一個用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>    <p class="process-bar skin-green">        <p class="pb-wrapper">            <p class="pb-highlight"></p>            <p class="pb-container">                <p class="pb-text">50%</p>                <p class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></p>            </p>        </p>    </p></body></html>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.