body { margin:0; font:12px 微软雅黑,宋体,Arial,sans-serif; } html,body { -webkit-text-size-adjust:none; background:#fff; } div,form,input,textarea,p,ul,li,dl,dt,dd,h1,table,h2 { padding:0; margin:0; font-size: 14px; color: #333; } li { list-style-type:none; } ol,ul { list-style:none; } input { vertical-align:middle; font-size:100%; } img { vertical-align:top; border:0; } em,i { font-style:normal; } .l { float:left; } .r { float:right; } .c { clear:both; } .o { overflow:hidden; } .left { float:left; } .right { float:right; } a { color:#000; text-decoration:none; } a:hover { color:#F60; text-decoration:underline; } .clearfix { *zoom:1; } .clearfix:before,.clearfix:after { display:table; content:""; } .clearfix:after { clear:both; } .content { position:relative; width:1000px; margin:0 auto; } ul, li { list-style: none; } a { text-decoration: none; } a:hover{ text-decoration: none; cursor: point; } hr { height: 0; border-left: none; border-right: 0; border-top: 1px dashed #d1d4dc; } .top{ margin-top: 60px; } .top img{ width: 100%; margin-top: -10px; } .content { padding: 50px 0; min-height: 720px; width: 100%; } .content .wrapper { position: relative; width: 960px; margin: 0 auto; } .content .line-left { position: absolute; left: 0; top: 15px; width: 70px; } .content .line-right { position: absolute; right: 0; top: 15px; width: 460px; } .content .main { background: url("line-bg.png") repeat-y 249px 0; } .content .main .title { position: absolute; line-height: 40px; padding-left: 67px; left: 230px; top: 0; color: #ff5500; font-size: 24px; background: url("clock.png") no-repeat left top; } .content .main .year { position: relative; z-index: 100; } .content .main .year h2 { height: 40px; width: 170px; padding-right: 30px; font-size: 24px; line-height: 40px; text-align: right; } .content .main .year h2 a { color: ##ff5500; } .content .main .year h2 i{ display:block; position:relative; height:0; width:0; left:190px; top:-20px; border-width:6px; border-style:solid; border-color:#ff5500 transparent transparent transparent; -webkit-transition:.5s; -moz-transition:.5s; -ms-transition:.5s; -o-transition:.5s; transition:.5s; -webkit-transform-origin:6px 3px; -moz-transform-origin:6px 3px; -ms-transform-origin:6px 3px; -o-transform-origin:6px 3px; transform-origin:6px 3px } .content .main .year .list{ margin:10px 0; position:relative; overflow:hidden; -webkit-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; -moz-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; -ms-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; -o-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s } .content .main .year .list ul { bottom: 0; } .content .main .year .list ul li { background: url("circle.png") no-repeat 235px 31px; padding: 30px 0; color: #a1a4b8; } .content .main .year .list ul li.highlight { background-image: url("circle.png"); } .cls { zoom: 1; } .cls:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .content .main .year .list ul li.highlight .date, .content .main .year .list ul li.highlight .intro { color: #ec6a13; } .content .main .year .list ul li .date,.content .main .year .list ul li .version{ float:left; display:block; clear:left; width:200px; line-height:24px; text-align:right } .content .main .year .list ul li .date{ font-size:24px; line-height:32px; color:#bec1d5 } .content .main .year .list ul li .intro, .content .main .year .list ul li .more { float: left; display: block; width: 600px; margin-left: 100px; line-height: 24px; } .content .main .year .list ul li .intro { font-size: 18px; line-height: 32px; color: #63d029; } .content .wrapper:first-child .main .year.close h2 i{ transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -o-transform:rotate(-90deg) } .content .wrapper:first-child .main .year.close .list{ opacity:0; height:0!important; } .ie7 .content .main .year h2 i{ left:40px }