类似时间轴的样式
2016-01-11 17:18
543 查看
从事开发有些时日了,基本遇到的很多的问题和技术都在别人博客上看到,感觉也应该有些自己的沉淀,便准备自己写些文章供自己和大家一起探讨研究,希望能总结些东西以后能少走些弯路,如果文中有什么不对的希望大家能及时指出。
公司需要物流信息列表来显示订单状况,左侧的提醒便是类似时间轴的。希望大家能参考代码举一反三写出各种炫酷的时间轴。
借助了css的伪类before和after,不然写起来还是有点小难度的,接下来在html的div引用就完成了,是不是很简单呢?
这是效果图,2个小圆圈的图片可以改下路径换成你们喜欢的图片
如果你觉得这篇随笔对你有帮助可以支付宝(左)或微信(右)打赏小毅喝杯咖啡 ^_^
公司需要物流信息列表来显示订单状况,左侧的提醒便是类似时间轴的。希望大家能参考代码举一反三写出各种炫酷的时间轴。
.new{color:#ff3a48;margin-left: 30px;position: relative;} .new:before{content:'';position:absolute;top:27px;left:-20px;height:100%;width:1px;background: #eaeaea;} .new:after{content:'';position:absolute;top:18px;left:-29px;width: 18px;height: 18px; background: url("../../../images/round-red.png") no-repeat;background-size: 100%;} .old{color:#999;border-top: 1px solid #eaeaea;margin-left: 30px;position: relative;} .old:before{content:'';position:absolute;top:0;left:-20px;height:100%;width:1px;background: #eaeaea;} .old:after{content:'';position:absolute;top:18px;left:-25px;width: 10px;height: 10px; background: url("../../../images/round-gray.png") no-repeat;background-size: 100%;}
借助了css的伪类before和after,不然写起来还是有点小难度的,接下来在html的div引用就完成了,是不是很简单呢?
1 <div class="new"> 2 <p>礼品已到达上海浦东张江公司</p> 3 <p class="f6">2015-05-15 12:57:23</p> 4 </div> 5 <div class="old"> 6 <p>礼品已到达上海浦东张江公司</p> 7 <p class="f6">2015-05-15 12:57:23</p> 8 </div>
这是效果图,2个小圆圈的图片可以改下路径换成你们喜欢的图片
如果你觉得这篇随笔对你有帮助可以支付宝(左)或微信(右)打赏小毅喝杯咖啡 ^_^
相关文章推荐
- css笔记重点
- CSS样式随笔总结
- QT设置ToolButton按钮的样式
- CSS入门
- dedecms的arclist循环中判断第一个li添加css,否则不加
- css_兼容IE和FF的写法
- CSS中的层叠上下文和层叠顺序
- CSS3动画属性animation的基本用法
- css3 3d展示中rotate()介绍与简单实现
- Css 动画的回调
- 图片变灰css3
- gulp之压缩css
- animate.css – 齐全的CSS3动画库
- POI格式化Cell样式
- CSS :before和:after (转)
- 纯css满屏图像幻灯片制作
- echarts 地图 动态 展示 结合css+js
- css
- css3时钟
- css中脱离文档流的理解