今天学习到了实现一个静态进度条的方法，固写一篇笔记稳固一下自己的知识。
最终的效果如下，进度条放在一个框里，水平宽自适应。
现在就开始，首先写一个进度条先。
.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; }
就可以达到下面的效果
省下的样式就略了。