使用纯css制作简易步骤流程_html/css_WEB-ITnose
步骤进度条的使用场景很多,比如说购物流程 、订单流程、面试流程等都要用到它。网上常见的做法是使用CSS图片精灵,该做法的优点是兼容性强,但缺点也很明显:难以自适应设备,而且会加载额外的 图片资源。有没有更好一点的办法呢?下面实例将使用纯CSS来制作面试步骤进度条。
先点击此处查看效果。
其实现方法很简单,只需使用:before选择器在每一步对应li元素添加圆形步骤数字,使用:after选择器在其后面添加连接线。步骤进度条一般有三种状态:
- 已经完成的状态
- 当前正在进行的状态
- 未完成的状态
本实例中我们简单将已经完成的状态和正在进行的状态设置成同样的样式:数字及连接线变绿,将对于未完成的状态数字及连接线变灰。当前步骤对应steps li.active,那么已经完成的步骤则对应steps li.active ~ li。此处用到CSS3中的~选择器来匹配当前 元素之后的所有li兄弟元素。如下面CSS代码:
.steps { position: relative; margin-bottom: 30px; counter-reset: step; /*创建步骤数字计数器*/}/*步骤描述*/.steps li { list-style-type: none; font-size: 12px; text-align: center; width: 25%; position: relative; float: left;}/*步骤数字*/.steps li:before { display: block; content: counter(step); /*设定计数器内容*/ counter-increment: step; /*计数器值递增*/ width: 32px; height: 32px; background-color: #019875; line-height: 32px; border-radius: 32px; font-size: 16px; color: #fff; text-align: center; font-weight: 700; margin: 0 auto 8px auto;}/*连接线*/.steps li ~ li:after { content: ''; width: 100%; height: 2px; background-color: #019875; position: absolute; left: -50%; top: 15px; z-index: -1; /*放置在数字后面*/}/*将当前/完成步骤之前的数字及连接线变绿*/.steps li.active:before,.steps li.active:after { background-color: #019875;}/*将当前/完成步骤之后的数字及连接线变灰*/.steps li.active ~ li:before,.steps li.active ~ li:after { background-color: #777;}
相应的HTML代码:
<ul class="steps"> <li>投递成功</li> <li class="active">简历被查看</li> <li>待沟通</li> <li>面试</li></ul>
设置steps和active样式类就行了,是不是很简单?而且是适配移动设备的,很强大吧?

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

GiteePages静态网站部署失败:404错误排查与解决在使用Gitee...

网页批注功能的Y轴位置自适应算法本文将探讨如何实现类似Word文档的批注功能,特别是如何处理批注之间的间�...

实现图片点击后周围图片散开并放大效果许多网页设计中,需要实现一种交互效果:点击某张图片,使其周围的...

在router文件夹下的index.js文件中注册VueRouter的必要性在开发Vue应用程序时,常常会遇到关于路由配置的问题。特�...
