时间轴

作者: w_wx_x | 来源:发表于2018-12-27 13:31 被阅读5次

51个css时间轴
公用ui组建封装
用了那么多Todo list，终于找到一款电子版国誉手帐
Day_01
即兴演讲万能公式—时间轴结构
【转】商学教育的核心是唤醒
框架学习法学习语文
Alamofire(4)
宿命
项目规划时间轴流程图

事件时间轴.png

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>事件时间轴</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .timeLine{
            margin-top: 10%;
            margin-left: 30%;
            border-left: 10px solid #0e9db6;
        }
        .timeLine li{
            list-style: none;
            display: block;
            width: 90%;
            position: relative;
            background-color: cornflowerblue;
            margin-left: 20px;
            margin-bottom: 20px;
            padding: 12px 10px;
            box-sizing: border-box;
            color: white;
        }
        .timeLine li:before{
            content: '';
            display: block;
            width: 25px;
            height: 25px;
            border: 4px solid yellowgreen;
            border-radius: 50%;
            background-color: bisque;
            position: absolute;
            left: -42px;
            top: 0;
        }
        .timeLine li:after{
            content: '';
            width: 0;
            height: 0;
            border-width: 10px;
            border-style: solid;
            border-color: transparent cornflowerblue transparent transparent;
            position: absolute;
            top: 6px;
            left: -16px;
        }
        .timeLine li time{
            width: 20%;
            position: absolute;
            top: 5px;
            left: -28%;
            font-size: 21px;
            text-align: right;
            color: #AAA;
        }
        .timeLine li h1{
            font-size: 24px;
            margin-bottom: 20px;
        }
        .timeLine li p{
            text-indent: 1em;
            overflow: hidden;
            word-wrap: break-word;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <ul class="timeLine">
        <li>
            <time datetime="2018-12-25">2018-12-25</time>
            <h1>事件题目一</h1>
            <p>内容一1554455545555555555555555555555555555555555555555555555555555555555554444444455555555555555555555555555555555555555555555555554444444444444444444444444444444444444444444444</p>
        </li>
        <li>
            <time datetime="2018-12-25">2018-12-25</time>
            <h1>事件题目二</h1>
            <p>内容二77777777777777777777777777777777755555555555555555555555555555555555555555555555554444444477777777777777777777777777777777777777777777777777777777777777777777777777777777777</p>
        </li>
        <li>
            <time datetime="2018-12-25">2018-12-25</time>
            <h1>事件题目三</h1>
            <p>内容三9999999999999999999999999999999999999999999555555555555555555555555555555555555555555555555544444444999999999999999999999999999999999999999999999999999999999999999999999</p>
        </li>
        <li>
            <time datetime="2018-12-25">2018-12-25</time>
            <h1>事件题目四</h1>
            <p>6666666666666666666666666666666666665555555555555555555555555555555555555555555555555444444446666666666665555555555555555544444444999999999999999996666666666666666666666666666666666666666666。。。。。。</p>
        </li>
    </ul>
</body>
</html>