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> ...
随机推荐
- 东软实习<2>
学习过程及小节 Jdk在linux上的安装解压配置 Mysql的安装 配置 Tomcat的安装 配置 管理 SSH的安装 Notepad的连接与使用 对四大作用域及其范围进行了介绍 讲解了有关负载均衡 ...
- C++或C#调用外部exe的分析
假如有个外部程序名为A.exe,放在目录E:\temp\下,然后我们用C++或者C#写一个程序调用这个A.exe的话(假设这个调用者所在的路径在D:\invoke),通常会采用下面的代码: // C# ...
- 深入理解Spring Redis的使用 (三)、使用RedisTemplate的操作类访问Redis
上一篇说了RedisTemplate对注解事务的支持,以及提供的序列化器. 事务需要开启enableTransactionSupport,然后使用@transactional注解,里面直接通过回调的c ...
- 多媒体文件格式（一）：MP4 格式
在互联网常见的格式中,跨平台最好的应该就属MP4文件了.因为MP4文件既可以在PC平台的Flashplayer中播放,又可以在移动平台的Android.iOS等平台中进行播放,而且使用系统默认的播放器 ...
- [Swift]LeetCode200.岛屿的个数 | Number of Islands
Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is surro ...
- [Swift]LeetCode207. 课程表 | Course Schedule
There are a total of n courses you have to take, labeled from 0 to n-1. Some courses may have prereq ...
- [Swift]LeetCode400. 第N个数字 | Nth Digit
Find the nth digit of the infinite integer sequence 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ... Note:n is ...
- [Swift]LeetCode691. 贴纸拼词 | Stickers to Spell Word
We are given N different types of stickers. Each sticker has a lowercase English word on it. You wou ...
- Spring Boot: Yaml配置文件 以及 @ConfigurationProperties属性获取
Yaml配置文件 概述 Spring Boot在支持application.properties配置文件的同时,也支持application.yaml配置文件. 配置文件中的属性,可以通过: 通过@V ...
- Java货币金额转换为大写形式
package com.test; import java.math.BigDecimal; /** * * * 数字转换为汉语中人民币的大写<br> * */ public class ...