<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#container{
width: 1100px;
height: 700px;
background-color: #EFEFF1;
position: relative;
margin: 0 auto;
}
#line {
width: 1px;
height: 658px;
background-image: url("../../img/f1_line.png");
position: absolute;
left: 50%;
}
#dot1,#dot2,#dot3,#dot4,#dot5,#dot6{
background-image: url("../../img/f6.png");
width: 18px;
height: 18px;
position: absolute;
}
#dot1{
top: 40px;
left: -15px;
}
#dot2{
top: 120px;
left: -9px;
}
#dot3{
top: 240px;
left: -9px;
}
#dot4{
top: 341px;
left: -9px;
}
#dot5{
top: 441px;
left: -9px;
}
#dot6{
top: 547px;
left: -9px;
}
#left1{
width: 480px;
height: 152px;
background-image: url("../../img/f3.png");
position: absolute;
top: 24px;
left: 54px;
}
#left2{
width: 480px;
height: 167px;
background-image: url("../../img/f4.png");
position: absolute;
top: 225px;
left: 54px;
}
#left3{
width: 480px;
height: 160px;
background-image: url("../../img/f5.png");
position: absolute;
top: 429px;
left: 54px;
}
#right1{
width: 480px;
height: 187px;
background-image: url("../../img/f7.png");
position: absolute;
top:104px;
left: 566px;
}
#right2 {
width: 480px;
height: 167px;
background-image: url("../../img/f2.png");
position: absolute;
top: 326px;
left: 566px;
}
#right3{
width: 480px;
height: 167px;
background-image: url("../../img/f1.png");
position: absolute;
top: 531px;
left: 566px;
}
</style>
<title>作业</title>
</head>
<body>
<div id="container">
<div id="line">
<div id="dot1"></div>
<div id="dot2"></div>
<div id="dot3"></div>
<div id="dot4"></div>
<div id="dot5"></div>
<div id="dot6"></div>
</div>
<div id="left1">
<p>2016</p>
</div>
<div id="right1">2015</div>
<div id="left2">2014</div>
<div id="right2">2013</div>
<div id="left3">2012</div>
<div id="right3">2011</div>
</div>
</body>
</html>
