本篇教程介绍了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;
}
然后就可以将进度条放到写好的li里了
Java
HTML
CSS
Python
然后让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知识!