zoukankan      html  css  js  c++  java

  • css 常见时间轴的做法（————————————————时间轴——————————————————）

    <!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 {
				 85%;
				margin: 30px auto;
				padding-top: 20px;
				padding-bottom: 20px;
				border-left: 1px solid #2B9EEF;
			}
			
			#demo1 li {
				margin-top: 20px;
				 100%;
			}
			
			#demo1 li img {
				 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 {
				 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;
				 100%;
				color: red;
			}
			
			#demo2 li img {
				 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 {
				 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;
				 1px;
				background: red;
			}
			
			#demo3 li.lf {
				padding-top: 30px;
				 45%;
				margin-left: 5%;
			}
			
			#demo3 li.lf img {
				float: right;
				 13px;
				margin-right: -7px;
			}
			
			#demo3 li.lf div {
				text-align: right;
				margin-right: 30px;
			}
			
			#demo3 li.rt {
				 45%;
				margin-top: 30px;
				margin-left: 50%;
			}
			
			#demo3 li.rt img {
				float: left;
				 13px;
				margin-left: -7px;
			}
			
			#demo3 li.rt div {
				text-align: left;
				margin-left: 30px;
			}
			/***********************************/
			
			ul#demo4 {
				height: 720px;
				 1px;
				background: red;
				z-index: 1;
				position: relative;
				left: 50%;
				padding-top: 20px;
			}
			
			ul#demo4 li.lf {
				 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 {
				 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;
	 100%;
	height: auto;
	padding-bottom: 10px;
}

.heads .logos {
	 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 {
	 100%;
	height: auto;
}

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

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

.bodys .border .msgs1 {
	 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 {
	 100%;
	 36px;
	height: 36px;
	margin-left: -18px;
	background-color: white;
	float: left;
}

.bodys .border .msgs1 .load {
	 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;
	 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;
	 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;
}

    　　

    　
  • 相关阅读:
    js正则表达式——数字校验
    php curl cookie 读写
    Java遍历所有网卡打印对应IP
    mysql 查看数据库大小
    执行mvn 报错 source-1.5 中不支持 diamond运算符
    php开学之环境搭建
    ubuntu漂亮主题
    CleanAop使用笔记
    python学习笔记(五)
    python学习笔记(四)
  • 原文地址：https://www.cnblogs.com/libin-1/p/6131125.html
Copyright © 2011-2022 走看看