CSS时间线样式

css实现时间线样式，效果如下图：请添加图片描述

一、CSS代码

.timeline {padding-left: 5px}			
			.timeline-item { position: relative;padding-bottom: 20px;}			
			.timeline-axis {position: absolute;left: -5px;top: 0;z-index: 10;width: 20px;height: 20px;line-height: 20px;background-color: #fff;color: #16b777;border-radius: 50%;text-align: center;cursor: pointer;}			
			.timeline-axis:hover {color: #ff5722}			
			.timeline-item:before {content: "";position: absolute;left: 5px;top: 0;z-index: 0;width: 1px;height: 100%;background: #16b777;}	
			.timeline-item:first-child:before {display: block;}			
			.timeline-item:last-child:before {display: none;}			
			.timeline-content {padding-left: 25px;}			
			.timeline-title {position: relative;margin-bottom: 10px;line-height: 22px}
			.roundness{background-color: #16b777;}
1
2
3
4
5
6
7
8
9
10

二、html代码

<div class="mythBox mid timeline">
			<div class="timeline-item">
			    <i class="timeline-axis roundness">i>
			    <div class="timeline-content text">
			      <div class="timeline-title">2005年大学毕业div>
			    div>
			div>
			 <div class="timeline-item">
			     <i class="timeline-axis roundness">i>
			     <div class="timeline-content text">
			       <div class="timeline-title">2005年大学毕业div>
			     div>
			 div>
			 <div class="timeline-item">
			     <i class="timeline-axis roundness">i>
			     <div class="timeline-content text">
			       <div class="timeline-title">2005年大学毕业div>
			     div>
			 div>
		div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三、完整代码

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1" />
		<style>
			.timeline {padding-left: 5px}			
			.timeline-item { position: relative;padding-bottom: 20px;}			
			.timeline-axis {position: absolute;left: -5px;top: 0;z-index: 10;width: 20px;height: 20px;line-height: 20px;background-color: #fff;color: #16b777;border-radius: 50%;text-align: center;cursor: pointer;}			
			.timeline-axis:hover {color: #ff5722}			
			.timeline-item:before {content: "";position: absolute;left: 5px;top: 0;z-index: 0;width: 1px;height: 100%;background: #16b777;}	
			.timeline-item:first-child:before {display: block;}			
			.timeline-item:last-child:before {display: none;}			
			.timeline-content {padding-left: 25px;}			
			.timeline-title {position: relative;margin-bottom: 10px;line-height: 22px}
			.roundness{background-color: #16b777;}
		style>
	head>
	<body>
		<div class="mythBox mid timeline">
			<div class="timeline-item">
			    <i class="timeline-axis roundness">i>
			    <div class="timeline-content text">
			      <div class="timeline-title">2005年大学毕业div>
			    div>
			div>
			 <div class="timeline-item">
			     <i class="timeline-axis roundness">i>
			     <div class="timeline-content text">
			       <div class="timeline-title">2005年大学毕业div>
			     div>
			 div>
			 <div class="timeline-item">
			     <i class="timeline-axis roundness">i>
			     <div class="timeline-content text">
			       <div class="timeline-title">2005年大学毕业div>
			     div>
			 div>
		div>
	body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

ok，完工。

相关阅读:
无人机实践：DJI A3 飞控---使用
react快速开始(三)-create-react-app脚手架项目启动；使用VScode调试react
23、wpf之布局(一)
新手最容易触发的10个PHP语言Bug分享
iptables-参数-A和-I
微信小程序 java在线租房-房屋租赁系统springboot
2022年，对于跨境独立站，选择shopify，magento，fecify，fecmall，工具对比评测
安防视频监控平台EasyCVR新版（V.3.4）平台界面更新2.0
Asp .NetCore 微信订阅号自动回复之文本篇
第15章 - 垃圾回收相关算法

原文地址：https://blog.csdn.net/zhaoyang314/article/details/134259914