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> ...
随机推荐
- FFmpeg命令行工具学习(三)：媒体文件转换工具ffmpeg
一.简述 ffmpeg是一个非常强大的工具,它可以转换任何格式的媒体文件,并且还可以用自己的AudioFilter以及VideoFilter进行处理和编辑.有了它,我们就可以对媒体文件做很多我们想做的 ...
- FFmpeg 结构体学习(八)：FFMPEG中重要结构体之间的关系
FFMPEG中结构体很多.最关键的结构体可以分成以下几类: 解协议(http,rtsp,rtmp,mms) AVIOContext,URLProtocol,URLContext主要存储视音频使用的协议 ...
- [Swift]LeetCode60. 第k个排列 | Permutation Sequence
The set [1,2,3,...,n] contains a total of n! unique permutations. By listing and labeling all of the ...
- [Swift]LeetCode128. 最长连续序列 | Longest Consecutive Sequence
Given an unsorted array of integers, find the length of the longest consecutive elements sequence. Y ...
- [SQL]LeetCode577.员工奖金 | Employee Bonus
Select all employee's name and bonus whose bonus is < 1000. Table:Employee +-------+--------+---- ...
- Python基础语法（三）
Python基础语法(三) 1. 数值型数据结构 1.1 要点 在之前的博客也有提到,数值型数据结构在这里就不过多介绍了.在这里提及一些需要知道的知识点. int.float.complex.bool ...
- MySQL casting from decimal to string(mysql decimal 转 varchar)
今天群里一个哥们问我mysql怎么将decimal转成varchar,经过查阅资料发现,mysql好像不能将decimal直接转换成varchar,但是可以转成char,原文链接:http://sta ...
- HTML基础知识点
HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) **** ...
- 快速搭建WebAPI（Odata+Code-First）附Odata条件查询表~
Odata是什么? 开放数据协议(Open Data Protocol,缩写OData)是一种描述如何创建和访问Restful服务的OASIS标准.该标准由微软发起,前三个版本1.0.2.0.3.0都 ...
- Elasticsearch索引原理
转载 http://blog.csdn.net/endlu/article/details/51720299 最近在参与一个基于Elasticsearch作为底层数据框架提供大数据量(亿级)的实时统计 ...