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

就可以达到下面的效果

省下的样式就略了。

转载于:https://www.cnblogs.com/liangjiahao713/p/8723187.html