物流查询时间轴效果
来源:互联网 发布:诛仙数据管理工具 编辑:程序博客网 时间:2024/04/28 13:24
效果图。
今天讲中间那条线,线的长度要实现跟随整个流程自适应。
一开始我的思路是img高度填充父div,但我的body,html,div都是height:auto;不是固定长度,导致无法实现。
公司一个姐姐给我一个思路,设置li的border-right,我试了,但不知道怎么挪到中间,要弄懂又得花很久。
不想用js,也不想用jquery,犯不着。
经过长时间的尝试和查询,最后使用的方法是伪类,以下是代码,我的布局是纵向布局再float:left,最左边时间界面class="a_tm_info":
.a_tm_info{
position: relative;
}
.a_tm_info::before {
content: '';
position: absolute;
top: 0;
left: 254px;
height: 100%;
width: 4px;
background: #ddd;
z-index: -1;
} //在a_tm_info旁边画一条竖线
如果有更简单的方法请分享!
---------
2017/10/19
走了很多弯路
最简单的办法
<div style="height:auto;">
<div class="line" style="position: absolute;content: ''; top: 0; left: 23px; height:100%; width: 4px;background: #ddd;z-index:-2; "></div>
</div>
阅读全文
0 0
- 物流查询时间轴效果
- 仿淘宝物流效果(物流时间轴效果)
- 快递物流时间轴
- android 仿淘宝物流时间轴控件
- android 仿淘宝物流时间轴控件
- 快递物流查询
- 物流接口查询
- 查询物流接口
- php 物流查询
- Android简单物流查询
- 微信物流查询
- php查询物流信息
- Anddroid 物流查询快递查询
- Android仿快递物流时间轴的代码实现
- Android 小样之高仿淘宝时间轴物流信息
- 时间轴、物流信息。你根本不需要StepView
- 快递物流查询接口介绍
- Restful web service (物流查询)
- LeetCode 问题难度,面试出现频率及问题相关数据结构和算法
- Mysql数据库密码重置,忘记密码的重置方法(因Mysql版本问题可能不能使用该方法)
- 1032. 挖掘机技术哪家强(20)
- 2017.10.15
- springmvc+mybatis实现商品查询
- 物流查询时间轴效果
- [期望DP] LibreOJ #6178. [美团 CodeM 初赛 Round B] 景区路线规划 题解
- 微信抢票应用个人总结
- Android中Activity生命周期
- NKOJ 4247 老蒋的数列(乱搞)
- Eclipse手动添加web.xml
- 深入解析unsigned int 和 int
- 计算机科学之父――图灵
- AOSP 下载单个分支