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

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



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


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

就可以达到下面的效果



省下的样式就略了。

CSS 静态进度条效果的更多相关文章

  1. 纯css实现进度条效果

    去年7月份做一个公司商城的微信页面(微信用的chrome内核)需要写一个提示返现进度的进度条效果. 一个完整的进度条效果其实可以拆分一下: 一段背景: 一小段的静态的斜纹进度条: 斜纹进度条用线性渐变 ...

  2. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  3. Css静态进度条

    图片预览: Css代码: <style> .statusList{width:240px; float:left; line-height:68px;margin:0 2px; text- ...

  4. CSS 实现滚动进度条效果

    参考:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html 前言:细化总结.参考的文章作者已经写的很详细了.这里在从初学者 ...

  5. CSS实现进度条和订单进度条

    最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...

  6. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  7. 纯CSS打造进度条

    进度条效果如下: CSS部分 body { background-color: white; } .progress-bar { display: flex; flex-direction: row; ...

  8. Javascript 及 CSS3 实现进度条效果

    Javascript 及 CSS3 实现进度条效果 一:css2 属性clip实现网页进度条:  在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解 ...

  9. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

随机推荐

  1. javascript之DOM编程实现城市的联动框

    需求;用一张图片表示. 分析: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  2. linux 下检查java jar包 程序是否正常 shell

    linux 下检查java jar包 程序是否正常 shell http://injavawetrust.iteye.com BATCH_SERVER="batch.jar" NR ...

  3. Dynamics CRM2013 1:N关系 sub-grid中的“添加现有项”和“添加新建项”功能详解

    CRM2013中sub-grid的样式和2011中有了较大的变化,2013和2011界面对比如下 在2011的时候按钮是在ribbon区,1:N的父子关系实体直接点击添加新纪录就可以,但2013就不行 ...

  4. javascript语法之函数的定义

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储

    AngularJS项目开发技巧之localStorage存储       注: localStorage深度学习 绪 项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStora ...

  6. Linux 下源码安装大杂烩

    本文仅以记录平常源码安装部分软件是需注意的关键点. 有时为了方便,如在 Ubuntu 系统中,采用 sudo apt-get install soft-version 来安装某一版本的软件显得更为便捷 ...

  7. HDTV(1920x1080)码率和视频质量关系的研究 1 (前期准备)

    Hans Hoffmann等人在论文<Studies on the Bit Rate Requirements for a HDTV Format With 1920 x 1080 pixel ...

  8. SpriteBuilder中的碰撞分类(Categories)和掩码(Masks)

    假如有2种对象player和触发器(trigger),当玩家进入到触发器区域时则由触发器对象通知所有注册过触发器通知的对象,然后由这些对象自行选择做一些事情,比如:阻碍player的前景,触发陷阱等等 ...

  9. unity连接数据库工具

    这里用的是一个集成工具UPUPW(Nginx+mysql+php版本) 网址:http://php.upupw.net/ 数据库登录: 本地: http://127.0.0.1/pmd 外网: htt ...

  10. 安卓笔记--intent传值不更新问题

    今天在学习安卓的过程中,遇到一个问题,就是用intent进行多次传值的话, 他永远是第一次的值 后来发现,intent接收数据被写到了onCreat();方法中,这时候finish();到上一个Act ...