小标题 随笔

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>花里胡哨</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
        integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <link rel="stylesheet" href="./res/css/timeline.css">
</head>

<body>
    <nav class="navbar is-dark">
        <div class="navbar-start">
            <span class="navbar-item" style="color: lawngreen;font-size: 1rem">(→_→)</span>
        </div>
        <div class="navbar-brand">
            <a href="#" class="navbar-item is-primary" style="color: rgb(221, 192, 24)">
                <span><i class="fa fa-user" aria-hidden="true"></i></span>
            </a>
        </div>
        <div class="navbar-item">
            <div class="field has-addons">
                <div class="control has-icons-left has-icons-right">
                    <input class="input" type="email" placeholder="content">
                    <span class="icon is-small is-left">
                        <i class="fas fa-square-root-alt    "></i>
                    </span>
                    <span class="icon is-small is-right">
                        <i class="fas  fa-meh-rolling-eyes "></i>
                    </span>
                </div>
                <div class="control">
                    <a href="#" class="button is-info">search</a>
                </div>
            </div>
        </div>
        <div class="navbar-end">
            <span class="navbar-item" style="color: lawngreen;font-size: 1rem">(←_←)</span>
        </div>
    </nav>
    <hr style="border: 3px solid lightcoral">
    <nav class="pagination is-rounded" role="navigation" aria-label="pagination">
        <a class="pagination-previous">Previous</a>
        <a class="pagination-next">Next page</a>
        <ul class="pagination-list">
            <li>
                <a class="pagination-link" aria-label="Goto page 1">1</a>
            </li>
            <li>
                <span class="pagination-ellipsis">&hellip;</span>
            </li>
            <li>
                <a class="pagination-link" aria-label="Goto page 45">45</a>
            </li>
            <li>
                <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
            </li>
            <li>
                <a class="pagination-link" aria-label="Goto page 47">47</a>
            </li>
            <li>
                <span class="pagination-ellipsis">&hellip;</span>
            </li>
            <li>
                <a class="pagination-link" aria-label="Goto page 86">86</a>
            </li>
        </ul>
    </nav>
    <!-- 时间线及相关事件 -->
    <div id="timeline_things">
        <div class="timeline_row" style="background-color: rgb(115, 201, 112)">
            <!-- 左侧序号 -->
            <div class="serial_number">
                <div>
                    &nbsp;
                </div>
                <span class="tag is-danger" style="z-index: 35;">01</span>
            </div>
            <!-- 内容 -->
            <div class="things_content">
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
            </div>
        </div>
        <div class="timeline_row" style="background-color: rgb(136, 170, 185)">
            <!-- 左侧序号 -->
            <div class="serial_number">
                <div>
                    &nbsp;
                </div>
                <span class="tag is-danger" style="z-index: 35;">02</span>
            </div>
            <!-- 内容 -->
            <div class="things_content">
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
            </div>
        </div>
        <div class="timeline_row" style="background-color: salmon">
            <!-- 左侧序号 -->
            <div class="serial_number">
                <div>
                    &nbsp;
                </div>
                <span class="tag is-danger" style="z-index: 35;">03</span>
            </div>
            <!-- 内容 -->
            <div class="things_content">
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
            </div>
        </div>
        <div class="timeline_row" style="background-color: rgb(115, 201, 112)">
            <!-- 左侧序号 -->
            <div class="serial_number">
                <div>
                    &nbsp;
                </div>
                <span class="tag is-danger" style="z-index: 35;">04</span>
            </div>
            <!-- 内容 -->
            <div class="things_content">
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
            </div>
        </div>
        <div class="timeline_row" style="background-color: rgb(136, 170, 185)">
            <!-- 左侧序号 -->
            <div class="serial_number">
                <div>
                    &nbsp;
                </div>
                <span class="tag is-danger" style="z-index: 35;">05</span>
            </div>
            <!-- 内容 -->
            <div class="things_content">
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
            </div>
        </div>
        <div class="timeline_row" style="background-color: salmon">
            <!-- 左侧序号 -->
            <div class="serial_number">
                <div>
                    &nbsp;
                </div>
                <span class="tag is-danger" style="z-index: 35;">06</span>
            </div>
            <!-- 内容 -->
            <div class="things_content">
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
            </div>
        </div>
        <div class="timeline_row" style="background-color: rgb(115, 201, 112)">
            <!-- 左侧序号 -->
            <div class="serial_number">
                <div>
                    &nbsp;
                </div>
                <span class="tag is-danger" style="z-index: 35;">07</span>
            </div>
            <!-- 内容 -->
            <div class="things_content">
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
            </div>
        </div>
        <div class="timeline_row" style="background-color: rgb(136, 170, 185)">
            <!-- 左侧序号 -->
            <div class="serial_number">
                <div>
                    &nbsp;
                </div>
                <span class="tag is-danger" style="z-index: 35;">08</span>
            </div>
            <!-- 内容 -->
            <div class="things_content">
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
            </div>
        </div>
        <div class="timeline_row" style="background-color: salmon">
            <!-- 左侧序号 -->
            <div class="serial_number">
                <div>
                    &nbsp;
                </div>
                <span class="tag is-danger" style="z-index: 35;">09</span>
            </div>
            <!-- 内容 -->
            <div class="things_content">
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
            </div>
        </div>
        <div class="timeline_row" style="background-color: rgb(110, 182, 103)">
            <!-- 左侧序号 -->
            <div class="serial_number">
                <div>
                    &nbsp;
                </div>
                <span class="tag is-danger" style="z-index: 35;">010</span>
            </div>
            <!-- 内容 -->
            <div class="things_content">
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
                <span>klsakl</span>
                <p>sss</p>
                <p>ll</p>
            </div>
        </div>
    </div>
</body>

</html>
.timeline_row{
    background-color: aqua;
    display: block;
    width: 100%;
    float: left;
    position: relative;
}
.serial_number{
    float: left;
    width: 20%;
    height: 100%;
    padding: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0);
}
.serial_number div{
    float: left;
    position: relative;
    background-color: saddlebrown;
    height: 100%;
    width: 5%;
    margin: 0 auto;
    z-index: 20;
    text-align: center;
    margin-left: 40%
}
.things_content{
    float: left;
    left: 20%;
    position: relative;
}
.timeline_things{
    width: 100%;
}

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