原创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. JDK下载安装配置教程(详细)

    JDK下载安装配置教程(详细) 版权声明:本文为原创文章,转载请附上原文出处链接和本声明.https://www.cnblogs.com/mxxbc/p/11844885.html 因为最近需要在Wi ...

  2. Vue的指令以及组件化开发

    一. 自定义指令 如何: 1. 创建指令 Vue.directive("指令名",{ inserted(elem){//指令所在的元素被加载到DOM树上后自动执行指令 //elem ...

  3. 深入理解计算机系统 第八章 异常控制流 part1

    本章主旨 第八章的目的是阐述清楚应用程序是如何与操作系统交互的(之前章节的学习是阐述应用程序是如何与硬件交互的) 异常控制流 异常控制流,即 ECF(exceptional contril flow) ...

  4. Appium+python自动化（四十）-Appium自动化测试框架综合实践 - 代码实现（超详解）

    1.简介 今天我们紧接着上一篇继续分享Appium自动化测试框架综合实践 - 代码实现.由于时间的关系,宏哥这里用代码给小伙伴演示两个模块:注册和登录. 2.业务模块封装 因为现在各种APP的层出不群 ...

  5. arduino体感控制简单版

    https://learn.sparkfun.com/tutorials/apds-9960-rgb-and-gesture-sensor-hookup-guide/all 硬件连线 关键 VCC=  ...

  6. Geometry 判断几何是否被另一个几何/线段分割成多段

    如下图,如何判断几何多边形A被多边形B,切割为多段几何? 几何A被几何B切割 1. 获取几何A与几何B的交集C var intersectGeometry = new CombinedGeometry ...

  7. PHP实现日历签到，并实现累计积分功能

    在网站开发过程中我们会经常用到签到功能来奖励用户积分,或者做一些其他活动.这次项目开发过程中做了日历签到,因为没有经验所有走了很多弯路,再次记录过程和步骤. 1.日历签到样式:使用的是calendar ...

  8. mysql 导出 导入

    一.导出 windows下 切换到mysql安装目录bin目录下 导出 数据库lz_garden 下的 所有表结构 到d盘并命名为lz_garden.sql: D:\dev\MySQL\MySQL S ...

  9. SpringBoot 配置文件与依赖库分离打包配置

    一.应用场景 一般情况下我们对springboot应用打包时使用springboot的maven插件spring-boot-maven-plugin的maven进行打包,打包完成得到一个fatjar, ...

  10. 你的文章里为什么不放源码Github链接了

    "你的文章里为什么不放源码Github链接了?",一个读者这么问我 我把这张图发给了他,这是我之前放文章中Demo源码的Github仓库 他一脸疑惑,问我怎么了 经常使用Githu ...