css实现步骤条
实现效果
html
<ul class="steps">
<li class="active">申请完成</li>
<li class="active">资料上传</li>
<li>专员审核</li>
<li>理赔结案</li>
</ul>
css
/* 进度条 */
/* 创建步骤数字计数器 */
.steps {
position: relative;
margin-bottom: 30px;
counter-reset: step;
background:#fff;
margin :5px 0;
overflow: hidden;
margin-left: -46px;
}
/* 步骤描述 */
.steps li {
list-style-type: none;
font-size: 14px;
text-align: center;
width: 20%;
position: relative;
float: left;
height:40px;
line-height :40px;
padding :10px 0;
}
/* 步骤数字 */
.steps li:before {
display: block;
content: counter(step); /* 设定计数器内容 */
counter-increment: step; /* 计数器值递增 */
width: 10px;
height: 10px;
background-color:#ccc;
line-height: 10px;
border-radius: 10px;
font-size: 0;
color: #fff;
text-align: center;
font-weight: 600;
margin: 0 auto 9px auto;
}
/* 连接线 */
.steps li ~ li:after {
content: '';
width: 100%;
height: 3px;
background-color:#ccc;
position: absolute;
left: -48%;
top: 14px;
z-index: 0;
}
/* 将当前/完成步骤之前的数字及连接线变绿 */
.steps li.active:before, .steps li.active:after {
background-color:#6fb1bd;
}
css实现步骤条的更多相关文章
- css实现步骤条(未封装组件)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- uni-app插件ColorUI步骤条
1. uni-app插件ColorUI步骤条 1.1. 前言 uni-app就不介绍了,前面几篇已经有所介绍,不知道的可以翻看我前面几篇博客 ColorUI-uniApp是uni-app的一款ui组件 ...
- CSS实现进度条和订单进度条
最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态不好,就随便找点乐子玩一玩,于是乎就想起之前面试时面试官给的一道题(见标题),那就弄点简单的小玩意给自己洗洗脑咯. 简单地效果 ...
- css横向导航条
css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...
- CSS实现导航条Tab的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- CSS实现导航条Tab切换的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- C#开发step步骤条控件
现在很多的javascript控件,非常的不错,其中step就是一个,如下图所示: 那么如何用C#来实现一个step控件呢? 先定义一个StepEntity类来存储步骤条节点的信息: public c ...
- element-ui Steps步骤条组件源码分析整理笔记(九)
Steps步骤条组件源码: steps.vue <template> <!--设置 simple 可应用简洁风格,该条件下 align-center / description / ...
- 微信小程序 - 步骤条组件
<!-- 未激活颜色: uncolor:'#ccc' 激活 active:0 数据源 data:[{},{}] 步骤条类型:type basic detail num more --> & ...
随机推荐
- MySQL构造测试数据
构造测试数据(笛卡尔积,6 次100 万) create table t1(id int, val varchar(80)); set @i := 0;create table tmp as sele ...
- mysql5.5碰到的type= MyISAM报错问题
最近把mysql升级到5.5版本,发现type= MyISAM报错,网上查了一下原来MYSQL5.5.x 版本 不支持 TYPE=MyISAM 这样的语句了!!! MYSQL语句写法 TYPE=My ...
- iOS性能优化未阅文章归档
https://www.aliyun.com/jiaocheng/349583.html https://www.2cto.com/kf/201706/648929.html 理解UIView的绘制 ...
- 如何在ZBrush 4R7中设置背面遮罩
ZBrush 4R7中的背面遮罩是如何来设置的?当我们在进行ZBrush雕刻创作的时候,经常会不经意的雕刻到背面的物体,那么,如何防止背面的物体不被雕刻到,这就需要设置下背景遮罩了. ZBrush 4 ...
- addEventListener()与removeEventListener(),追加事件和删除追加事件
addEventListener()与removeEventListener()用于追加事件和删除追加.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函 ...
- Kattis - Babelfish
Babelfish You have just moved from Waterloo to a big city. The people here speak an incomprehensible ...
- Qwiklab'实验-DynamoDB, Redshift, Elasticsearch'
title: AWS之Qwiklab subtitle: 4. Qwiklab'实验-Amazon DynamoDB, Amazon Redshift, Elasticsearch Service' ...
- 新手学python-Day2-变量和循环判断
第二天作业: 初探三级菜单,凭现有知识,注意变量可以不声明,但要提前赋值! 此处shuru = '' 可以不写,因为第7行被赋值了,如果只调用shuru不赋值就会报错 shuru = '' sheng ...
- Java IO(三) 之 FileInputStream
前言: 对于文件系统中的文件.都能够使用FileInputStream流类以二进制的形式进行读取.可是因为Java本身的定位在JVM之上,没有处理计算机底层的能力.因此一些涉及底层处理的方法都是使用n ...
- eclipse project文件夹下 删除不掉文件夹或者文件的解决的方法
对于新手来说,有时操作失误就会导致eclipse文件夹中的某些子文件夹或者文件无法删除. 这种原因是,在project文件夹中(不是eclipse上显示的.是真实的物理磁盘上的)这个文件夹或者文件已经 ...