今天学习到了实现一个静态进度条的方法，固写一篇笔记稳固一下自己的知识。

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



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

    .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;

        }

就可以达到下面的效果



省下的样式就略了。