css 常見時間軸的做法（————————————————時間軸——————————————————）

本文轉載自查看原文 2016-12-04 16:44 1932

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				border: 0px;
				list-style: none;
			}
			
			ul#demo1,
			ul#demo2 {
				width: 85%;
				margin: 30px auto;
				padding-top: 20px;
				padding-bottom: 20px;
				border-left: 1px solid #2B9EEF;
			}
			
			#demo1 li {
				margin-top: 20px;
				width: 100%;
			}
			
			#demo1 li img {
				width: 13px;
				float: left;
				height: auto;
				margin-top: 5px;
				margin-left: -7px;
			}
			
			#demo1 li div {
				color: #666666;
				margin-left: 50px;
				text-align: left;
			}
			
			#demo1 li p {
				width: 40px;
				height: 40px;
				line-height: 40px;
				color: #2B9EEF;
				float: left;
				margin-left: -20px;
				margin-top: -11px;
				border-radius: 50%;
				background: white;
				border: 1px solid #2B9EEF;
				text-align: center;
			}
			/**************************************/
			
			#demo2 li {
				margin-top: 20px;
				width: 100%;
				color: red;
			}
			
			#demo2 li img {
				width: 13px;
				float: left;
				height: auto;
				margin-top: 5px;
				margin-left: -7px;
			}
			
			#demo2 li div {
				margin-left: 30px;
			}
			
			#demo2 li div h4 {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			#demo2 li div p {
				-webkit-line-clamp: 3;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-box-orient: vertical;
				display: -webkit-box !important;
			}
			/**************************************/
			
			ul#demo3 {
				width: 100%;
				height: auto;
				margin: 30px auto;
				position: relative;
			}
			
			ul#demo3:before {
				content: "";
				display: block;
				padding-top: 30px;
				position: absolute;
				left: 50%;
				top: 0px;
				height: 500px;
				width: 1px;
				background: red;
			}
			
			#demo3 li.lf {
				padding-top: 30px;
				width: 45%;
				margin-left: 5%;
			}
			
			#demo3 li.lf img {
				float: right;
				width: 13px;
				margin-right: -7px;
			}
			
			#demo3 li.lf div {
				text-align: right;
				margin-right: 30px;
			}
			
			#demo3 li.rt {
				width: 45%;
				margin-top: 30px;
				margin-left: 50%;
			}
			
			#demo3 li.rt img {
				float: left;
				width: 13px;
				margin-left: -7px;
			}
			
			#demo3 li.rt div {
				text-align: left;
				margin-left: 30px;
			}
			/***********************************/
			
			ul#demo4 {
				height: 720px;
				width: 1px;
				background: red;
				z-index: 1;
				position: relative;
				left: 50%;
				padding-top: 20px;
			}
			
			ul#demo4 li.lf {
				width: 155px;
				position: relative;
				left: 0px;
				margin-left: -149px;
			}
			
			ul#demo4 li.lf img {
				float: right;
			}
			
			ul#demo4 li.lf div {
				margin-right: 30px;
				 
			}
			

			ul#demo4 li.rt {
				width: 155px;
				position: relative;
				left: 0px;
				margin-left: -6px;
			}
			
			ul#demo4 li.rt img {
				float: left;
			}
			ul#demo4 li.rt div {
				margin-left: 30px;
			}
		</style>
	</head>

	<body>
		<ul id="demo1">
			<li>
				<img src="img/gwm_my_quan.png" />
				<div>百度(www.baidu.com)（Nasdaq:BIDU)是全球最大的中文搜索引擎，2000年1月由李彥宏、徐勇兩人創立於北京中關村，致力於向人們提供“簡單，可依賴”的信息獲取方式。 “百度”二字源於中國宋朝詞人辛棄疾的《青玉案》詩句：“眾里尋他千百度”，象征着百度對中文信息檢索技術的執著追求。</div>
			</li>
			<li>
				<img src="img/gwm_my_quan.png" />
				<div>百度以自身的核心技術“超鏈分析”為基礎，提供的搜索服務體驗贏得了廣大用戶的喜愛；超鏈分析就是通過分析鏈接網站的多少來評價被鏈接的網站質量，這保證了用戶在百度搜索時，越受用戶歡迎的內容排名越靠前。百度總裁李彥宏就是超鏈分析專利的唯一持有人，目前該技術已為世界各大搜索引擎普遍采用。</div>
			</li>
			<li>
				<p>2016</p>
				<div>百度擁有全球最大的中文網頁庫，目前收錄中文網頁已超過12億，這些網頁的數量每天正以千萬級的速度在增長；同時，百度在中國各地分布的服務器，能直接從最近的服務器上，把所搜索信息返回給當地用戶，使用戶享受極快的搜索傳輸速度。</li>
			</li>
		</ul>
		<ul id="demo2">
			<li>
				<img src="img/gwm_my_quan.png" />
				<div>
					<h4>百度(www.baidu.com)（Nasdaq:BIDU)是全球最大的中文搜索引擎</h4>
					<p>2000年1月由李彥宏、徐勇兩人創立於北京中關村，致力於向人們提供“簡單，可依賴”的信息獲取方式。 “百度”二字源於中國宋朝詞人辛棄疾的《青玉案》詩句：“眾里尋他千百度”，象征着百度對中文信息檢索技術的執著追求。</p>
				</div>
			</li>
			<li>
				<img src="img/gwm_my_quan.png" />
				<div>
					<h4>百度(www.baidu.com)（Nasdaq:BIDU)是全球最大的中文搜索引擎</h4>
					<p>2000年1月由李彥宏、徐勇兩人創立於北京中關村，致力於向人們提供“簡單，可依賴”的信息獲取方式。 “百度”二字源於中國宋朝詞人辛棄疾的《青玉案》詩句：“眾里尋他千百度”，象征着百度對中文信息檢索技術的執著追求。</p>
				</div>
			</li>
		</ul>
		<ul id="demo3">
			<li class="lf">
				<img src="img/gwm_my_quan.png" />
				<div>
					<h4>百度是全球最大的中文搜索引擎</h4>
					<p>2000年1月由李彥宏、徐勇兩人創立於北京中關村，致力於向人們提供“簡單，可依賴”的信息獲取方式。 “百度”二字源於中國宋朝詞人辛棄疾的《青玉案》詩句：“眾里尋他千百度”，象征着百度對中文信息檢索技術的執著追求。</p>
				</div>
			</li>
			<li class="rt">
				<img src="img/gwm_my_quan.png" />
				<div>
					<h4>百度是全球最大的中文搜索引擎</h4>
					<p>2000年1月由李彥宏、徐勇兩人創立於北京中關村，致力於向人們提供“簡單，可依賴”的信息獲取方式。 “百度”二字源於中國宋朝詞人辛棄疾的《青玉案》詩句：“眾里尋他千百度”，象征着百度對中文信息檢索技術的執著追求。</p>
				</div>
			</li>
		</ul>
		<ul id="demo4">
			<li class="lf">
				<img src="img/gwm_my_quan.png" />
				<div>
					<h4>百度是全球最大的中文搜索引擎</h4>
					<p>2000年1月由李彥宏、徐勇兩人創立於北京中關村，致力於向人們提供“簡單，可依賴”的信息獲取方式。 “百度”二字源於中國宋朝詞人辛棄疾的《青玉案》詩句：“眾里尋他千百度”，象征着百度對中文信息檢索技術的執著追求。</p>
				</div>
			</li>
			<li class="rt">
				<img src="img/gwm_my_quan.png" />
				<div>
					<h4>百度是全球最大的中文搜索引擎</h4>
					<p>2000年1月由李彥宏、徐勇兩人創立於北京中關村，致力於向人們提供“簡單，可依賴”的信息獲取方式。 “百度”二字源於中國宋朝詞人辛棄疾的《青玉案》詩句：“眾里尋他千百度”，象征着百度對中文信息檢索技術的執著追求。</p>
				</div>
			</li>
		</ul>
	</body>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>狀態提醒</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/loading.css" />
	</head>

	<body>

		<div class="heads">
			<div class="logos bg4"></div>
			<div class="msg">必填信息未完成</div>
			<div class="time">(預計完成時間：5分鍾)</div>
		</div>

		<div class="bodys">
			<img class="hu" src="images/loading/bu_img.png" />
			<div class="border">
				<div class="msgs1">
					<div class="bg">
						<div class="load finish"></div>
					</div>
					<p class="red">必填信息未完成必填信息未完成必填信成必填信</p>
				</div>
				<div class="msgs1">
					<div class="bg">
						<div class="load loads"></div>
					</div>
					<p class="hui">資料審核</p>
				</div>
				<div class="msgs1">
					<div class="bg">
						<div class="load tishi"></div>
					</div>
					<p class="hui">申請借款</p>
				</div>
				<div class="msgs1">
					<div class="bg">
						<div class="load weiwancheng"></div>
					</div>
					<p class="red">申請借款</p>
				</div>
			</div>
		</div>
		
		<div class="wanshan">完善信息</div>	
		
	</body>

