时间轴CSS的Demo
一、CSS代码（HTML5支持）
/*time-line.css*/
.timeline {
position: relative;
padding: 20px 0 20px;
list-style: none;
}
.timeline:before {
content: " ";
position: absolute;
top:;
bottom:;
left: 50%;
width: 3px;
margin-left: -1.5px;
background-color: #eeeeee;
}
.timeline > li {
position: relative;
margin-bottom: 20px;
}
.timeline-badge>i{
line-height: 50px;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
float: left;
position: relative;
width: 46%;
padding: 20px;
border: 1px solid #d4d4d4;
border-radius: 2px;
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175);
box-shadow: 0 1px 6px rgba(0,0,0,0.175);
}
.timeline > li > .timeline-panel:before {
content: " ";
display: inline-block;
position: absolute;
top: 26px;
right: -15px;
border-top: 15px solid transparent;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
border-left: 15px solid #ccc;
}
.timeline > li > .timeline-panel:after {
content: " ";
display: inline-block;
position: absolute;
top: 27px;
right: -14px;
border-top: 14px solid transparent;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
border-left: 14px solid #fff;
}
.timeline > li > .timeline-badge {
z-index:;
position: absolute;
top: 16px;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
border-radius: 50% 50% 50% 50%;
text-align: center;
font-size: 1.4em;
line-height: 50px;
color: #fff;
background-color: #999999;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width:;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width:;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top:;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom:;
}
.timeline-body > p + p {
margin-top: 5px;
}
@media(max-width:767px) {
ul.timeline:before {
left: 40px;
}
ul.timeline > li > .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline > li > .timeline-badge {
top: 16px;
left: 15px;
margin-left:;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
right: auto;
left: -15px;
border-right-width: 15px;
border-left-width:;
}
ul.timeline > li > .timeline-panel:after {
right: auto;
left: -14px;
border-right-width: 14px;
border-left-width:;
}
}
二、HTML代码
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-clock-o fa-fw"></i> Responsive Timeline
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<ul class="timeline">
<li>
<div class="timeline-badge"><i class="fa fa-check"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4> <p>
<small class="text-muted"><i class="fa fa-clock-o"></i> 11 hours ago via Twitter</small>
</p>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero laboriosam dolor perspiciatis omnis
exercitationem. Beatae, officia pariatur? Est cum veniam excepturi. Maiores praesentium, porro voluptas suscipit
facere rem dicta, debitis.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="fa fa-credit-card"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolorem quibusdam, tenetur commodi provident cumque
magni voluptatem libero, quis rerum. Fugiat esse debitis optio, tempore. Animi officiis alias, officia
repellendus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium maiores odit qui est tempora eos, nostrum
provident explicabo dignissimos debitis vel! Adipisci eius voluptates, ad aut recusandae minus eaque facere.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge danger"><i class="fa fa-bomb"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus numquam facilis enim eaque, tenetur nam id
qui vel velit similique nihil iure molestias aliquam, voluptatem totam quaerat, magni commodi quisquam.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates est quaerat asperiores sapiente, eligendi,
nihil. Itaque quos, alias sapiente rerum quas odit! Aperiam officiis quidem delectus libero, omnis ut debitis!</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge info"><i class="fa fa-save"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis minus modi quam ipsum alias at est molestiae
excepturi delectus nesciunt, quibusdam debitis amet, beatae consequuntur impedit nulla qui! Laborum, atque.</p>
<hr>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-gear"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi fuga odio quibusdam. Iure expedita, incidunt unde
quis nam! Quod, quisquam. Officia quam qui adipisci quas consequuntur nostrum sequi. Consequuntur, commodi.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge success"><i class="fa fa-graduation-cap"></i>
</div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Lorem ipsum dolor</h4>
</div>
<div class="timeline-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt obcaecati, quaerat tempore officia voluptas
debitis consectetur culpa amet, accusamus dolorum fugiat, animi dicta aperiam, enim incidunt quisquam maxime neque
eaque.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
三、结果
时间轴CSS的Demo的更多相关文章
- 使用css实现时间轴
本文将使用css来实现一个左右交叉布局的时间轴,效果如下: 使用的都是一些常用的css,代码如下: <!DOCTYPE> <html> <head> <tit ...
- 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！
前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...
- [原创]一个纯css实现兼容各种主流移动pc浏览器的时间轴
废话不多说 Demo 高度完全的自适应 中心思想是table 和第二列行高的50%的上下绝对定位竖线 第一次用codepen less完全不能用啊 连node png之类的都是关键词会被去掉... 马 ...
- 纯css+js水平时间轴
自定义,并自动加载时间节点 当前时间节点居中,突出显示 时间动态无痕添加 效果图: 初始状态 时间左走到一定2016.1月后 html: <!-- 水平时间轴 --> <div id ...
- [置顶] 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！
前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...
- 一个简单的时间轴demo
一个时间轴的组成 使用一个块级元素包裹内容,并未块级元素设置边框 定义圆形或者菱形等元素标签,子元素设置偏移或者定位元素将图标定位到边框上 使其中的内容不溢出,自动换行,内容自动撑高 英文自动换行:w ...
- 利用css制作横向和纵向时间轴
Html代码: <div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/&l ...
- html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果
1.概述 html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰.一目了然能够看清事情发生的过程,UI页面也显示的那么清晰.如何用css+html做出时间轴展示事件点的?先 ...
- JQuery+HTML5+CSS3制作时间轴插件，支持响应式布局
一.效果图预览 (图一) (图二) 附注说明: 图一是浏览器宽度像素大于560px下的展示效果,图二是在浏览器宽度像素小于560px下的展现效果.使用的是CSS3的Media Query(媒体查询)实 ...
随机推荐
- shell之路【第四篇】输入输出重定向
输出重定向 命令输出重定向的语法为: command > file 或 command >> file 这样,输出到显示器的内容就可以被重定向到文件.果不希望文件内容被覆盖,可以使用 ...
- 这种方法在受到.NET版本和访问注册表权限时，是最佳解决方案，虽然代码看起来很多，不过下面的类直接拿走用就可以了。
public class FileContentType { private static IDictionary<string, string> _mappings = ne ...
- TFS 创建分支
1 2 3 4
- beagleboneblack HDMI不能显示
beagleboneblack 接上HDMI到电视上,没有显示画面 看了资料之后才知道 http://elinux.org/Beagleboard:BeagleBoneBlack_HDMI#Conn ...
- icon大小
ldpi mdpi hdpi xhdpi xxhdpi
- Spring中实现监听的方法
在未使用框架进行编程的时候,我们常常在web.xml中加上这样一段话 <listener> <listener-class>XXX</listener-class> ...
- 优化eclipse
1.取消自动validation windows–>perferences–>validation 除开Manual下面的复选框全部选中之外,其他全部不选 如需验证,在要验证的文件上,单击 ...
- c++模板两个数的加法
1.最简单的情况: template<class T> T Add(const T& a, const T& b) { return a + b; } 缺点是不能够处理不同 ...
- POJ3264/RMQ
题目链接 /* 询问一段区间内的元素差值最大是多少,用RMQ维护一个最大值和一个最小值,相减即可. */ #include<cstdio> #include<cstring> ...
- android ApplicationContext Context Activity 内存的一些学习
Android中context可以作很多操作,但是最主要的功能是加载和访问资源. 在android中有两种context,一种是application context,一种是activity cont ...