H5W3
当前位置:H5W3 > 问答 > 正文

html+css+jQuery 时间线

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

html+css+jQuery 时间线

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

我遇到的问题

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

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

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

回答

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>

效果图html+css+jQuery 时间线

未经允许不得转载:H5W3 » html+css+jQuery 时间线

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址