纯CSS与HTML实现垂直时间轴
原创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实现垂直时间轴的更多相关文章
- 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！
前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...
- [置顶] 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！
前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...
- HTML5+CSS3实现的响应式垂直时间轴
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name=&qu ...
- 垂直时间轴HTML
1.概述 用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰.一目了然能够看清事情发生的过程,UI页面也显示的那么清晰.如何用css+html做出时间轴展示事件点的?先来看看下面的 ...
- 利用css制作横向和纵向时间轴
Html代码: <div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/&l ...
- 前端css实现最基本的时间轴
原型: 图片.png 代码: <!DOCTYPE html > <html> <head> <link rel="stylesheet" ...
- 炫酷CSS3垂直时间轴特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery时间轴插件timeline.js
http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...
- Qt编写自定义控件64-垂直时间轴
一.前言 垂直时间轴控件,主要用来描述企业发展历程大事件,或者软件版本迭代历史等,通过时间节点和事件描述来直观的展示发展的过程,一般在web网页或者app中经常看到此类控件,尤其是公司的官网关于公司部 ...
随机推荐
- m74 考试反思
这次不叫考试题解,叫做考试反思,为什么折磨说,因为这次犯的错误太多了! 事情还要从昨天晚上说起,昨晚放学,班主任来机房说我被子不合格,要停课反思 ###&&￥%#%￥@#%￥#@……% ...
- 2.基础：Vue组件的核心概念
一.组件基础和注册 组件概念 组件系统是 Vue 的另一个重要概念,他的核心就是封装和复用. 细节 组件的name必须是全局唯一. 二.属性.事件和插槽 组件的三大核心概念:属性.事件和插槽. 属性, ...
- CAS Server集成QQ登录、新浪微博登录源码及配置文件
转载自素文宅博客:https://blog.yoodb.com/yoodb/article/detail/1446 CAS Server集成QQ第三方登录,CAS Server集成新浪微博第三方登录以 ...
- 比较器中的comparing方法以及涉及到的知识
今天在学习Java核心技术集合程序清单9-3时遇到了问题. 代码如下 public class TreeSetTest { public static void main(String[] args) ...
- 深入理解Kafka必知必会（2）
Kafka目前有哪些内部topic,它们都有什么特征?各自的作用又是什么? __consumer_offsets:作用是保存 Kafka 消费者的位移信息 __transaction_state:用来 ...
- 在WebView中加载HTML页面时显示进度对话框的方法
webView.setWebViewClient(new WebViewClient(){ ProgressDialog prDialog; @Overri ...
- pwnable.kr 第一天
1.FD 直接通过ssh连接上去,然后,看下源代码. #include <stdio.h> #include <stdlib.h> #include <string.h& ...
- STDN: Scale-Transferrable Object Detection论文总结
概述 STDN是收录于CVPR 2018的一篇目标检测论文,提出STDN网络用于提升多尺度目标的检测效果.要点包括:(1)使用DenseNet-169作为基础网络提取特征:(2)提出Scale-tra ...
- 新闻实时分析系统-Flume数据采集准备
Flume是Cloudera提供的一个高可用的,高可靠的,分布式的海量日志采集.聚合和传输的系统,Flume支持在日志系统中定制各类数据发送方,用于收集数据:同时,Flume提供对数据进行简单处理,并 ...
- 常见HTTP请求头和响应头
2. 常用的HTTP请求头 协议头 说明 示例 状态 Accept 可接受的响应内容类型(Content-Types). Accept: text/plain 固定 Accept-Charset 可接 ...