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