原创YouTube

HTML源码

<!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>Document</title>

    <link rel="stylesheet" href="index.css">

</head>

<body>

    <div class="wrapper">

        <div class="box-area">

            <div class="custom"></div>

            <div class="box-date">

                <span>2019</span>

            </div>

            <div class="box-text">

                <h2>演示标题</h2>

                <h3>Phd in computer science</h3>

                <p>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>

            </div>

        </div>

        <div class="box-area box-right">

            <div class="custom"></div>

            <div class="box-date">

                <span>2018</span>

            </div>

            <div class="box-text">

                <h2>演示标题</h2>

                <h3>Phd in computer science</h3>

                <p>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>

            </div>

        </div>

        <div class="box-area">

            <div class="custom"></div>

            <div class="box-date">

                <span>2017</span>

            </div>

            <div class="box-text">

                <h2>演示标题</h2>

                <h3>演示子标题</h3>

                <p>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>

            </div>

        </div>

        <div class="box-area box-right">

            <div class="custom"></div>

            <div class="box-date">

                <span>2016</span>

            </div>

            <div class="box-text">

                <h2>演示标题</h2>

                <h3>演示子标题</h3>

                <p>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>

            </div>

        </div>

        <div class="box-area">

            <div class="custom"></div>

            <div class="box-date">

                <span>2015</span>

            </div>

            <div class="box-text">

                <h2>演示标题</h2>

                <h3>演示子标题</h3>

                <p>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>

            </div>

        </div>

        <div class="box-area box-right">

            <div class="custom"></div>

            <div class="box-date">

                <span>2014</span>

            </div>

            <div class="box-text">

                <h2>演示标题</h2>

                <h3>演示子标题</h3>

                <p>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>

            </div>

        </div>

        <div class="box-area">

            <div class="custom"></div>

            <div class="box-date">

                <span>2013</span>

            </div>

            <div class="box-text">

                <h2>演示标题</h2>

                <h3>演示子标题</h3>

                <p>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>

            </div>

        </div>

        <div class="box-area box-right">

            <div class="custom"></div>

            <div class="box-date">

                <span>2012</span>

            </div>

            <div class="box-text">

                <h2>演示标题</h2>

                <h3>演示子标题</h3>

                <p>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>

            </div>

        </div>

        <div class="box-area">

            <div class="custom"></div>

            <div class="box-date">

                <span>2011</span>

            </div>

            <div class="box-text">

                <h2>演示标题</h2>

                <h3>演示子标题</h3>

                <p>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>

            </div>

        </div>

        <div class="box-area box-right">

            <div class="custom"></div>

            <div class="box-date">

                <span>2010</span>

            </div>

            <div class="box-text">

                <h2>演示标题</h2>

                <h3></h3>

                <p>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>

            </div>

        </div>

    </div>

</body>

</html>

CSS源码

* {

    box-sizing: border-box;

}

.wrapper {

    font-family: roboto;

    display: flex;

    flex-wrap: wrap;

    max-width: 800px;

    margin: 0 auto;

}

.box-area {

    display: flex;

    flex-wrap: nowrap;

    justify-content: center;

    width: 100%;

}

