注意知识点：

1、border-radius = 60%，通过设置尺寸和背景色，作为圆圈，替代图片，

2、：nth-of-type（odd）或：nth-of-type（even），直接实现奇数项、偶数项的分配，

3、排版时，float和text-align对齐方式相反，向左float的、向右对齐，

4、Word-break：break-all；给文字排版自动排版，结尾可在字中换行，

5、box-sizing：border-box；固定高度，border、padding均在其内扣减，

6、a标签去掉下划线，需要伪类设置 text-decoration 和 color，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exercise</title>
    <script src="jquery-1.12.4.min.js"></script>
    <style>
        html *{
            font-family:"微软雅黑",Arial;
            font-size:14px;
            color:#2d2d2d;
        }
        body{
            background:#f2f1f1;
        }
        a:link{color:#2d2d2d;text-decoration:none;}
        a:visited{color:#2d2d2d;text-decoration:none;}
        a:hover{color:#2d2d2d;text-decoration:none;}
        a:active{color:#2d2d2d;text-decoration:none;}
        .title{
            text-align:center;
        }
        #timeLine{
            margin:0 auto;
            position:relative;
            width:800px;
            box-sizing:border-box;
            overflow:hidden;
        }
        .border{
            width:1px;
            height:100%;
            position:absolute;
            top:0;
            left:50%;
            margin-left:-.5px;
            background:#888;
        }
        .timeNode{
            box-sizing:border-box;
            width:100%;
            overflow:hidden;
            margin-bottom:10px;
        }
        .timeNode .dot{
            width:10px;height:10px;
            border-radius:60%;
            background:#888;
            display:block;
            margin:8px auto;
        }
        .timeNode:nth-of-type(odd) .detail{
            text-align:left;
            float:right;
        }
        .timeNode:nth-of-type(even) .detail{
            text-align:right;
            float:left;
        }
        .timeNode .detail .time{
            font-size:12px;
            margin-bottom:3px;
            color:#aaa;
        }
        .timeNode .detail{
            box-sizing:border-box;
            width:50%;
            padding:0 10px;
        }
        .timeNode .detail p{
            word-break:break-all;
        }
    </style>
</head>
<body>
    <h4 class="title">CSS3时间轴</h4>
    <section id="timeLine">
        <div class="border"></div>
        <div class="timeNode">
            <div class="dot"><span></span></div>
            <div class="detail">
                <div class="time">2017-8-30</div>
                <div><p>青春留不住，诗酒趁年华。</p></div>
            </div>
        </div>
        <div class="timeNode">
            <div class="dot"><span></span></div>
            <div class="detail">
                <div class="time">2017-8-30</div>
                <div><p>雨打梨花深，任谁的青春？</p></div>
            </div>
        </div>
        <div class="timeNode">
            <div class="dot"><span></span></div>
            <div class="detail">
                <div class="time">2017-8-30</div>
                <div><a href="#">不肯嫁春风，却被秋风误！</a></div>
            </div>
        </div>
        <div class="timeNode">
            <div class="dot"><span></span></div>
            <div class="detail">
                <div class="time">2017-8-30</div>
                <div><a href="#">浮云一别后，流水十年间。</a></div>
            </div>
        </div>
        <div class="timeNode">
            <div class="dot"><span></span></div>
            <div class="detail">
                <div class="time">2017-8-30</div>
                <div><a>几度梅花发，谁人在天涯。</a></div>
            </div>
        </div>
    </section>
</body>
</html>
View Code