Css時間軸布局_Css時間軸布局案例整理

本文轉載自查看原文 2021-10-23 10:33 844 CSS/ Css時間軸布局

一、Css時間軸布局案例1，簡單版

特點：內容項高度自適應。

Css+Html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 100px;
        }

        .list {
            border: 1px solid red;
            position: relative;
            padding: 10px;
            overflow: hidden;
        }

        .list .line {
            position: absolute;
            width: 2px;
            height: 100%;
            background: #eee;
            top: 30px;
            left: 10px;
        }

        .list .item {
            margin-left: 15px;
            padding: 10px 0px;
            color: #888;
            position: relative;
            border: 0px solid green;
        }

        .list .item .time {
            padding-top: 5px;
            font-size: 12px;
        }

        .list .circle {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #ccc;
            position: absolute;
            top: 10px;
            left: -19px;
        }

        .list .circle1 {
            background: rgb(135, 201, 36);
            box-shadow: 0px 0px 5px 1px rgb(135, 201, 36);
        }
    </style>
</head>

<body>
    <!-- 時間軸布局案例 -->
    <div class="list">
        <!-- 線段 -->
        <div class="line"></div>
        <!-- 內容項+點 -->
        <div class="item">
            <div class="circle circle1"></div>
            <div class="text">
                小程序是當前最流行，體驗度最高的企業服務工具，宣傳工具，值得擁有！
            </div>
            <div class="time">
                2021-10-1 15:30
            </div>
        </div>
        <div class="item">
            <div class="circle"></div>
            <div class="text">
                小程序是當前最流行，體驗度最高的企業服務工具，宣傳工具，值得擁有！
            </div>
            <div class="time">
                2021-10-1 15:30
            </div>
        </div>
        <div class="item">
            <div class="circle"></div>
            <div class="text">
                小程序是當前最流行，體驗度最高的企業服務工具，宣傳工具，值得擁有！
                小程序是當前最流行，體驗度最高的企業服務工具，宣傳工具，值得擁有！
            </div>
            <div class="time">
                2021-10-1 15:30
            </div>
        </div>
        <div class="item">
            <div class="circle"></div>
            <div class="text">
                小程序是當前最流行，體驗度最高的企業服務工具，宣傳工具，值得擁有！
            </div>
            <div class="time">
                2021-10-1 15:30
            </div>
        </div>
    </div>
</body>

</html>

View Code

效果：

二、Css時間軸布局案例2，橫向時間軸

代碼案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-top: 50px;
        }

        .clear {
            clear: both;
        }

        .list {
            border: 0px solid red;
        }

        .list .line {
            height: 1px;
            background-color: gray;
        }

        .list .item {
            display: block;
            float: left;
            width: 20%;
            border: 0px solid blue;
            border-bottom: 0px solid blue;
            text-align: center;
            position: relative;
            /* padding: 0px 10px; */
        }

        .list .circle {
            width: 8px;
            height: 8px;
            background: blue;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: -4px;
            transform: translate(-50%, 0);
        }

        .list .time {
            padding: 5px;
            font-size: 12px;
            color: #8888;
        }

        .list .text {
            padding: 0px 10px;
        }
    </style>
</head>

<body>
    <div class="list">
        <div class="line"></div>
        <div class="item">
            <div class="circle cricle1"></div>
            <div class="time">
                2021-10-23 11:03
            </div>
            <div class="text">
                Css 浮動高度問題_Css浮動兄弟元素高度問題
            </div>
        </div>
        <div class="item">
            <div class="circle"></div>
            <div class="time">
                2021-10-23 11:03
            </div>
            <div class="text">
                摘要：一、Css 偽類選擇器
            </div>
        </div>
        <div class="item">
            <div class="circle"></div>
            <div class="time">
                2021-10-23 11:03
            </div>
            <div class="text">

                第二步
            </div>
        </div>
        <div class="item">
            <div class="circle"></div>
            <div class="time">
                2021-10-23 11:03
            </div>
            <div class="text">
                Css 浮動高度問題_Css浮動兄弟元素高度問題
            </div>
        </div>
        <div class="item">
            <div class="circle"></div>
            <div class="time">
                2021-10-23 11:03
            </div>
            <div class="text">
                Css 浮動高度問題
            </div>
        </div>
        <div class="clear"></div>
    </div>
</body>

</html>

View Code

顯示效果：

三、其他更多：

Css Div等比例縮放整理（一）

Css 左右循環動畫_左右循環運動效果案例

Css 文字選中設置樣式/Css 禁止文字選中

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css 常見時間軸的做法（————————————————時間軸——————————————————） html實現時間軸_純css實現響應式豎着/垂直時間抽布局效果 CSS繪制橫向時間軸水平時間軸 html + css 前端css實現最基本的時間軸 CSS- 橫向和縱向時間軸純CSS與HTML實現垂直時間軸用CSS實現時間軸總結 css實現時間軸 CSS- 橫向和縱向時間軸