javascript - 带 css 的引导类
问题描述
我正在尝试制作一个页面,用户可以在其中跟踪他的请求过程,为此我制作了一个作为图片附加的视图。我想在圆圈内打勾。附上一张照片。
HTML
<ul class="timeline" id="timeline">
<li class="">
<br />
<br />
<br />
<div id="1" class="status">
<h4> FH APPROVAL </h4>
</div>
</li>
<li class="li complete">
<br />
<br />
<br />
<div class="status">
<h4>HR APPROVAL </h4>
</div>
</li>
<li class="li complete">
<br />
<br />
<br />
<div class="status">
<h4> IT Approval </h4>
</div>
</li>
<li class="li complete">
<br />
<br />
<br />
<div class="status">
<h4> Completed </h4>
</div>
</li>
</ul>
css
.timeline {
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
}
.li {
transition: all 200ms ease-in;
}
.timestamp {
margin-bottom: 20px;
padding: 0px 40px;
display: flex;
flex-direction: column;
align-items: center;
font-weight: 100;
}
.status {
padding: 0px 40px;
display: flex;
justify-content: center;
border-top: 2px solid lightgrey;
position: relative;
transition: all 200ms ease-in;
}
.status h4 {
font-weight: 600;
}
.status:before {
content: "";
width: 25px;
height: 25px;
background-color: lightgrey;
border-radius: 25px;
border: 1px solid lightgrey;
position: absolute;
top: -15px;
left: 42%;
transition: all 200ms ease-in;
}
.li.complete .status {
border-top: 2px solid lightgrey;
}
.li.complete .status:before {
background-color: lightgrey;
border: none;
transition: all 200ms ease-in;
}
.li.complete .status h4 {
color: lightgrey;
}
@media (min-device-width: 320px) and (max-device-width: 700px) {
.timeline {
list-style-type: none;
display: block;
}
.li {
transition: all 200ms ease-in;
display: flex;
width: inherit;
}
.timestamp {
width: 100px;
}
.status:before {
left: -8%;
top: 30%;
transition: all 200ms ease-in;
}
}
html, body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
font-family: "Titillium Web", sans serif;
color: #758D96;
}
button {
position: absolute;
width: 100px;
min-width: 100px;
padding: 20px;
margin: 20px;
font-family: "Titillium Web", sans serif;
border: none;
color: lightgrey;
font-size: 16px;
text-align: center;
}
#toggleButton {
position: absolute;
left: 50px;
top: 20px;
background-color: #75C7F6;
}
我尝试使用“状态”类在 div 中引导类,但它不起作用。如果有人能解决它并用代码片段回复,我将不胜感激。
解决方案
好的,现在您只需将活动类添加到状态以使其工作。
.timeline {
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
}
.li {
transition: all 200ms ease-in;
}
.timestamp {
margin-bottom: 20px;
padding: 0px 40px;
display: flex;
flex-direction: column;
align-items: center;
font-weight: 100;
}
.status {
padding: 0px 40px;
display: flex;
justify-content: center;
border-top: 2px solid lightgrey;
position: relative;
transition: all 200ms ease-in;
}
.status h4 {
font-weight: 600;
}
.status.active:before {
content: "";
width: 13px;
height: 5px;
border-bottom: 4px solid #fff;
border-left: 4px solid #fff;
position: absolute;
transform: rotate(-50deg);
z-index: 1;
top: -7px;
left: 45%;
transition: all 200ms ease-in;
}
.status h4:before {
content: "";
width: 25px;
height: 25px;
background-color: lightgrey;
border-radius: 25px;
border: 1px solid lightgrey;
position: absolute;
top: -15px;
left: 42%;
transition: all 200ms ease-in;
}
.status.active h4:before {
background-color: green;
border-color: green;
}
.li.complete .status {
border-top: 2px solid lightgrey;
}
.li.complete .status:before {
background-color: lightgrey;
border: none;
transition: all 200ms ease-in;
}
.li.complete .status h4 {
color: lightgrey;
}
@media (min-device-width: 320px) and (max-device-width: 700px) {
.timeline {
list-style-type: none;
display: block;
}
.li {
transition: all 200ms ease-in;
display: flex;
width: inherit;
}
.timestamp {
width: 100px;
}
.status:before {
left: -8%;
top: 30%;
transition: all 200ms ease-in;
}
}
html,
body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
font-family: "Titillium Web", sans serif;
color: #758D96;
}
button {
position: absolute;
width: 100px;
min-width: 100px;
padding: 20px;
margin: 20px;
font-family: "Titillium Web", sans serif;
border: none;
color: lightgrey;
font-size: 16px;
text-align: center;
}
#toggleButton {
position: absolute;
left: 50px;
top: 20px;
background-color: #75C7F6;
}
<ul class="timeline" id="timeline">
<li class="">
<br />
<br />
<br />
<div id="1" class="status active">
<h4> FH APPROVAL </h4>
</div>
</li>
<li class="li complete">
<br />
<br />
<br />
<div class="status">
<h4>HR APPROVAL </h4>
</div>
</li>
<li class="li complete">
<br />
<br />
<br />
<div class="status">
<h4> IT Approval </h4>
</div>
</li>
<li class="li complete">
<br />
<br />
<br />
<div class="status">
<h4> Completed </h4>
</div>
</li>
</ul>
推荐阅读
- next.js - NextJS/Image:“url”参数有效但上游响应无效
- go - Go + Apache Beam GCP 数据流:找不到 pubsub 的接收器,检查接收器库是否指定 alwayslink = 1
- reactjs - react-date-range 创建自定义 inputRanges
- xcode - 模拟器上的空白页 - Ionic Vue
- java - 尝试通过使用扫描仪指定有多少玩家来划分牌来处理一副牌
- google-chrome - 如何在 chrome 中下载所有网络 URL?
- email - 需要基于 Google 表格中的单元格输入自动发送电子邮件的脚本代码
- django - 为什么 stunnel 不断抛出“地址已在使用 (48)”?
- python - 关于二和问题的递归方法的问题
- javascript - 无法通过 Vercel 或 Netilify 部署网站。有谁知道为什么?