<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>timeline</title>
	<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="cont">
	<div class="biz_title">
		<h2>发展历程</h2>
		<p>CONMPANY HISTORY</p>
	</div>
	
	<div class="biz_timtline-box">
		<div class="biz_timeline">
			<div class="biz-timeline-box  clearfix">
				<div class="biz_timeline-time">2012.12</div>
				<div class="biz_timeline-node"></div>
				<div class="biz_timeline-eventbox">
					<div class="biz_timeline-event">公司成立</div>
				</div>
			</div>
			<div class="biz-timeline-box  clearfix">
				<div class="biz_timeline-time">2013.02</div>
				<div class="biz_timeline-node"></div>
				<div class="biz_timeline-eventbox">
					<div class="biz_timeline-event">园区业务方向</div>
				</div>
			</div>
			<div class="biz-timeline-box  clearfix">
				<div class="biz_timeline-time">2014.03</div>
				<div class="biz_timeline-node"></div>
				<div class="biz_timeline-eventbox">
					<div class="biz_timeline-event">获天使轮投资900万元</div>
				</div>
			</div>
			<div class="biz-timeline-box  clearfix">
				<div class="biz_timeline-time">2013.09</div>
				<div class="biz_timeline-node"></div>
				<div class="biz_timeline-eventbox">
					<div class="biz_timeline-event">业务转型互联网营销</div>
				</div>
			</div>
			<div class="biz-timeline-box  clearfix">
				<div class="biz_timeline-time">2016.06</div>
				<div class="biz_timeline-node"></div>
				<div class="biz_timeline-eventbox">
					<div class="biz_timeline-event">V1.0版本上线</div>
				</div>
			</div>
			<div class="biz-timeline-box  clearfix">
				<div class="biz_timeline-time">2017.03</div>
				<div class="biz_timeline-node"></div>
				<div class="biz_timeline-eventbox">
					<div class="biz_timeline-event">期待。。。。</div>
				</div>
			</div>
		</div>
		<div class="biz_longString"></div>
	</div>
	
</div>


</body>
</html>

@charset "utf-8";
ul,li{
	list-style: none;
}
body{
	font-family: "microsoft yahei";
	margin:0;
	padding:0;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	/* ______(1)______;溢出隐藏  */
	overflow:auto;/*溢出隐藏*/ 
	clear: both;
}
.cont{
	width:1000px;
	margin:0 auto;
	/* ______(2)______;设置内边距上20px 左右为0,下为50px */
	padding: 20px 0 50px;/*设置内边距上20px 左右为0,下为50px*/
}
.biz-timeline-box{
	width:785px;
	/* ______(3)______;设置外边距上为0，左右自动，下为45px */
	margin: 0 auto 45px;/*设置外边距上为0，左右自动，下为45px*/
}
/*选择类.biz-timeline-box的奇数个元素*/
/* .biz-timeline-box:______(4)______ .biz_timeline-eventbox{ */
.biz-timeline-box:nth-child(2n+1) .biz_timeline-eventbox{
	/* _____(6)______;设置圆角，左上角为0，右上角为40px，右下角为40px,左下角为0 */
	/* _____(7)______;向右浮动 */
	border-radius: 0 40px 40px 0;/*设置圆角，左上角为0，右上角为40px，右下角为40px,左下角为0*/
	float: right;/*向右浮动*/
}
/*选择类.biz-timeline-box的偶数个元素*/
.biz-timeline-box:nth-child(2n) .biz_timeline-eventbox{
	border-radius: 40px 0 0 40px;
	float: left;/*向左浮动*/
}
/*选择类.biz-timeline-box的奇数个元素*/
/* .biz-timeline-box:______(4)______ .biz_timeline-event{ */
.biz-timeline-box:nth-child(2n+1) .biz_timeline-event{
	border-radius:0 30px 30px 0;
}
/*选择类.biz-timeline-box的偶数个元素*/
/* .biz-timeline-box:_____(5)______ .biz_timeline-event{ */
.biz-timeline-box:nth-child(2n) .biz_timeline-event{
	border-radius: 30px 0 0 30px;
}
/*选择类.biz-timeline-box的奇数个元素*/
/* .biz-timeline-box:______(4)______ .biz_timeline-time{ */
.biz-timeline-box:nth-child(2n+1) .biz_timeline-time{
	/* _____(8)______;向左浮动 */
	float: left;;/*向左浮动*/
	width:344px;
	text-align: right;
}
/*选择类.biz-timeline-box的偶数个元素*/
/* .biz-timeline-box:_____(5)______ .biz_timeline-time{ */
.biz-timeline-box:nth-child(2n) .biz_timeline-time{
	/* _____(7)______;向右浮动 */
	float: right;/*向右浮动*/
	width:344px;
	text-align: left;
}
/*选择类.biz-timeline-box的偶数个元素*/
/* .biz-timeline-box:_____(5)______ .biz_timeline-node{ */
.biz-timeline-box:nth-child(2n) .biz_timeline-node{
	/* _____(7)______;向右浮动 */
	float: right;/*向右浮动*/
}
/*选择类.biz-timeline-box的奇数个元素*/
/* .biz-timeline-box:______(4)______ .biz_timeline-node{ */
.biz-timeline-box:nth-child(2n+1) .biz_timeline-node{
	/* _____(8)______;向左浮动 */
	float: left;/*向左浮动*/
}
.biz_timeline-time{
	font-size:16px;
	color:#d81919;
	/* _____(9)______: 600;设置文字加粗 */
	font-weight: 600;/*设置文字加粗*/
	/* _____(10)______:73px;设置行高 */
	line-height:73px;/*设置行高*/
}
.biz_timeline-eventbox{
	width: 336px;
	height: 69px;
	/* _____(11)______;设置边框宽为4px,边框线为实心线 */
	border: 4px solid #d94646;/*设置边框宽为4px,边框线为实心线*/
	text-align: center;
}
.biz_timeline-event{
	width:323px;
	height:57px;
	margin:6px;
	color:#fff;
	background:#d94646;
	text-align: center;
	font-size:16px;
	line-height:57px;
}
.biz_timeline-node{
	width:8px;
	height:8px;
	/* _____(12)______;设置圆角 */
	border-radius: 50%;/*设置圆角*/
	background: #fff;
	border:4px solid #b22b2b;
	margin:29px 40px;
}
.biz_longString{
	/* _____(13)______;设置绝对定位 */
	position: absolute;/*设置绝对定位*/
	left:50%;
	width:8px;
	height:700px;
	background:#bfbfbf;
	top:-57px;
	/* _____(14)______:10;设置层级 */
	z-index:10;/*设置层级*/
	margin-left:-4px;
}
.biz_timtline-box{
	/* _____(15)______;设置相对定位 */
	position: relative;/*设置相对定位*/
	margin-top:100px;
}
.biz_timeline{
	/* _____(14)______:20;设置层级 */
	/* _____(15)______;设置相对定位 */
	z-index:20;/*设置层级*/
	position: relative;/*设置相对定位*/
}
.biz_title{
	text-align: center;
	margin:0 auto 35px;
}
.biz_title h2{
	font-size:28px;
	color:#d81919;
}
.biz_title p{
	color:#eca7a7;
	margin-top:15px;
}