zoukankan      html  css  js  c++  java
  • html+css :时间轴布局

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>time line</title>

    <style type="text/css">

    *{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    }

    body{

    background: #fff;

    font-family: "Helvetica Neue", sans-serif;

    margin: 50px;

    }

    #timeline{

    margin-left: 30%;

    border-left: 10px solid #bce1fa;

    }

    #timeline li{

    position: relative;

    list-style: none;

    display: block;

    100%;

    clear: both;

    }

    #timeline li::before{

    content: '';

    display: block;

    30px;

    height: 30px;

    border: 5px solid #bce1fa;

    border-radius: 50%;

    background: #3498DB;

    position: absolute;

    left: -25px;

    top: 0;

    /*box-sizing: border-box;*/

    }

    #timeline li time{

    position: absolute;

    left: -30%;

    top: 8px;

    25%;

    font-size: 21px;

    color: #AAA;

    text-align: right;

    }

    .timeline-content{

    position: relative;

    margin: 0 0 20px 5%;

    background: #57b4f6;

    color: #fff;

    border-radius: 4px;

    padding: 30px;

    }

    .timeline-content h1{

    font-size: 32px;

    margin-bottom: 20px;

    }

    .timeline-content::after{

    content:'';

    0;

    height: 0;

    border- 10px;

    border-style: solid;

    border-color: transparent #57b4f6 transparent transparent;

    position: absolute;

    left: -20px;

    top: 12px;

    }

    </style>

    </head>

    <body>

    <ul id="timeline">

       <li>

       <time datetime="2015-09-18">2015-9-18</time>

       <div class="timeline-content">

           <h1>Pablo Groisman</h1>

           <p>Ut ut magna ligula. Praesent vitae vestibulum magna. In lobortis metus non consequat vehicula. Fusce massa magna, pretium ut augue non, vehicula egestas leo. Ut lacinia viverra nunc, ut lobortis orci imperdiet id. Fusce dolor nulla, tempus vel dolor vel, accumsan facilisis sem. Curabitur congue odio a sem imperdiet finibus.</p>

       </div>

     </li>

     <li>

       <time datetime="2015-09-14">2015-9-14</time>

       <div class="timeline-content">

       <h1>Elliptic Equation</h1>

       <p>Pellentesque sagittis et sapien sit amet bibendum. Vestibulum eu purus quis ipsum sollicitudin ornare. Ut diam justo, lacinia id ante non, hendrerit pharetra felis. Donec dignissim in libero eu imperdiet. Nunc magna felis, ultrices eu nunc ac, aliquam imperdiet odio. Integer blandit velit vestibulum ex laoreet placerat. </p>

       </div>

     </li>

     <li>

           <time datetime="2015-09-13">2015-9-13</time>

           <div class="timeline-content">

           <h1>Praesent nulla</h1>

           <p>Aenean id nisl vestibulum ex venenatis gravida vel ac neque. Nulla at lacinia eros. In placerat semper orci, id facilisis risus interdum nec. Fusce velit dui, aliquam egestas aliquet vulputate, imperdiet sed ante. Proin pretium arcu ac augue varius consequat.</p>

           </div>

     </li>

     <li>

           <time datetime="2015-09-12">2015-9-12</time>

           <div class="timeline-content">

           <h1>Aenean mauris</h1>

           <p>Duis vehicula semper velit quis semper. Integer placerat tincidunt ipsum. Nulla facilisi. Aenean ut sapien varius, tincidunt justo nec, dictum orci. Donec fringilla nibh et felis eleifend porttitor. Etiam in molestie dui. Praesent nec neque id lectus egestas luctus nec eget tellus.</p>

           </div>

     </li>

     <li>

       <time datetime="2015-09-10">2015-9-10</time>

       <div class="timeline-content">

           <h1>Fusce ultrices</h1>

           <p>Sed turpis diam, lobortis eget neque sed, mollis egestas massa. Nunc dictum velit a nisl volutpat ullamcorper. Suspendisse vel posuere lacus. Nullam blandit erat ut fermentum facilisis. Nulla porttitor eget magna et finibus. Nullam nec leo tempus, gravida dolor id, dapibus magna. Aliquam erat volutpat.</p>

       </div>

     </li>

    </ul>

    </body>

    </html>

    【web前端25群】群号618237474

  • 相关阅读:
    百度网盘下载速度慢的问题解决
    问题汇总
    centos 遇到Name or service not known
    centos7 下 python3 和python2 同时存在但是无法使用pip3 的解决方案
    pycharm2020(最简单的方法)配置远程连接服务器
    pycharm2020.1.2激活
    centos安装成功bart标注工具
    keras遇到bert实战一(bert实现分类)
    使用Array.slice(0) 实现数组浅拷贝
    try/catch/finally 语句
  • 原文地址:https://www.cnblogs.com/xsns/p/6722184.html
Copyright © 2011-2022 走看看