📄题目要求
🔗html代码
<htmllang="en"><head><metacharset="UTF-8"><title>timeline</title><linktype="text/css"href="css/style.css"rel="stylesheet"/></head><body><divclass="cont"><divclass="biz_title"><h2>发展历程</h2><p>CONMPANY HISTORY</p></div><divclass="biz_timtline-box"><divclass="biz_timeline"><divclass="biz-timeline-box clearfix"><divclass="biz_timeline-time">2012.12</div><divclass="biz_timeline-node"></div><divclass="biz_timeline-eventbox"><divclass="biz_timeline-event">公司成立</div></div></div><divclass="biz-timeline-box clearfix"><divclass="biz_timeline-time">2013.02</div><divclass="biz_timeline-node"></div><divclass="biz_timeline-eventbox"><divclass="biz_timeline-event">园区业务方向</div></div></div><divclass="biz-timeline-box clearfix"><divclass="biz_timeline-time">2014.03</div><divclass="biz_timeline-node"></div><divclass="biz_timeline-eventbox"><divclass="biz_timeline-event">获天使轮投资900万元</div></div></div><divclass="biz-timeline-box clearfix"><divclass="biz_timeline-time">2013.09</div><divclass="biz_timeline-node"></div><divclass="biz_timeline-eventbox"><divclass="biz_timeline-event">业务转型互联网营销</div></div></div><divclass="biz-timeline-box clearfix"><divclass="biz_timeline-time">2016.06</div><divclass="biz_timeline-node"></div><divclass="biz_timeline-eventbox"><divclass="biz_timeline-event">V1.0版本上线</div></div></div><divclass="biz-timeline-box clearfix"><divclass="biz_timeline-time">2017.03</div><divclass="biz_timeline-node"></div><divclass="biz_timeline-eventbox"><divclass="biz_timeline-event">期待。。。。</div></div></div></div><divclass="biz_longString"></div></div></div></body></html>
🔗css代码
@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:0auto; /* ______(2)______;设置内边距上20px 左右为0,下为50px */padding: 20px050px;/*设置内边距上20px 左右为0,下为50px*/} .biz-timeline-box{ width:785px; /* ______(3)______;设置外边距上为0,左右自动,下为45px */margin: 0auto45px;/*设置外边距上为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: 040px40px0;/*设置圆角,左上角为0,右上角为40px,右下角为40px,左下角为0*/float: right;/*向右浮动*/} /*选择类.biz-timeline-box的偶数个元素*/.biz-timeline-box:nth-child(2n) .biz_timeline-eventbox{ border-radius: 40px0040px; float: left;/*向左浮动*/} /*选择类.biz-timeline-box的奇数个元素*//* .biz-timeline-box:______(4)______ .biz_timeline-event{ */.biz-timeline-box:nth-child(2n+1) .biz_timeline-event{ border-radius:030px30px0; } /*选择类.biz-timeline-box的偶数个元素*//* .biz-timeline-box:_____(5)______ .biz_timeline-event{ */.biz-timeline-box:nth-child(2n) .biz_timeline-event{ border-radius: 30px0030px; } /*选择类.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: 4pxsolid#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:4pxsolid#b22b2b; margin:29px40px; } .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:0auto35px; } .biz_titleh2{ font-size:28px; color:#d81919; } .biz_titlep{ color:#eca7a7; margin-top:15px; }
🎯要点分析
CSS3 :nth-child() 选择器
用法
设置奇偶数标签
带入公式
2n(偶数)
2n+1(奇数)
🧩最终效果