本篇教程介绍了HTML+CSS入门 CSS 静态进度条效果，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

最终的效果如下，进度条放在一个框里，水平宽自适应。

现在就开始，首先写一个进度条先。


    .progress-bar{
            /* 进度条的槽 */
            width:47%;
            /* 设置进度条的高度 */
            height: 5px;
            /*进度条外层div的背景色，进度未达到的地方的颜色 */
            background-color: #f9e1e3;
            
            border-radius: 3px;
        }
        .progress{
            /* 进度部分 */
            /* 利用继承父元素宽度的百分比控制进度 */
            width: 60%;
            height: 100%;
            /* 内层背景色即进度达到的颜色 */
            background-color: #e46a70;
            border-radius: 3px;
        }
    <div class="progress-bar">
        <div class="progress">
        </div>
    </div>
然后就可以将进度条放到写好的li里了
    <div class="content">
        <ol class="clearfix">
            <li>
                <h3>Java</h3>
                <div class="progress-bar">
                    <div class="progress">
                    </div>
                </div>
            </li>
            <li>
                <h3>HTML</h3>
                <div class="progress-bar">
                    <div class="progress">
                    </div>
                </div>
            </li>
            <li>
                <h3>CSS</h3>
                <div class="progress-bar">
                    <div class="progress">
                    </div>
                </div>
            </li>
            <li>
                <h3>Python</h3>
                <div class="progress-bar">
                    <div class="progress">
                    </div>
                </div>
            </li>
        </ol>
    </div>
然后让li左浮动偶数li右浮动
        .content ol li {
            float: left;
            width: 47%;
        }

        .content ol li:nth-child(even) {
            float: right;
        }

再让li的父元素ol清除浮动
.clearfix:after {             content: ‘‘;             display: block;             clear: both;         }
就可以达到下面的效果

省下的样式就略了。    

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！