</html>

* {
	padding: 0;
	margin: 0;
}

html,
body {
	background: white;
}

.heads {
	background: #1888F5;
	width: 100%;
	height: auto;
	padding-bottom: 10px;
}

.heads .logos {
	width: 69px;
	padding-top: 12px;
	height: 54px;
	margin: 0 auto;
}

.heads .logos.bg1.hide {
	background: url("../images/loading/xinxi_icon.png") no-repeat center center;
	background-size: 69px 54px;
}

.heads .logos.bg2.hide {
	background: url("../images/loading/pingfen_icon.png") no-repeat center center;
	background-size: 69px 54px;
}

.heads .logos.bg3.hide {
	background: url("../images/loading/qianbao_icon.png") no-repeat center center;
	background-size: 69px 54px;
}

.heads .logos.bg4 {
	background: url("../images/loading/shenhe_icon.png") no-repeat center center;
	background-size: 69px 54px;
}

.heads .msg {
	padding-top: 19px;
	text-align: center;
	font-family: "微軟雅黑";
	font-size: 23px;
	color: white;
}

.heads .time {
	padding-top: 15px;
	text-align: center;
	font-family: "微軟雅黑";
	font-size: 14px;
	color: #89c9ff;
}

.bodys {
	width: 100%;
	height: auto;
}

