css实现步骤条(未封装组件)
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css步骤条</title>
<style>
/* 方法一 */ .stepDiv {
width: 1100px;
height: 50px;
margin: 0 auto;
} .stepOne {
width: 150px;
font-size: 0;
position: relative;
float: left;
} .stepOne div {
background: #ff5837;
width: 125px;
height: 50px;
vertical-align: text-bottom;
font-size: 15px;
color: #000;
line-height: 50px;
text-align: center;
float: left;
} .stepOne span {
width: 0;
height: 0;
border-width: 25px 0 25px 25px;
border-style: solid;
border-color: transparent transparent transparent #ff5837;
float: left;
} .stepTwo {
width: 150px;
font-size: 0;
position: relative;
/* left: -15px; */
float: left;
} .stepTwo div {
background: #f8f8f8;
width: 75px;
height: 50px;
float: left;
vertical-align: text-bottom;
font-size: 15px;
color: #000;
line-height: 50px;
text-align: center;
} .stepTwo span:nth-of-type(1) {
width: 0;
height: 0;
border-width: 25px 25px 25px 25px;
border-style: solid;
border-color: #f8f8f8 #f8f8f8 #f8f8f8 transparent;
top: 0px;
left: 0px;
float: left;
} .stepTwo span:nth-of-type(2) {
width: 0;
height: 0;
border-width: 25px 0 25px 25px;
border-style: solid;
border-color: transparent transparent transparent #f8f8f8;
float: left;
} .stepThree {
width: 150px;
font-size: 0;
position: relative;
float: left;
} .stepThree div {
background: #f8f8f8;
width: 125px;
height: 50px;
float: left;
vertical-align: text-bottom;
font-size: 15px;
color: #000;
line-height: 50px;
text-align: center;
} .stepThree span {
width: 0;
height: 0;
border-width: 25px 0px 25px 25px;
border-style: solid;
border-color: #f8f8f8 #f8f8f8 #f8f8f8 transparent;
top: 0px;
left: 0px;
float: left;
}
</style>
<style>
/* 方法二 */
.stepNew {
width: 1100px;
height: 50px;
margin: 50px auto;
} /* */
.stepOneN {
width: 150px;
font-size: 0;
position: relative;
float: left;
background: #149726;
/* 更改此处的颜色即可完成 */
} .stepOneN div {
width: 150px;
height: 50px;
vertical-align: text-bottom;
font-size: 15px;
color: #000;
line-height: 50px;
text-align: center;
} .stepOneN span:nth-of-type(1) {
border-width: 25px 0 25px 25px;
border-style: solid;
border-color: #fff transparent #fff transparent;
position: absolute;
top: 0;
right: 0;
} /* */
.stepTwoN {
width: 150px;
font-size: 0;
position: relative;
float: left;
background: #149726;
} .stepTwoN div {
width: 150px;
height: 50px;
vertical-align: text-bottom;
font-size: 15px;
color: #000;
line-height: 50px;
text-align: center;
} .stepTwoN span:nth-of-type(1) {
border-width: 25px 0 25px 25px;
border-style: solid;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0;
left: 0;
} .stepTwoN span:nth-of-type(2) {
border-width: 25px 0 25px 25px;
border-style: solid;
border-color: #fff transparent #fff transparent;
position: absolute;
top: 0;
right: 0;
} /* */
.stepThreeN {
width: 150px;
font-size: 0;
position: relative;
float: left;
background: #f8f8f8;
/* 更改此处的颜色即可完成 */
} .stepThreeN div {
width: 150px;
height: 50px;
vertical-align: text-bottom;
font-size: 15px;
color: #000;
line-height: 50px;
text-align: center;
} .stepThreeN span:nth-of-type(1) {
border-width: 25px 0 25px 25px;
border-style: solid;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0;
left: 0;
}
</style>
</head> <body>
<!-- <div class="stepDiv">
<div class="stepOne">
<div>1.第一步</div>
<span></span>
</div>
<div class="stepTwo">
<span></span>
<div>2.第二步</div>
<span></span>
</div>
<div class="stepThree">
<span></span>
<div>3.第三步</div>
</div>
</div> -->
<!-- 方法二:推荐使用 -->
<div class="stepNew">
<div class="stepOneN">
<div>1.第一步</div>
<span></span>
</div>
<div class="stepTwoN">
<span></span>
<div>2.第二步</div>
<span></span>
</div>
<div class="stepTwoN">
<span></span>
<div>3.第三步</div>
<span></span>
</div>
<div class="stepTwoN">
<span></span>
<div>4.第四步</div>
<span></span>
</div>
<div class="stepTwoN">
<span></span>
<div>5.第五步</div>
<span></span>
</div>
<div class="stepThreeN">
<span></span>
<div>6.第六步</div>
</div>
</div> <!--
1、样式根据实际需要调整;
2、有多步时,直接赋值“第二步”即可,并更改文字说明;
3、给每一步最外层增加样式即可如 style="background: blue";
4、自写,转载请标明出处
-->
</body> </html>
css实现步骤条(未封装组件)的更多相关文章
- css实现步骤条
实现效果 html <ul class="steps"> <li class="active">申请完成</li> < ...
- element-ui Steps步骤条组件源码分析整理笔记(九)
Steps步骤条组件源码: steps.vue <template> <!--设置 simple 可应用简洁风格,该条件下 align-center / description / ...
- 微信小程序 - 步骤条组件
<!-- 未激活颜色: uncolor:'#ccc' 激活 active:0 数据源 data:[{},{}] 步骤条类型:type basic detail num more --> & ...
- uni-app插件ColorUI步骤条
1. uni-app插件ColorUI步骤条 1.1. 前言 uni-app就不介绍了,前面几篇已经有所介绍,不知道的可以翻看我前面几篇博客 ColorUI-uniApp是uni-app的一款ui组件 ...
- 多步骤多分步的组件StepJump
最近的工作在做一个多步骤多分步的表单页面,这个多步骤多分步的意思是说这个页面的业务是分多个步骤完成的,每个步骤可能又分多个小步骤来处理,大步骤之间,以及小步骤之间都是一种顺序发生的业务关系.起初以为这 ...
- Steps 步骤条
引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步. 基础用法 简单的步骤条. 设置active属性,接受一个Number,表明步骤的 index,从 0 开始.需 ...
- 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的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
随机推荐
- Prometheus 配置文件详解
Prometheus 配置文件详解 官方文档:https://prometheus.io/docs/prometheus/latest/configuration/configuration/ 指标说 ...
- RocketMQ Release Note(RocketMQ升级日志译文)
RocketMQ升级日志 1 4.2.0 原版Release Note 1.1 New Feature 支持传输层安全性 客户端支持log4j2 PushConsumer支持条数与大小维度的流控 1. ...
- Linux学习笔记之Linux系统的swap分区
0x00 什么是swap分区 Swap分区在系统的物理内存不够用的时候,把物理内存中的一部分空间释放出来,以供当前运行的程序使用.那些被释放的空间可能来自一些很长时间没有什么操作的程序,这些被释放的空 ...
- 关于.net core 中的signalR组件的使用
SignalR是为了提供更方便的web交互响应式到推送式的解决方案.有了它之后可以实现客户端直接调用服务端的方法并且获得返回值 (客户端可以是各种平台,目前SignalR支持的语言版本有C#.java ...
- 排序算法Java代码实现(一)—— 选择排序
以下几篇随笔都是记录的我实现八大排序的代码,主要是贴出代码吧,讲解什么的都没有,主要是为了方便我自己复习,哈哈,如果看不明白,也不要说我坑哦! 本片分为两部分代码: 常用方法封装 排序算法里需要频繁使 ...
- mvc中hangfire全局简单配置
public void Configuration(IAppBuilder app) { ConfigureAuth(app); //指定使用Sql ...
- mvc_1_ex_stu_manage
Mvc第一遍结束综合练习:带权限的学生管理系统程序的设计应该根据功能来进行.先来设想一下本练习的程序功能:学生信息管理.登录用户区分权限.出错应该给出提示.由此可以设想,完成以后的程序是下图的样子:主 ...
- j.u.c: Java并发包的5大块
//TODO Executors: ExecutorService executor = Executors.newFixedThreadPool(10);... newForkJoinPool(). ...
- 如何将一个div盒子水平垂直都居中?
html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...
- Qt 使用QLabel、QMovie加载gif图片实现动态等待窗口
新建基于Widget的应用程序,在ui的窗口中添加QLabel,对象名label,调整整个窗口大小. 准备loading.gif图片 Widget.cpp 12345678910111213141 ...