html+css+jQuery 时间线
0
悬赏园豆：20
[已解决问题]
解决于 2020-11-11 13:09
我需要一个类似这样样式的时间线
我改了改layui，现在功能满足了，但是layui的样式和这个不一样
我遇到的问题
1、那个竖线不知道怎么搞出来
2、那个圆点不知道怎么搞出来
我不会前端这些东西，在学。我在看了好多教程，他们都用的是css before 、after这种的，没有注释，我想二次开发也做不到。
可以给讲下css，或者给个有注释的例子也成
最佳答案
0
css样式
<style>
/* 每一项 /
.main .item{
/ 子元素横向排布,水平垂直居中 /
display:flex;
justify-content: center;
align-items: center;
/ 字体大小 /
font-size: 20px;
}
/ 每一项左边日期 /
.main .item .item_left{
/ 文字右对齐 /
text-align: right;
/ 右边距30 /
margin-right:30px;
}
/ 每一项右边 /
.main .item .item_right{
/ 子元素横向排布,水平左对齐垂直居中 /
display: flex;
justify-content: flex-start;
align-items: center;
/ 左边框,也就是轴线了 /
border-left:solid 2px #f60;
/ 每一项的高度,可自调 /
height: 50px;
}
/ 右边中的圆和线外框 /
.main .item .item_right .circle_line{
/ 子元素横向排布,水平左对齐垂直居中 /
display: flex;
justify-content: flex-start;
align-items: center;
/ 整体前移圆球宽的一半 */
margin-left:-7.5px;
}
/* 圆球 */
.main .item .item_right .circle{
/* 宽高 */
width:15px;
height:15px;
/* 圆角 */
border-radius: 50%;
/* 颜色 */
background-color:#f60;
}
/* 圆右边横线 */
.main .item .item_right .line{
/* 长 */
width:50px;
/* 粗 */
height:2px;
/* 颜色 */
background-color:#f60;
}
</style>
以下html代码
<!-- 外层 -->
<div class="wrap">
<div class="main">
<!-- 每一事项 -->
<div class="item">
<div class="item_left">
2020-11-11
</div>
<div class="item_right">
<div class="circle_line">
<div class="circle"></div>
<div class="line"></div>
</div>
<div>吃饭</div>
</div>
</div>
<div class="item">
<div class="item_left">
2020-11-11
</div>
<div class="item_right">
<div class="circle_line">
<div class="circle"></div>
<div class="line"></div>
</div>
<div>吃饭</div>
</div>
</div>
<div class="item">
<div class="item_left">
2020-11-11
</div>
<div class="item_right">
<div class="circle_line">
<div class="circle"></div>
<div class="line"></div>
</div>
<div>吃饭</div>
</div>
</div>
</div>
</div>
效果图
收获园豆：20
其他回答(1)
0
