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的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
随机推荐
- sql中筛选第一条记录【分组排序】
问题描述 我们现在有一张表titles,共有4个字段,分别是emp_no(员工编号),title(职位),from_date(起始时间),to_date(结束时间),记录的是员工在某个时间段内职位名称 ...
- Java的常用API
Object类 1.toString方法在我们直接使用输出语句输出对象的时候,其实通过该对象调用了其toString()方法. 2.equals方法方法摘要:类默认继承了Object类,所以可以使用O ...
- mingw 编译 glfw3 的 helloworld
glfw3 为基础开发 GUI 似乎是一个不错选项,有很多人尝试这么做了.今天也小试一把. 工具: mingw(不是 mingw-w64),头文件 GLFW/ ,库文件 glfw3.dll 需要注意, ...
- U9-ERP BuildupDesigner 操作
它的数据库文件配制 D:\UFIDA\UBFV50\U9.VOB.Product.UBF\UBFStudio\Runtime\environment.xml
- 【转载】socket通信-C#实现tcp收发字符串文本数据
在日常碰到的项目中,有些场景需要发送文本数据,也就是字符串,比如简单的聊天文字,JSON字符串等场景.那么如何如何使用SharpSocket来收发此类数据呢?其中要掌握的关键点是什么呢? 点击查看原博 ...
- 象棋中“车”的攻击范围_C#
如题: var a = new String[8,8]; int h, l; Console.WriteLine("输入车所在的行(0-7):"); h = int.Parse(C ...
- 《C++ Primer》学习总结;兼论如何使用'书'这种帮助性资料
6.25~ 6.27,用了3天翻了一遍<C++ Primer>. ▶书的 固有坏处 一句话: 代码比 文字描述 好看多了.————> 直接看习题部分/ 看demo就行了 看文字在描述 ...
- 微信小程序生命周期详解
文章出处:https://blog.csdn.net/qq_29712995/article/details/79784222 在我看来小程序的生命周期虽然简单,但是他渗透了小程序开发的整个过程,对于 ...
- webdriver 属于selenium 体系中设计出来操作浏览器的一套API
1.元素的定位 1.id属性定位 实例: find_element_by_id("kw") 2.name属性定位,同id一样是属性值 实例: find_element_ ...
- RedHat 6 安装 MySQL 5.5 流程记录及相关问题解决方案
目录 1. RedHat 中 使用 yum 方式安装 MySQL 2. 安装过程中遇到的问题 1. RedHat 中 使用 yum 方式安装 MySQL 1.1 删除系统自带的 MySQL 5.1 r ...