.box-date {

    display: flex;

    /* 原来是用渐变做的直线 */

    background: linear-gradient(to right, #fff 45%, #000 45%, #000 45%, #fff 50%);

    order: 2;

    text-align: center;

    font-size: 28px;

    flex-basis: 100px;

    color: #fff;

}

.box-date>span {

    font-size: 20px;

    padding: 10px;

    margin: auto;

    background: #000;

}

.box-text {

    text-align: center;

    padding: 20px;

    border-radius: 25px;

    color: #45f3ff;

    order: 3;

    width: 80%;

    padding-left: 10px;

    background: #000;

    margin-bottom: 3%;

}

.box-text h2 {

    margin: 0;

    font-size: 14px;

    text-transform: uppercase;

}

.box-text h3 {

    margin: 5px;

    font-size: 14px;

    color: #45f3ff;

}

@media(min-width:640px) {

    .box-text,

    .custom {

        width: 40%;

    }

    .box-right .box-text {

        order: 1;

        padding-right: 10px;

        border-radius: 25px;

    }

    .box-right .custom {

        order: 3;

    }

}

效果展示

纯CSS与HTML实现垂直时间轴的更多相关文章

  1. 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

  2. [置顶] 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

  3. HTML5+CSS3实现的响应式垂直时间轴

    <!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name=&qu ...

  4. 垂直时间轴HTML

    1.概述 用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰.一目了然能够看清事情发生的过程,UI页面也显示的那么清晰.如何用css+html做出时间轴展示事件点的?先来看看下面的 ...

  5. 利用css制作横向和纵向时间轴

    Html代码: <div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/&l ...

  6. 前端css实现最基本的时间轴

    原型: 图片.png 代码: <!DOCTYPE html > <html> <head> <link rel="stylesheet" ...

  7. 炫酷CSS3垂直时间轴特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jQuery时间轴插件timeline.js

    http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...

  9. Qt编写自定义控件64-垂直时间轴

    一.前言 垂直时间轴控件,主要用来描述企业发展历程大事件,或者软件版本迭代历史等,通过时间节点和事件描述来直观的展示发展的过程,一般在web网页或者app中经常看到此类控件,尤其是公司的官网关于公司部 ...

随机推荐

  1. Tomcat+nginx+Keepalived部署实现集群

    Tomcat+nginx+Keepalived部署实现集群 环境说明: 系统:Centos-7 主机:Centos-7 x3 IP地址: 服务器1(192.168.10.102/24) 服务器2(19 ...

  2. 构建大型 Vue.js 项目的10条建议

    下面是我在开发大型 Vue 项目时的最佳实践.这些技巧将帮助你开发更高效.更易于维护和共享的代码. 今年做自由职业的时候,我有机会开发了一些大型 Vue 应用程序.我所说的这些项目,Vuex stor ...

  3. js数组方法大全（上）

    # js数组方法大全(上) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 join() reverse() sort() concat() slice( ...

  4. 这份最新Python面试精选问题你会几道？

    相信很多小伙伴学python以后都想进大厂,但是进大厂前你得了解些大厂面试题,可以在面试前复习下,以下是精选的5道python面试题: 第一. Python 的特点和优点是什么? Python 可以作 ...

  5. java编程思想第四版第八章总结

    1. 多态的含义 面向对象的三大基本特征: 封装,继承,多态. 多态是干什么的? 多态将做什么和怎么做分离开.从另一个角度将接口是实现类分离开. 多态的作用 消除类型之间耦合的关系 使用多态的好处? ...

  6. (三)初识NumPy(数据CSV文件存取和多维数据的存取)

    本章主要介绍的是数据的CSV文件存取和多维数据的存取. 一.数据的CSV文件存取 1.CSV的写文件: np.savetxt(frame, array, fmt='%.18e', delimiter= ...

  7. 记一次LDAP主从同步配置

    LDAP主从同步 OpenLDAP在2.3版本之前的同步复制带有一系列缺点如只支持一主多从模式等,在此缺点就不多说,下文着重介绍一下OpenLDAP V2.4以后的同步负复制功能 同步功能 2.4版最 ...

  8. Android性能优化总结

    合理的管理内存 节制地使用Service,尽量使用IntentService 避免在Bitmap上浪费内存,压缩图片处理 谨慎使用抽象编程 尽量避免会用依赖注入框架 使用ProGuard简化代码,好处 ...

  9. Parallel Feature Pyramid Network for Object Detection

    Parallel Feature Pyramid Network for Object Detection ECCV2018 总结: 文章借鉴了SPP的思想并通过MSCA(multi-scale co ...

  10. day 22 面向对象的基础

    面向对象: 1.简述编写和执行类中的方法的流程 class Foo: #类的编写 def func(): print("我爱你") obj = Foo() #类的调用和执行 obj ...