zoukankan      html  css  js  c++  java
  • 时间轴

    在前端网看到个时间轴的效果,故简单模范了个。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            body{margin: 50px;}
            .container{margin-left: 30%;list-style: none;border-left: 10px solid #405665;}
            .container li{position: relative;display: block;}
            .container li:before{position: absolute;left: -60px;top: -1px;content: '';width: 30px;height: 30px;border-radius: 100%;background-color: #405665;}
            .container time{position: absolute;left: -21%;top: 14px;color: #aaa;font-weight: bold;}
            .content{padding: 30px;margin-bottom: 20px;color: #fff;background-color: #405665;border-radius: 10px;}
            .content:before{position: absolute;top: 20px;left: -3%;content:'';width: 0;height: 0;border: 15px solid transparent;border-right-color: #405665;}
        </style>
    </head>
    <body>
        <ul class="container">
            <li>
                <time>2016-04-14</time>
                <div class="content">
                    <h4>Strong survive!</h4>
                    <p>This is test This is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is test</p>
                </div>
            </li>
            <li>
                <time>2016-04-14</time>
                <div class="content">
                    <h4>Strong survive!</h4>
                    <p>This is test This is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is test</p>
                </div>
            </li>
            <li>
                <time>2016-04-14</time>
                <div class="content">
                    <h4>Strong survive!</h4>
                    <p>This is test This is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is test</p>
                </div>
            </li>
            <li>
                <time>2016-04-14</time>
                <div class="content">
                    <h4>Strong survive!</h4>
                    <p>This is test This is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is testThis is test</p>
                </div>
            </li>
        </ul>
    </body>
    </html>

    传送门

  • 相关阅读:
    快速上手Unity原生Json库
    Unity3D安卓出包报错
    Git快速入门
    [Modern OpenGL系列(四)]在OpenGL中使用Shader
    [Modern OpenGL系列(三)]用OpenGL绘制一个三角形
    [Modern OpenGL系列(二)]创建OpenGL窗口
    [Modern OpenGL系列(一)]十步搞定OpenGL开发环境
    [Unity游戏开发]向量在游戏开发中的应用(三)
    [Unity游戏开发]向量在游戏开发中的应用(二)
    【leetcode】-两数之和
  • 原文地址:https://www.cnblogs.com/11lang/p/6746486.html
Copyright © 2011-2022 走看看