这次给大家带来使用CSS3制作进度条,使用CSS3制作进度条的注意事项有哪些,下面就是实战案例,一起来看一下。

这里只是一个小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>


TAG: CSS3 进度条

如果你觉得本文还不错,记得分享哦^-^^-^

相关内容:


精彩推荐

上网导航

热门点击

你可能喜欢




渝ICP备15000999-1号

重庆共享汽车使用网    reg博客    小十博客    草根赚钱创业    Deng's Blog    王杭个人博客    逐梦博客    李洁博客    破晓博客    雨巷博客    起点终点    lisa小站    网讯it资讯    互联网运营