liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Aiberle历程</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
				<style>
			article, section, time, aside {
				display: block;
			}
			.point-time {
				content: "";
				position: absolute;
				width: 16px;
				height: 16px;
				top: 45%;
				left:5%;
				background: #fff;
				margin-left: -7px;
				border-radius: 50%;
				border: 4px solid #958570;
			}
			.content {
				width: 100%;
				margin: 0 auto;
			}
			.content article {
				position: relative;
			}
			.content article > h3 {
				width: 100%;
				height: 20px;
				line-height: 20px;
				text-align: left;
				text-indent: 3%;
				font-size: 1.4em;
				color: #fff;
				padding: 10px 0 20px;
				background-color: #dd6d01;
			}
			.content article section {
				padding: 0;
				position: relative;
			}
			.content article section:before {
				content: "";
				width: 2px;
				top: 0;
				bottom: 0;
				left: 5%;
				background: #e6e6e6;
				position: absolute;
			}
			/*.content article section:last-child:before {
				display: none;
			}*/
			.content article section time {
				width: 12%;
				display: block;
				position: absolute;
				top: 44%;
				left: 8%;
			}
			.content article section time > span {
				display: block;
				text-align: center;
			}
			.content article section aside {
				color: #3a3a38;
				margin-left: 20%;
			}
			.content article section .brief {
				color: #9f9f9f;
			}
			.content article section .things {
				padding: 10px 10px 0 0;
				position: relative;
			}
			.content article section .things img {
				width: 100%;
				display: block;
			}
		</style>
		<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
		<script>
			//屏蔽分享
			document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
				WeixinJSBridge.call('hideOptionMenu');
			});
		</script>
	</head>
	<body style="background: #fff;">
	<div class="loading-bg">
			<div class="mui-loading">
				<div class="mui-spinner">
				</div>
				&nbsp;&nbsp;加载中...
			</div>
	</div>
	<div class="mui-content" style="background: #fff;">
			<div class="content">
					<article>
						<section>
							<span class="point-time"></span>
							<time datetime="2006">
								<span>2006</span>
							</time>
							<aside>
								<p class="things">
									<img src="images/pp-time.jpg" />
									<img style="position: absolute;top: 0;left: 0;width: 100%;" src="images/pp-time-2006.png" />
								</p>
							</aside>
						</section>
						<section>
							<span class="point-time"></span>
							<time datetime="2007">
								<span>2007</span>
							</time>
							<aside>
								<p class="things">
									<img src="images/pp-time.jpg" />
									<img style="position: absolute;top: 0;left: 0;width: 100%;" src="images/pp-time-2007.png" />
								</p>
							</aside>
						</section>
						<section>
							<span class="point-time"></span>
							<time datetime="2011">
								<span>2011</span>
							</time>
							<aside>
								<p class="things">
									<img src="images/pp-time.jpg" />
									<img style="position: absolute;top: 0;left: 0;width: 100%;" src="images/pp-time-2011.png" />
								</p>
							</aside>
						</section>
						<section>
							<span class="point-time point-green"></span>
							<time datetime="2014">
								<span>2014</span>
							</time>
							<aside>
								<p class="things">
									<img src="images/pp-time.jpg" />
									<img style="position: absolute;top: 0;left: 0;width: 100%;" src="images/pp-time-2014.png" />
								</p>
							</aside>
						</section>
						<section>
							<span class="point-time"></span>
							<time datetime="2016">
								<span>2016</span>
							</time>
							<aside>
								<p class="things">
									<img src="images/pp-time.jpg" />
									<img style="position: absolute;top: 0;left: 0;width: 100%;" src="images/pp-time-2016.png" />
								</p>
							</aside>
						</section>
						<section style="padding-bottom: 10px;">
							<span class="point-time"></span>
							<time datetime="2017">
								<span>2017</span>
							</time>
							<aside>
								<p class="things">
									<img src="images/pp-time.jpg" />
									<img style="position: absolute;top: 0;left: 0;width: 100%;" src="images/pp-time-2017.png" />
								</p>
							</aside>
						</section>
					</article>
				</div>
	</div>
	<script type="text/javascript" src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
	mui.ready(function(){
		document.querySelector('.loading-bg').style.display='none';
	});
	</script>
	</body>
</html>