原创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. 一份自用的webpack配置文件及其配置说明

    1.webpack.config.js const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plu ...

  2. 「Usaco2012 Dec」第一（字典树+拓扑排序）

    (我恨字符串) 惯例化简题目:给定n个字符串,可以改变字符的相对大小(在字典序中的大小),问:字符串i是否能成为最小的字符串(字典序) 解题过程: 首先你可以预处理出来26的全排列然后暴力然后你只要用 ...

  3. Python实现日志文件写入或者打印--类似于Java的Log4j

    开发过Java的应该都知道Log4j的重要性,尤其是在开发测试中,能够让开发和测试人员方便找的bug,Python也有和Log4j相同功能的库那就是logging库,其功能非常强大,在开发测试中很方便 ...

  4. win7 安装php插件imagick

        win7 安装php插件imagick  <h2>安装步骤:</h2><h2><a name="t1"></a> ...

  5. Java设计模式(20)：命令模式

    本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 1.场景描述 智能电脑的品牌越来越多,由此诞生了一款电脑控制的APP,万能遥控器,用户在使用遥控器的时候,可以切换为自家电视的品 ...

  6. MySql——创建数据表，查询数据，排序查询数据

    参考资料:<Mysql必知必会> 创建数据表 在学习前首先创建数据表和插入数据.如何安装mysql可以看看上个博客https://www.cnblogs.com/lbhym/p/11675 ...

  7. java编程思想第四版第五章总结

    1. 构造器 构造器的一个重要的作用: 保证对象被使用之前初始化了. 构造器是一种特殊类型的方法, 因为他没有返回值.这与返回值为空(void)明显不同.对于空返回值,尽管方法本身不会自动返回什么, ...

  8. 通过myclipse建立一个简单的Hibernate项目（PS：在单元测试中实现数据的向表的插入）

    Hibernate的主要功能及用法: Ⅰ.Hibernate封装了JDBC,使Java程序员能够以面向对象的思想对数据库进行操作 Ⅱ.Hibernate可以应用于EJB的J2EE架构,完成数据的持久化 ...

  9. codeblocks在Ubuntu 18 下的安装

    codeblocks在Ubuntu 18 下的安装: 1. 现在应用中心直接下载CodeBlocks IDE: 2. Ctrl + Alt + T 打开终端 Terminal 3. 输入:  sudo ...

  10. nyoj 38-布线问题(prim, sort)

    38-布线问题 内存限制:64MB 时间限制:1000ms Special Judge: No accepted:5 submit:11 题目描述: 南阳理工学院要进行用电线路改造,现在校长要求设计师 ...