Timeline Style
from: https://freefrontend.com/css-timelines/
https://bootstrapthemes.co/items/resources/timeline/
https://github.com/twbs/bootstrap/releases
https://www.jotform.com/blog/15-code-snippets-for-timelines-91734/
https://bashooka.com/coding/javascript-timeline-libraries/
https://www.wptimeline.io/jqueryversion/
http://visjs.org/timeline_examples.html
css:
.demo{ background: #25303b;
padding: 100px 0;}
.heading-title
{
margin-bottom: 100px;
color: #fff;
}
.main-timeline{
width: 80%;
margin: 20px auto;
position: relative;
}
.main-timeline:before{
content: "";
display: block;
width: 2px;
height: 100%;
background: rgba(255,255,255,0.2);
margin: 0 0 0 -1px;
position: absolute;
top: 0;
left: 50%;
}
.main-timeline .timeline{
width: 100%;
margin-bottom: 20px;
position: relative;
}
.main-timeline .timeline:after{
content: "";
display: block;
clear: both;
}
.main-timeline .timeline-content{
width: 40%;
float: left;
margin: 5px 0 0 0;
border-radius: 6px;
}
.main-timeline .date{
display: block;
width: 70px;
height: 70px;
border-radius: 50%;
background: #25303b;
padding: 5px 0;
margin: 0 0 0 -36px;
position: absolute;
top: 0;
left: 50%;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
border: 2px solid rgba(255,255,255,0.2);
box-shadow: 0 0 0 7px #25303b;
}
.main-timeline .date span{
display: block;
text-align: center;
}
.main-timeline .day,
.main-timeline .year{
font-size: 10px;
}
.main-timeline .month{
font-size: 18px;
}
.main-timeline .title{
padding: 15px;
margin: 0;
font-size: 20px;
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
border-radius: 6px 6px 0 0;
position: relative;
}
.main-timeline .title:after{
content: "";
width: 10px;
height: 10px;
position: absolute;
top: 20px;
right: -5px;
transform: rotate(-45deg);
}
.main-timeline .description{
padding: 15px;
margin: 0;
font-size: 14px;
color: #656565;
background: #fff;
border-radius: 0 0 6px 6px;
}
.main-timeline .timeline:nth-child(2n+2) .timeline-content{
float: right;
}
.main-timeline .timeline:nth-child(2n+2) .title:after{
left: -5px;
}
/*有多少条要设置其量*/
.main-timeline .timeline:nth-child(1) .title,
.main-timeline .timeline:nth-child(1) .title:after{
background: #9f84c4;
}
.main-timeline .timeline:nth-child(2) .title,
.main-timeline .timeline:nth-child(2) .title:after{
background: #02a2dd;
}
.main-timeline .timeline:nth-child(3) .title,
.main-timeline .timeline:nth-child(3) .title:after{
background: #58b25e;
}
.main-timeline .timeline:nth-child(4) .title,
.main-timeline .timeline:nth-child(4) .title:after{
background: #efb715;
}
.main-timeline .timeline:nth-child(5) .title,
.main-timeline .timeline:nth-child(5) .title:after{
background: #ffe218;
}
.main-timeline .timeline:nth-child(6) .title,
.main-timeline .timeline:nth-child(6) .title:after{
background: #eab788;
}
@media only screen and (max-width: 990px){
.main-timeline{ width: 100%; }
}
@media only screen and (max-width: 767px){
.main-timeline:before,
.main-timeline .date{
left: 6%;
}
.main-timeline .timeline-content{
width: 85%;
float: right;
}
.main-timeline .title:after{
left: -5px;
}
}
@media only screen and (max-width: 480px){
.main-timeline:before,
.main-timeline .date{
left: 12%;
}
.main-timeline .timeline-content{
width: 75%;
}
.main-timeline .date{
width: 60px;
height: 60px;
margin-left: -30px;
}
.main-timeline .month{
font-size: 14px;
}
}@charset "utf-8";
/* CSS Document */
html5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="style/style.css">
<title>Timeline Style</title>
</head> <body>
<div class="demo">
<div class="container">
<div class="row text-center">
<h1 class="heading-title">Timeline Style</h1>
</div> <div class="row">
<div class="col-md-12">
<div class="main-timeline"> <div class="timeline">
<div class="timeline-content">
<span class="date">
<span class="day">10<sup>th</sup></span>
<span class="month">Apr</span>
<span class="year">2017</span>
</span>
<h2 class="title">Web Design</h2>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.</p>
</div>
</div> <div class="timeline">
<div class="timeline-content">
<span class="date">
<span class="day">12<sup>th</sup></span>
<span class="month">Apr</span>
<span class="year">2017</span>
</span>
<h2 class="title">Web Development</h2>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.</p>
</div>
</div> <div class="timeline">
<div class="timeline-content">
<span class="date">
<span class="day">14<sup>th</sup></span>
<span class="month">Apr</span>
<span class="year">2017</span>
</span>
<h2 class="title">Brand Building</h2>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.</p>
</div>
</div> <div class="timeline">
<div class="timeline-content">
<span class="date">
<span class="day">16<sup>th</sup></span>
<span class="month">Apr</span>
<span class="year">2017</span>
</span>
<h2 class="title">Responsive Design</h2>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus, quam non pellentesque consequat, massa justo elementum nunc, ac efficitur tortor nunc sit amet dolor.</p>
</div>
</div> <div class="timeline">
<div class="timeline-content">
<span class="date">
<span class="day">28<sup>th</sup></span>
<span class="month">Aug</span>
<span class="year">2017</span>
</span>
<h2 class="title">中国人民解放军</h2>
<p class="description">生中朝右发的凯撒奖地板革最悲歌罗东进榴莲味觉得撒开了房间.</p>
</div>
</div> <div class="timeline">
<div class="timeline-content">
<span class="date">
<span class="day">26<sup>th</sup></span>
<span class="month">Jun</span>
<span class="year">2018</span>
</span>
<h2 class="title">深圳市罗湖区布心路3008号</h2>
<p class="description">涂聚文，昵称：Geovin Du.繁體：塗聚文，生命在于运动。营养膳食养生。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </body>
</html>
效果：
Timeline Style的更多相关文章
- 纯css+js水平时间轴
自定义,并自动加载时间节点 当前时间节点居中,突出显示 时间动态无痕添加 效果图: 初始状态 时间左走到一定2016.1月后 html: <!-- 水平时间轴 --> <div id ...
- Devexpress VCL Build v2013 vol 13.2.2 发布
devexpress 2013 的第二个大版本出来了,一如既往, 基本上还是一个大补丁包.各位看官,自己看. What's New in 13.2.2 (VCL Product Line) New ...
- [RN] React Native 好用的时间线 组件
React Native 好用的时间线 组件 效果如下: 实现方法: 一.组件封装 CustomTimeLine.js "use strict"; import React, {C ...
- Qt控件样式 Style Sheet Demo
迟来的笔记,作为一个程序员每日记事已养成习惯,离开许久,不知不觉已喜欢用文字表达对技术的热爱,学无止境! Qt – 一个跨平台应用程序和UI开发框架:它包括跨平台类库.集成开发工具和跨平台 IDE,使 ...
- 【三石jQuery视频教程】03.创建垂直时间表(Timeline)
视频地址:http://v.qq.com/page/g/i/o/g0150rvi6io.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...
- JQuery时间轴timeline插件的学习-Lateral On-Scroll Sliding with jQuery+technotarek / timeliner
一.Lateral On-Scroll Sliding with jQuery的使用 View demo Download source 1. HTML结构 <div id=" ...
- 使用Chrome DevTools的Timeline分析页面性能
随着webpage可以承载的表现形式更加多样化,通过webpage来实现更多交互功能,构建web应用程序已经成为很多产品的首要选择.这种方式拥有非常明显的优势:跨平台.开发便捷.便于部署和维护等等,但 ...
- Google C++ Style Guide在C++11普及后的变化
转 http://www.cnblogs.com/chen3feng/p/5972967.html?from=timeline&isappinstalled=0&lwfrom=user ...
- echarts实现上海地域PM值（map、timeline）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- emWin实现ATM机界面设计，含uCOS-III和FreeRTOS两个版本
第1期:ATM机配套例子:V6-900_STemWin提高篇实验_ATM机(uCOS-III)V6-901_STemWin提高篇实验_ATM机(FreeRTOS) 例程下载地址:http://foru ...
- 【RL-TCPnet网络教程】第12章 TCP传输控制协议基础知识
第12章 TCP传输控制协议基础知识 本章节为大家讲解TCP(Transmission Control Protocol,传输控制协议),通过本章节的学习,需要大家对TCP有个基本的认识,方 ...
- 【安富莱】【RL-TCPnet网络教程】第7章 RL-TCPnet网络协议栈移植（裸机）
第7章 RL-TCPnet网络协议栈移植(裸机) 本章教程为大家讲解RL-TCPnet网络协议栈的裸机移植方式,学习了上个章节讲解的底层驱动接口函数之后,移植就比较容易了,主要是添加库文 ...
- [SQL]LeetCode185. 部门工资前三高的员工 | Department Top Three Salaries
SQL 架构 Create table If Not Exists Employee (Id ), Salary int, DepartmentId int) Create table If Not ...
- [Swift]LeetCode264.丑数 II | Ugly Number II
Write a program to find the n-th ugly number. Ugly numbers are positive numbers whose prime factors ...
- [Swift]LeetCode301. 删除无效的括号 | Remove Invalid Parentheses
Remove the minimum number of invalid parentheses in order to make the input string valid. Return all ...
- [Swift]LeetCode986. 区间列表的交集 | Interval List Intersections
Given two lists of closed intervals, each list of intervals is pairwise disjoint and in sorted order ...
- 虎牙数万主播同时在线直播的秘密，CDN推流日志上行实时监控
6 月 10 日,又拍云 Open Talk | 2018 音视频技术沙龙·深圳站 顺利落幕,来自虎牙的直播运维研发架构师张波在沙龙上做了<基于CDN推流日志的主播上行实时监控及其自动化解密&g ...
- A10映射方法
#创建服务 slb server rs_10.90.6.95 10.90.6.95 port 5001 tcp slb server rs_10.90.6.96 10.90.6.96 port 500 ...
- C#版 - Leetcode 414. Third Maximum Number题解
版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. C#版 - L ...