如何在HTML中设计步骤进度条,使用纯CSS制作步骤进度条
步骤进度条的使用场景很多,比如说购物流程 、订单流程、面试流程等都要用到它。网上常见的做法是使用CSS图片精灵,该做法的优点是兼容性强,但缺点也很明显:难以自适应设备,而且会加载额外的 图片资源。有没有更好一点的办法呢?下面实例将使用纯CSS来制作面试步骤进度条。
其实现方法很简单,只需使用:before选择器在每一步对应li元素添加圆形步骤数字,使用:after选择器在其后面添加连接线。步骤进度条一般有三种状态:
已经完成的状态
当前正在进行的状态
未完成的状态
本实例中我们简单将已经完成的状态和正在进行的状态设置成同样的样式:数字及连接线变绿,将对于未完成的状态数字及连接线变灰。当前步骤对应steps li.active,那么已经完成的步骤则对应steps li.active ~ li。此处用到CSS3中的~选择器来匹配当前 元素之后的所有li兄弟元素。如下面CSS代码:
.steps {
position: relative;
margin-bottom: 100px;
counter-reset: step;/*创建步骤数字计数器*/
}
/*步骤描述*/
.steps li {
list-style-type: none;
font-size: 12px;
text-align: center;
width: 25%;
position: relative;
color: #777;
z-index: 2;
float: left;
}
/*步骤数字*/
.steps li:before {
display: block;
content: counter(step);/*设定计数器内容*/
counter-increment: step;/*计数器值递增*/
width: 32px;
height: 32px;
background-color: #777;
line-height: 32px;
border-radius: 32px;
font-size: 16px;
color: #fff;
text-align: center;
font-weight: 700;
margin: 0 auto 8px auto;
}
/*连接线*/
.steps li:after {
content: '';
width: 100%;
height: 4px;
background-color: #777;
position: absolute;
left: 0;
top: 15px;
z-index: -1;/*放置在数字层后面*/
}
/*连接线放置在数字层后面*/
.steps li:first-child {
z-index: 3;
}
.steps li:last-child {
z-index: 1;
}
/*去掉第一步多出的连接线*/
.steps li:first-child:after {
width: 50%;
left: 50%;
}
/*去掉最后一步多出的连接线*/
.steps li:last-child:after {
width: 50%;
}
/*完成步骤变绿*/
.steps li.active:before {
background-color: #019875;
}
.steps li.active {
color: #019875;
}
.steps li.active:before,
.steps li.active:after {
background-color: #019875;
}
相应的HTML代码:
- 投递成功
- 简历被查看
- 待沟通
- 面试
设置steps和active样式类就行了,是不是很简单?而且是适配移动设备的,很强大吧?
如何在HTML中设计步骤进度条,使用纯CSS制作步骤进度条相关推荐
- 纯CSS制作自适应分页条-分享------彭记(019)
纯css制作自适应分页条 效果图: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- 纯css制作圆形进度条
效果图大概是这样的 第一步 先定义出一个方形盒子 <!DOCTYPE html> <html lang="en"> <head><meta ...
- [html] 如何使用纯html制作一个进度条?
[html] 如何使用纯html制作一个进度条? HTML中的progress () 元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元 ...
- 漂亮纯css蓝白色横向导航条代码
漂亮纯css蓝白色横向导航条代码 展示图如下: 详细代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- 纯css 竖向步骤条
一.平常做一些物流啊提现啊这些效果的时候可能就需要用到步骤来向用户展示具体到哪一步了,但是呢有时候写的又比较繁琐,找各种组件插件又要安装或者引入对应的包,今天就给大家分享一个纯css的竖向步骤条,先看 ...
- html5 video如何添加进度条_教你制作独一无二的进度条视频效果
VLOG开头经常都会看到进度条,爱心/星星/emoji表情都可以做成进度加载的效果.这究竟是怎么做出来的呢?今天喵酱为大家带来3种方法,轻松制作进度条效果.认真地一步一步查看,保证你也能学会!先来看看 ...
- HTML导航条的功能描述,ps制作网页导航条 忘了写文字描述就发了,步骤为:
网页导航条用ps怎么做 要详细一点的 忘了写文字描述就发了,步骤为: 新建一个矩形选区,就是设置好你想做的导航条的宽和高 如何用Photoshop制作网站的"导航栏" 用PS制作的 ...
- css作个课程导航,CSS 制作网页导航条(下)
上节课我们将导航条做成了下面的效果 但是此时的导航条还没有链接,还不能点击,这节课我们就要做一个完整的导航条 [第四步] 我们需要将上面的导航条做以下几个修改 1)给上面的导航加上链接: 2)链接文字 ...
- css网页制作的基本步骤,以图例方式介绍CSS制作网页详细步骤
首先要做的是确定页面结构.随着你对CSS布局的逐步学习,这个过程会变得越来越简单.通过运用大量绝对定位和大幅背景图片,我们可以非常简单地完成这个设计. 第三步 现在,我们需要两张背景图片.一张大的,存 ...
最新文章
- zabbix mysql路径_ZABBIX数据库迁移目录
- iOS 不要用文本编辑pod file
- spark保存到mysql_Spark写入数据到MySQL
- 02 - Unit06:弹出对话框
- st语言 数组的常用方法_ST语言编程手册
- 【C++】递归打印杨辉三角
- mysql++pc客户端_Mysql超详细安装配置+客户端连接
- MySQL Operators(比较操作符,逻辑运算符)
- 来到ThoughtWorks
- java打印sscil码_SSCI期刊投稿指南库
- 【EXCEL批量查询手机号归属地小技巧】很多网友想看excel怎么批量查询手机号归属地,今天它来了
- 数学建模——SPSS的非参数检验
- c51语言串口,C51 语言编程:单片机与 PC 串口通信程序
- 浏览器服务器文件夹在哪里找,IE临时文件夹在哪?Win7系统下如何查找临时文件夹...
- RGB图像转HSI直方图均衡化后再转回RGB
- JQ实现小写金额转大写
- DotProject的安装(1)
- 华夏天信携手华为云开天aPaaS,打造安全、高效、节能的主煤流运输系统
- 如何改小米计算机用户名和密码,小米笔记本Air开机密码怎么取消?2种方法
- SQL查询语句大全(转)
热门文章
- fcos:fully convolutional one-stage object detection
- iOS 获取手机IP地址
- Linux 比 Windows 更好,谁反对?我有13个赞成理由
- 【Anaconda+pycharm搭建pytorch】
- 陷波超宽带天线理论学习
- 人民币汇率破7,跨境电商卖家,现在提款划算吗?
- SMU激活函数 | 超越ReLU、GELU、Leaky ReLU让ShuffleNetv2提升6.22%
- c语言保留字(关键字)汇总
- 【前端开发】CSS BEM命名规范
- 小马哥--高仿苹果7p 主板型号9900-875AQ0-A 真实6571芯片刷机拆机主板与开机界面图