原创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. 零基础小白入门IT开发指南

    先自我介绍以下,本人是一枚刚毕业不到两年的某一线城市的程序员,本科阶段专业是计算机科学与技术.从大四开始出去实习到现在的编码经验也有快2年半了,两年半的时间包括实习在内任职过有4家公司,包括一家互联网 ...

  2. js取两位小数点

    var money = one.money; var tmoney = money.substr(0,money.indexOf(".")+3);

  3. python机器学习——随机梯度下降

    上一篇我们实现了使用梯度下降法的自适应线性神经元,这个方法会使用所有的训练样本来对权重向量进行更新,也可以称之为批量梯度下降(batch gradient descent).假设现在我们数据集中拥有大 ...

  4. 微信小程序云开发获取文件夹下所有文件

    上周一个高中同学让我帮他做个图片展示的公众号,因为一直在加班的原因,所以一时忘了,昨晚想起来就赶紧加班加点的帮他弄了下,遇到了个问题,记录一下. 他的需求是要有个后台给他上传图片并且将图片归类,前端公 ...

  5. Linux访问控制列表

    首先我们来了解下权限,在Linux里常规的权限有r(读)w(写)x(执行),特殊权限有SUID,SGID,Sticky权限,分别作用在文件(或目录)的所有者,所属组和其他(既不是所有者,也不是所属组的 ...

  6. 说一说，“NetWork Wall”所用到技术

    2010年1月17日,Google在其官方网站上发布了一篇名为<A new approach to China>的博文,在博文中,Google官方透露,将停止过滤搜索结果.在国内市场上停止 ...

  7. 【algo&ds】3.栈和队列

    1.堆栈 堆栈(Stack):具有一定操作约束的线性表(只在一端(栈顶,Top)做插入.删除) 先进后出特性 1.1堆栈的抽象数据类型描述 类型名称: 堆栈(Stack) 数据对象集:一个有0个或多个 ...

  8. Java基础：8种基本数据类型，取值范围和储存字节说明。

    Java中,一共有8种基本数据类型: 4种整数型:int,short,long,byte. 2种浮点型:float,double. 1种字符类型:char. 1种表示真值的类型:boolean. [S ...

  9. 【前端知识体系-CSS相关】CSS预处理器

    1.常见的CSS预处理器有哪些? [!NOTE] css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CS ...

  10. NetCore3.0 文件上传与大文件上传的限制

    NetCore文件上传两种方式 NetCore官方给出的两种文件上传方式分别为“缓冲”.“流式”.我简单的说说两种的区别, 1.缓冲:通过模型绑定先把整个文件保存到内存,然后我们通过IFormFile ...