原创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. 「CF630C」Lucky Numbers

    更好的阅读体验 Portal Portal1: Codeforces Portal2: Luogu Description The numbers of all offices in the new ...

  2. 更新linux时候提示“由于没有公钥，无法验证下列签名".

    本文链接:https://blog.csdn.net/loovejava/article/details/21837935 新安装的Ubuntu在使用sudo apt-get update更新源码的时 ...

  3. php递归删除文件夹

    php递归删除文件夹 <pre> public function deldir($path) { //如果是目录则继续 if (is_dir($path)) { //扫描一个文件夹内的所有 ...

  4. Linux命令大全(个人整理，如不全面望谅解)

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  5. nyoj 217-a letter and a number (char)

    217-a letter and a number 内存限制:64MB 时间限制:3000ms 特判: No 通过数:4 提交数:5 难度:1 题目描述: we define f(A) = 1, f( ...

  6. （二十九）golang--map

    map:是key-value数据结构,又称为字段或者关联数组,类似其它编程语言的集合: 基本语法:var 名称 map[键类型]值类型 key的类型可以是:bool.数字.string.指针.管道,还 ...

  7. 力扣（LeetCode）买卖股票的最佳时机 个人题解

    给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润. 注意你不能在买入股票前卖出股票. 示例 ...

  8. python：爬虫1——实战（下载一张图片、用Python模拟浏览器，通过在线的有道词典来对文本翻译）

    一.下载一只猫 import urllib.request response = urllib.request.urlopen("http://cdn.duitang.com/uploads ...

  9. Django笔记-连载（记录2018-12-16）

    1.django从1.9开始ForeignKey中的on_delete参数是必须的. hbook = models.ForeignKey('BookInfo')这句代码就让BookInfo类和Hero ...

  10. useReducer的基本使用

    import React, { useReducer } from 'react'; function Reducers () { const [count,dispatch] = useReduce ...