时光轴 时间轴 效果

要实现类似QQ空间那样时光轴 时间轴效果

如图

====================

分析:左边 ul的border-left实现,这样会出现底部的 余出的线条,不美观,

所以考虑li的border-left实现。 li的padding-bottom撑开上下间距

h4标题的:before实现圆圈,定位到左边。

圆圈的实现使用绝对定位实现,注意下UL和LI实现方式下的,圆圈定位位置。

=========Ul实现边框=======

.money-process .process-list {
width: 90%;
height: 100%;
margin: 1.5rem auto 0;
padding-left: 2.5rem;
border-left: 2px #AAD8FC solid;
}

.process-list li h4:before {
content: ‘‘;
display: block;
width: 2.2rem;
height: 2.2rem;
line-height: 2.2rem;
border: 2px #52AFF9 solid;
border-radius: 50%;
text-align: center;
vertical-align: middle;
font-size: 1.2rem;
position: absolute;
left: -2.5rem;
top:-5px;
margin-left: -1.2rem;/*负值自身宽度一半,还有边框,所以也得计算添加边框宽度一半*/
background: #fff;
}

=========================

=================LI实现边框=====================

.process-list li {
position: relative;
padding-bottom: 2.5rem;
border-left: 2px #AAD8FC solid;
padding-left: 2.5rem;
}

.process-list li h4:before {
content: ‘‘;
display: block;
width: 2.2rem;
height: 2.2rem;
line-height: 1.8rem;
/*因为默认盒模型,公共样式里面设置了:before{box-sizing: border-box;},所以(22px-2*2px)是行高*/
border: 2px #52AFF9 solid;
-webkit-border-radius: 1.1rem;
border-radius: 1.1rem;
text-align: center;
vertical-align: middle;
font-size: 1.2rem;
position: absolute;
left: 0;
top: -6px;
margin-left: -1.2rem;
/*负值自身宽度一半,还有边框,所以也得计算添加边框宽度一半*/
background: #fff;
}

================================================

UL实现连接:http://files.cnblogs.com/files/leshao/%E6%97%B6%E9%97%B4%E8%BD%B4-UL.rar

LI实现链接:http://files.cnblogs.com/files/leshao/%E6%97%B6%E9%97%B4%E8%BD%B4-UL.rar

多谢酱油 ,简,一棵树,993

时间: 2024-10-10 02:44:16

时光轴 时间轴 效果的相关文章

JS时间轴效果(类似于qq空间时间轴效果)

2013-11-04 23:51 by 空智, 4041 阅读, 15 评论, 收藏, 编辑 在上一家公司写了一个时间轴效果,今天整理了下,感觉有必要写一篇博客出来 给大家分享分享 当然代码还有很多不足的地方,希望大家多指点指点下,此效果类似于QQ空间或者人人网空间时间轴效果,当时也是为了需求 研究了下qq空间逻辑(当然JS代码压缩了肯定看不到的),只是当时研究了下他们HTML结构和css结构,所以仿照他们那种逻辑自己也写了一个出来.先来看看是个什么样的吧!如下图所示: 需求分析:左侧是一个时间

使用ExpandableListView时间轴效果达到

不废话,首先在地图上,查看结果 这是用ExpandableListView来实现时间轴效果,原理比較简单,以月份为第一级,以天为第二级来实现的. package com.hj.main; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.uti

使用ExpandableListView实现时间轴效果

不废话,先上图,看看效果 这是用ExpandableListView来实现时间轴效果,原理比较简单,以月份为第一级,以天为第二级来实现的. package com.hj.main; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.util.L

Android时间轴效果,直接使用在你的项目中

近期开发app搞到历史查询,受腾讯qq的启示,搞一个具有时间轴效果的ui,看上去还能够,然后立即想到分享给小伙伴,,大家一起来看看,先上效果图吧 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" > 接下来就是代码了,axtivity的布局代码.非常easy.就是一个listview <?xml v

jQuery鼠标滑过横向时间轴效果

jQuery鼠标滑过横向时间轴效果---效果图: jQuery鼠标滑过横向时间轴效果---全部代码: <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <

CSS3实现时间轴效果

最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 有点像时间轴的赶脚,而且每一块鼠标悬浮上去也有下拉效果展开介绍截图信息,就感觉效果还不错.但感觉这种效果貌似对于动态添加不是很灵活,因为高度不像宽度可以灵活的自适应,故添加得自己一个一个设置.所以很多都是做成展示效果. 当然啦,自己也基于它的这个想法搞了一点简单点的类似效果,主要还是整个布局效果,具体每一块内容就不仿造了,而且我自己也加了一下开场动画,让它更好玩一

时间轴效果

效果图: 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>控制台 - Bootstrap后台管理系统模版Ace下载</title> <meta name="keywords" content="Bootstrap模版,Bootstrap模版下载,Boots

【特效】CSS3实现时间轴效果

参考:https://www.cnblogs.com/jr1993/p/4626815.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background: #333; } h1{ text-align: center; co

网页效果-简单的时间轴实现

之前在网上看到,有很多人写的时间轴效果,于是自己也模仿着写了写.以下贴出自己写的解决方法(横向轴与纵向轴). 简单的时间轴效果容易实现,但如果需要看起来有模有样,就需要对页面进行设计布置了. 1.利用Js加简单的界面布置,实现时间轴鼠标点击轮换图片效果(纵向). 实现思路:利用多个div加背景色做纵向时间轴的样式,用CSS进行定位布局(时间轴一般都相对于浏览器窗口位置进行定位,避免浮动),再加上相应的文字描述.(:after,:before等一样能实现其效果),最后在用Js添加一些简单的鼠标事件