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

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



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


.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. 【python】使用unix管道pipe处理stdout实时数据

    现在有个实时抓包处理的程序,大概的流程是 使用tshark抓包->实时上传,如果写log的话是可以的,但是log文件切割需要定时执行. 由于log中有些内容需要实时处理,延迟时间会导致数据误差, ...

  2. Android Studio安装插件Genymotion

    Android Studio安装插件的方式其实和Eclipse大同小异.废话不多说,直接上图: 区域1:你当前已经安装了的插件 区域2:在线安装 区域3:从硬盘安装,即针对你已经下载好了的插件,可通过 ...

  3. 敏捷测试(5)--基于story的敏捷基础知识

    基于story的敏捷基础知识----需求管理(二) (1)定期发布 定期发布上线,把整个项目划分为一个个迭代,每个迭代时间大小固定(基本固定),迭代结束时上线交付一次. (2)迭代规划 迭代规划相当于 ...

  4. 如何让你的传输更安全——NIO模式和BIO模式实现SSL协议通信

    对于SSL/TLS协议,如果要每个开发者都自己去实现显然会带来不必要的麻烦,正是为了解决这个问题Java为广大开发者提供了Java安全套接字扩展--JSSE,它包含了实现Internet安全通信的一系 ...

  5. 2016/1/9:深度剖析安卓Framebuffer设备驱动

    忙了几天,今天在公司居然没什么活干 ,所以早上就用公司的电脑写写之前在公司编写framebuffer的使用心得体会总结,这也算是一点开发经验,不过我还没写全,精华部分还是自己藏着吧.直到下午才开始有点 ...

  6. Android进阶(二十一)创建Android虚拟机

    创建Android虚拟机

  7. 蘑菇街Android组件与插件化

    插件化的基石 -- apk动态加载 随着我街业务的蓬勃发展,产品和运营随时上新功能新活动的需求越来越强烈,经常可以听到"有个功能我想周x上,行不行".行么?当然是不行啦,上新功能得 ...

  8. RHEL自动安装zookeeper的shell脚本

    RHEL自动安装zookeeper的shell脚本 A:本脚本运行的机器,Linux RHEL6 B,C,D,...:待安装zookeeper cluster的机器, Linux RHEL6 首先在脚 ...

  9. glib-dbus 在ubuntu9.10 和 ubuntu10.04 上安装环境的搭建

    dbus-glib 安装环境搭建 安装 dbus apt-get install dbus 安装 d-feet ,用于查看 session bus 和 system bus apt-get insta ...

  10. JVM学习--(八)java堆分析

    上一节介绍了针对JVM的监控工具,包括JPS可以查看当前所有的java进程,jstack查看线程栈可以帮助你分析是否有死锁等情况,jmap可以导出java堆文件在MAT工具上进行分析等等.这些工具都非 ...