.bodys img.hu {
	width: 100%;
	display: block;
	margin: 0 auto;
	z-index: 100;
	margin-top: -2px;
}

.bodys .border {
	width: 80%;
	height: auto;
	margin: -10px auto 0px;
	border-left: 1px solid #dadada;
}

.bodys .border .msgs1 {
	width: 100%;
	padding-top: 20px;
}

.bodys .border .msgs1:first-child {
	padding-top: 30px;
}

.bodys .border .msgs1:last-child p {
	padding-bottom: 0px;
}

.bodys .border .msgs1:last-child p:after {
	padding-bottom: 0px;
	height: 0px;
}

.bodys .border .msgs1 .bg {
	width: 100%;
	width: 36px;
	height: 36px;
	margin-left: -18px;
	background-color: white;
	float: left;
}

.bodys .border .msgs1 .load {
	width: 20px;
	z-index: 100;
	height: 20px;
	margin-top: 8px;
	margin-left: 8px;
	display: block;
}

.bodys .border .load.finish {
	background-image: url("../images/loading/finish2_icon.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px 20px;
}

.bodys .border .load.tishi {
	background-image: url("../images/loading/tishi2_icon.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px 20px;
}

.bodys .border .load.loads {
	background-image: url("../images/loading/load.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 20px 20px;
	-webkit-animation: loads 2s linear infinite;
	animation: loads 2s linear infinite;
}

@-webkit-keyframes loads {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes loads {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}

.bodys .border .load.weiwancheng {
	background-image: url("../images/loading/weiwancheng_icon.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 13px 13px;
}

.bodys .border .msgs1 p {
	color: #ff6738;
	overflow: hidden;
	margin-left: 45px;
	padding-bottom: 25px;
	margin-top: 10px;
	position: relative;
	font-size: 17px;
}

.bodys .border .msgs1 p::after {
	content: "";
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 1px;
	background: #DADADA;
	transform: scaleY(0.3);
}

.bodys .border .msgs1 p.red {
	color: #ff6738;
}

.bodys .border .msgs1 p.hui {
	color: #a8a8a8;
}

.wanshan {
	margin: 60px auto;
	width: 60%;
	height: 44px;
	line-height: 44px;
	text-align: center;
	border-radius: 22px;
	color: white;
	background: #1E90EA;
	box-shadow: 0px 0px 2px 3px #b6dffc;
}

.hide {
	display: none !important;
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 uniapp 時間軸 CSS繪制橫向時間軸水平時間軸 html + css 前端css實現最基本的時間軸 CSS- 橫向和縱向時間軸純CSS與HTML實現垂直時間軸用CSS實現時間軸總結 css實現時間軸 CSS- 橫向和縱向時間軸 Css時間軸布局_Css時間軸布局案例整理