css時間軸

時間 2020-12-21
原型：
代碼：
<!DOCTYPE html >
<html>

	<head>

		<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
		<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

		<meta charset="UTF-8">
		<title>狀態詳情</title>
		<style>
			#timeleft div {
				height: 65px;
				color: #333333;
			}
			
			#timecenter div {
				height: 65px;
				color: #333333;
			}
			
			#timeright div {
				height: 65px;
				color: #333333;
			}
			
			#timeright div p {
				margin: 0 0 0px;
			}
			
			.cicle1 {
				position: absolute;
				top: 0px;
				left: -10px;
				border-radius: 10px;
				list-style: none;
				width: 20px;
				height: 20px;
				border: 1px solid #cccccc;
				background: #ffffff;
			}
			
			.cicle2 {
				position: absolute;
				top: 70px;
				left: -10px;
				border-radius: 10px;
				list-style: none;
				width: 20px;
				height: 20px;
				border: 1px solid #cccccc;
				background: #ffffff;
			}
			
			.cicle3 {
				position: absolute;
				top: 140px;
				left: -10px;
				border-radius: 10px;
				list-style: none;
				width: 20px;
				height: 20px;
				border: 1px solid #cccccc;
				background: #ffffff;
			}
			
			.cicle4 {
				position: absolute;
				top: 210px;
				left: -10px;
				border-radius: 10px;
				list-style: none;
				width: 20px;
				height: 20px;
				border: 1px solid #cccccc;
				background: #ffffff;
			}
		</style>
		<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
	</head>

	<body>

		<!--右側信息-->
		<div class="col-md-10 col-sm-10 col-xs-10" style="margin-top:30px;">
			<div class="col-md-4 col-sm-4 col-xs-4" id="timeleft">
				<div>2012-12-24 8:00</div>
				<div>2012-12-24 8:00</div>
				<div>2012-12-24 8:00</div>
				<div>2012-12-24 8:00</div>

			</div>

			<div class="col-md-4 col-sm-4 col-xs-4" id="timecenter">

				<div style="height:212px;  border-left:1px   solid  #366595; position:absolute;  left:65px;">
					<ul>
						<li class="cicle1"></li>
						<li class="cicle2"></li>
						<li class="cicle3"></li>
						<li class="cicle4"></li>
					</ul>

				</div>
			</div>

			<div class="col-md-4 col-sm-4 col-xs-4" id="timeright">
				<div>
					<p>完工交車</p>
					<p>1小時</p>
				</div>
				<div>
					<p>完工交車</p>
					<p>1小時</p>
				</div>

				<div>
					<p>完工交車</p>
					<p>1小時</p>
				</div>
				<div>
					<p>完工交車</p>
					<p>1小時</p>
				</div>

			</div>

		</div>

	</body>

</html>
原文作者：祈澈姑娘關注「編程微刊」公衆號，在微信後臺回覆「領取資源」，獲取IT資源300G乾貨大全。