<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>steps</title>
</head>
<style>
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #fff;
min-width: 1200px;
overflow: auto;
font-size: 14px;
color: #40485B;
padding-bottom: 100px;
padding-top: 100px;
}
.con {
position: relative;
padding-left: 27px;
}
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.con:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: #e3e9ed;
}
.con .e_header:first-child,
.e_con:first-child {
padding-top: 0;
}
.con .e_header {
padding-top: 9px;
}
.con .e_header {
min-width: 30px;
padding-top: 16px;
padding-bottom: 9px;
min-height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.circle {
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
color: #fff;
background: #fe7708;
font-size: 12px;
text-align: center;
position: absolute;
display: inline-block;
left: -14px;
z-index: 10;
}
.time {
font-weight: 700;
line-height: 32px;
font-size: 16px;
}
.c_con {
padding-top: 5px;
padding-bottom: 5px;
word-break: normal;
}
.e_head {
padding-left: 2px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-moz-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
}
.e_title {
overflow-wrap: break-word;
}
a {
text-decoration: none;
cursor: pointer;
color: #005980;
}
time {
webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
padding-left: 8px;
color: #8c92a4;
}
.e_body {
padding-top: 4px;
font-size: 15px;
margin: 5px 0;
padding-left: 20px;
}
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
li {
list-style: none;
}
.ava {
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 0.25em;
display: inline-block;
}
.circle0 {
left: -4px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #fe7708;
background: #fff;
position: absolute;
display: inline-block;
z-index: 10;
}
svg{
width: 20px;
height: 20px;
float: left;
padding-right: 5px;
}
</style>
<body>
<section id="app">
<div class="con">
<div class="event" v-for="(item,index) in 3" :key="index">
<div class="e_header">
<div class="circle" v-if="index==0">今日</div>
<div class="circle0" v-else></div>
<div class="time">2021-10-06</div>
</div>
<div class="e_con">
<div class="c_con" v-for="(item,index) in 2" :key="index">
<div class="push">
<svg t="1633535670442" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2694" width="200" height="200"><path d="M565.333333 779.914667l51.445334-54.912a31.733333 31.733333 0 0 1 45.226666-1.226667 32.64 32.64 0 0 1 1.216 45.770667l-97.418666 104a37.034667 37.034667 0 0 1-52.821334 1.397333l-108.362666-104.202667a32.64 32.64 0 0 1-1.152-45.770666 31.733333 31.733333 0 0 1 45.248-1.173334L501.333333 774.421333V512.074667c0-17.877333 14.325333-32.373333 32-32.373334s32 14.506667 32 32.373334v267.84zM512 138.666667c123.018667 0 228.213333 86.709333 259.424 206.88C864.298667 347.146667 938.666667 426.090667 938.666667 522.688c0 97.6-75.914667 177.173333-170.133334 177.173333-17.674667 0-32-14.496-32-32.373333 0-17.877333 14.325333-32.373333 32-32.373333 58.357333 0 106.133333-50.08 106.133334-112.426667 0-62.336-47.776-112.416-106.133334-112.416-5.856 0-11.626667 0.501333-17.301333 1.482667-17.621333 3.050667-34.304-9.098667-37.024-26.986667C698.346667 280.693333 612.714667 203.424 512 203.424c-73.834667 0-140.928 41.536-177.376 107.861333a31.914667 31.914667 0 0 1-30.122667 16.576 140.373333 140.373333 0 0 0-9.568-0.32c-80.149333 0-145.6 68.586667-145.6 153.781334 0 85.184 65.450667 153.792 145.6 153.792 17.674667 0 32 14.496 32 32.373333 0 17.877333-14.325333 32.373333-32 32.373333C178.912 699.861333 85.333333 601.770667 85.333333 481.322667c0-118.314667 90.293333-215.061333 203.456-218.453334C338.090667 186.24 421.013333 138.666667 512 138.666667z" p-id="2695" fill="#8a8a8a"></path></svg>
<div class="e_head">
<div class="e_title">推送到了
<a>susuhhhhhh/web_demos的 master 分支</a>
</div>
<time>0分钟前</time>
</div>
<div class="e_body">
<ul>
<li>
<a><img class="ava" src="https://i.postimg.cc/mgsKJGLw/susu1.jpg"></a>
<a>0ecabb1 </a>
<span>update gitee上传的步骤条.</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
}
})
</script>
</html>
【前端素材】模板-多种实用一些步骤条.zip （8个子文件） 
一些步骤条 
steps2.html 1KB step6.html 3KB steps0.html 1KB steps4.html 3KB steps3.html 4KB index.html 5KB steps5.html 3KB
img.png 19KB资源评论
枫蜜柚子茶
- 粉丝: 9051
- 资源: 5352
最新资源
- 基于Vue3、.NET8的mes-TMom生产制造系统设计源码
- 基于FPGA的灰度直方图均衡算法IP verilog源码 适用于Altera平台，封装好的IP，可直接在Qsys中调用 本为封装好的IP源码，经过Modelsim仿真验证和开发板功能验证OK
- 基于Python和HTML的气象数据分析系统设计与实现源码
- 基于Spring Boot的quartz分布式定时任务设计源码
- 安川代码移植的主板原理图 无pcb 采用瑞萨芯片
- 基于Python的平面五杆机构狗腿形态学/小贱钟模拟器设计源码
- PSO-BP粒子群优化BP神经网络多输入多输出（Matlab完整源码和数据）
- Pscad仿真模型程序-中低压交直流混合微电网协调控制和并离网切仿真 具体工况：DC-AC-LVGrid-End1：并离网切仿真，负载和电源功率不扰动DC-AC-LVGrid-End2：并离网切，负载
- 基于Java的跨平台数据流处理框架Sylph设计源码
- 基于Java语言的公开Webservice调用天气预报功能设计源码
- 基于Java及HTML的温州理工学院web应用系统开发课程课件设计源码
- 基于Vue3框架的LYMusic音乐网站设计源码
- 基于ThinkPHP的caozha-tp-comment轻量级评论系统设计源码
- HFSS仿真实例模型文件
- 基于阿里巴巴Java开发手册的在线版JavaScript+CSS+HTML设计源码
- 基于Java OSS API的统一对象存储操作设计源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
