.timeline>li h2,.product-info h1 { font-family:'Lato','Arial',Microsoft JhengHei,Lucida Sans Unicode,sans-serif; font-weight:400; } /*timeline*/ .timeline { list-style:none; padding:20px 0 20px; position:relative; margin-bottom:10px; } /*center line*/ .timeline:before { top:35px; bottom:0; position:absolute; content:" "; width:1px; left:50%; top:-37px; margin-left:-2px; background:#a69abd; } .timeline>li,.editor .timeline>li { margin-top:30px; position:relative; } .timeline>li:first-child,.editor .timeline>li:first-child { margin-top:0; } .timeline>li .timeline-panel img,.timeline>li .timeline-panel-r img,.editor .timeline>li .timeline-panel img,.editor .timeline>li .timeline-panel-r img { max-width:100%; } .editor .timeline>li:before,.timeline>li:before,.timeline>li:after { content:" "; display:table; width:0; } .timeline>li:after { clear:both; } /*right item*/ .editor .timeline>li>.timeline-panel,.timeline>li>.timeline-panel { width:44%; float:right; border-bottom:1px solid #a69abd; padding:0px; position:relative; padding:0 2% 20px 2%; text-align:left; background:rgba(255,255,255,0.1); border-radius:6px; } /*dot*/ .timeline>li .timeline-badge { color:#fff; width:16px; height:16px; line-height:60px; font-size:15px; text-align:center; position:absolute; top:20px; left:50%; margin-left:-9px; background-color:#bbdacf; z-index:100; border-top-right-radius:50%; border-top-left-radius:50%; border-bottom-right-radius:50%; border-bottom-left-radius:50%; } /*h2*/ .timeline>li h2 { color:#fff; font-size:35px; padding:0; margin:0; line-height:150%; font-weight:normal; } /*p*/ .timeline>li p { padding:0; line-height:180%; } .timeline>li .timeline-panel-r h2 { font-size:28px; font-weight:bolder; } .timeline>li:nth-child(2n) .timeline-panel { float:left; width:42%; } /*right item arrow*/ .timeline>li .timeline-panel:after { display:block; content:""; left:-16px; top:19px; position:absolute; border-style:solid; border-width:10px 16px 10px 0; border-color:transparent rgba(255,255,255,0.1) transparent transparent; } /*left item arrow*/ .timeline>li:nth-child(2n) .timeline-panel:after { display:block; content:""; left:auto; right:-16px; top:19px; position:absolute; border-style:solid; border-width:10px 0 10px 16px; border-color:transparent transparent transparent rgba(255,255,255,0.1); } /** iphone & bootsrtap XS **/ @media screen and (max-width:768px) { .editor .m-img100,.m-img100 { width:100%; max-width:100%; } /*end form*/ /*---- timeline----*/ .editor .timeline>li>.timeline-panel,.timeline>li>.timeline-panel { float:none; text-align:left; width:90%; margin:0 auto; } .editor .timeline>li>.timeline-panel:after,.timeline>li>.timeline-panel:after { background:none; } .timeline>li:nth-child(2n) .timeline-panel:after { border:none; } .editor .timeline>li>.timeline-panel p,.timeline>li>.timeline-panel p { float:none; } .editor .timeline>li>.timeline-panel span,.timeline>li>.timeline-panel span { width:100%; float:none; } .editor .timeline>li>.timeline-panel span:first-child,.timeline>li>.timeline-panel span:first-child { width:100%; } .timeline>li>.timeline-badge { position:relative; top:auto; left:0px; } .timeline:before { left:30px; top:20px; } .timeline>li .timeline-panel:after { display:none; } }.black-bg { background:#485563; /* fallback for old browsers */ background:-webkit-linear-gradient(to right,rgb(72,85,99),rgb(41,50,60)); /* Chrome 10-25,Safari 5.1-6 */ background:linear-gradient(to right,rgb(72,85,99),rgb(41,50,60)); /* W3C,IE 10+/ Edge,Firefox 16+,Chrome 26+,Opera 12+,Safari 7+ */ position:relative; color:#ddd; } .editor { line-height:220%; } .editor p { padding-bottom:10px; } .editor ul { padding-bottom:0px; -webkit-padding-start:0px; } .editor ul li { padding-left:30px; position:relative; } .editor ul li:before { background:#1f5a52; margin-left:-20px; content:''; border-radius:11px; width:8px; height:8px; display:block; position:absolute; top:15px; } .editor ul li img { vertical-align:middle; } .padded-tb100 { padding:100px 0; } .editor { line-height:220%; } .width { width:1200px; margin:0 auto; position:relative; z-index:9; } @media screen and (max-width:1024px) { .width { width:95%; max-width:95%; } }@media screen and (max-width:1199px) { .width,.header,#top-wrap,.oe_menu { width:100%; min-width:100%; } }
更新时间:2020-12-29 09:51:53
纯css实现自适应时间线