问题日志-简易css时间轴特效

参考文章：https://blog.csdn.net/qq_30304751/article/details/81570814，感谢前辈。

因为自己是个新手，想做一个求职在线简历，所以一个简陋时间轴特效。异常简陋。

思路：每一个事件格子都用一个div包裹，用其border的一条线来叠加，实现一个时间长线条，对图标则使用position给定位过去。没有用vue，就直接原生写的。效果如下：

问题日志-简易css时间轴特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 250px;
            float: left;
        }
        .cornerImg{
            height: 50px;
            width: 50px;
            float: left;
            position: relative;
            top:-5px;
            left: 10px;
        }
        .textBox{
            margin-left: 50px;
            height: 200px;
            width: 270px;
            border-top: 5px solid #999999;
        }
        .time{
            display: inline-block;
            margin-left: 10px;
        }
        /**与.box的width相等*/
        .cornerImg img{
            max-width:100%;
            max-height:100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="cornerImg"><img src="star.png" alt=""></div>
    <span class="time">2016-2017</span>
    <div class="textBox">
       <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
        <!--<p>text</p>-->
    </div>
</div>
<div class="box">
    <div class="cornerImg"><img src="star.png" alt=""></div><span class="time">2017-2018</span>
    <div class="textBox">
        <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
        <!--<p>text</p>-->
    </div>
</div>
<div class="box">
    <div class="cornerImg"><img src="star.png" alt=""></div><span class="time">2018-2019</span>
    <div class="textBox">
        <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
        <!--<p>text</p>-->
    </div>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dingwei{
            margin-top:200px;
        }
        .box{
            width: 300px;
            height: 120px;
            border-left: 5px solid #999999;
            /*background-color: pink;*/
            margin-top: 30px;
            margin-left: 50%;
            position: relative;
            left: -150px;
            top:0
        }
        .cornerImg{
            height: 50px;
            width: 50px;
            float: left;
            position: absolute;
            left: -29px;
            top: 0;
        }
        .time{
            position: absolute;
            left: -120px;
            top:-20px;
        }
        .textBox{
            margin-left: 20px;
            height: 80px;
            width: 250px;
            /*background-color: red;*/
        }
        .textBox p {
            margin-top: 5px;
            text-indent: 1rem;
        }
        /**与.box的width相等
        如果竖直就是height对齐 */
        .cornerImg img{
            max-width:100%;
            max-height:100%;
            position: absolute;
            top: -40px;
            left: 0;
        }
    </style>
</head>
<body>
<div id="dingwei">
    <div class="box">
        <div class="cornerImg"><img src="star.png" alt=""></div>
        <span class="time">2016-2017</span>
        <div class="textBox">
            <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
            <!--<p>text</p>-->
        </div>
    </div>
    <div class="box">
        <div class="cornerImg"><img src="star.png" alt=""></div><span class="time">2017-2018</span>
        <div class="textBox">
            <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
            <!--<p>text</p>-->
        </div>
    </div>
    <div class="box">
        <div class="cornerImg"><img src="star.png" alt=""></div><span class="time">2018-2019</span>
        <div class="textBox">
            <p>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</p>
            <!--<p>text</p>-->
        </div>
    </div>
</div>
</body>
</html>

.box是整个div的类名，.cornerImg这个是边线链接出的图片，.time这个类名里写的是时间，.textBox这个是描述文本。也没有出现p标签出去，图片掉下来的现场。

还有一个demo完善的比较好https://blog.csdn.net/Mr_dong_ya_yun/article/details/81507412，日后再研究。