首页 新闻 赞助 找找看

html+css+jQuery 时间线

0
悬赏园豆:20 [已解决问题] 解决于 2020-11-11 13:09

我需要一个类似这样样式的时间线

我改了改layui,现在功能满足了,但是layui的样式和这个不一样

我遇到的问题

1、那个竖线不知道怎么搞出来
2、那个圆点不知道怎么搞出来

我不会前端这些东西,在学。我在看了好多教程,他们都用的是css before 、after这种的,没有注释,我想二次开发也做不到。

可以给讲下css,或者给个有注释的例子也成

echo_lovely的主页 echo_lovely | 小虾三级 | 园豆:1420
提问于:2020-10-19 17:48
< >
分享
最佳答案
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
2019liyuan | 菜鸟二级 |园豆:229 | 2020-11-11 11:53
其他回答(1)
0
小小咸鱼YwY | 园豆:3210 (老鸟四级) | 2020-10-19 18:05

不靠谱

支持(0) 反对(0) echo_lovely | 园豆:1420 (小虾三级) | 2020-10-19 19:21

我看不懂,我也没办法改

支持(0) 反对(0) echo_lovely | 园豆:1420 (小虾三级) | 2020-10-19 19:21
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册