html 物流状态,css+html如何实现物流进度样式(代码示例)
本篇文章给大家带来的内容是介绍css+html如何实现物流进度样式(代码示例),有需要的朋友可以参考一下,希望对你们有所帮助。
效果:
css样式:
ul li {
list-style: none;
}
.package-status {
padding: 18px 0 0 0
}
.package-status .status-list {
margin: 0;
padding: 0;
margin-top: -5px;
padding-left: 8px;
list-style: none;
}
.package-status .status-list>li {
border-left: 2px solid #0278D8;
text-align: left;
}
.package-status .status-list>li:before {
/* 流程点的样式 */
content: '';
border: 3px solid #0278D8;
background-color: #0278D8;
display: inline-block;
width: 6px;
height: 6px;
border-radius: 10px;
margin-left: -7px;
margin-right: 10px
}
.package-status .status-box {
overflow: hidden
}
.package-status .status-list>li {
height: auto;
width: 95%;
}
.package-status .status-list {
margin-top: -8px
}
.package-status .status-box {
position: relative
}
.package-status .status-box:before {
content: " ";
background-color: #f3f3f3;
display: block;
position: absolute;
top: -8px;
left: 20px;
width: 10px;
height: 4px
}
.package-status .status-list {
margin-top: 0px;
}
.status-list>li:not(:first-child) {
padding-top: 10px;
}
.status-content-before {
text-align: left;
margin-left: 25px;
margin-top: -20px;
}
.status-content-latest {
text-align: left;
margin-left: 25px;
color: #0278D8;
margin-top: -20px;
}
.status-time-before {
text-align: left;
margin-left: 25px;
font-size: 10px;
margin-top: 5px;
}
.status-time-latest {
text-align: left;
margin-left: 25px;
color: #0278D8;
font-size: 10px;
margin-top: 5px;
}
.status-line {
border-bottom: 1px solid #ccc;
margin-left: 25px;
margin-top: 10px;
}
.list {
padding: 0 20px;
background-color: #F8F8F8;
margin: 10px 0 0 25px;
border: 1px solid #EBEBEB;
}
.list li {
line-height: 30px;
color: #616161;
}
HTML:
您的订单开始处理
2017-08-17 23:31 周四
卖家发货
2017-08-18 09:11 周五
发往深圳中转站
2017-08-19 01:21 周六
到达深圳
2017-08-19 06:21 周六
发往潮汕中心
2017-08-19 09:21 周六
快件到达 潮汕中心
2017-08-20 14:16 周日
html 物流状态,css+html如何实现物流进度样式(代码示例)相关推荐
- html input选中样式,CSS 伪类修改input选中样式的示例代码
注:该表引自W3School教程 伪元素的分类及作用: 下面通过代码看下CSS 伪类修改input选中样式的示例代码,代码如下所示: 主要是用到了after伪类和字体符号. input{ -webki ...
- html 物流状态,css+html实现物流进度样式的方法
css+html实现物流进度样式的方法 发布时间:2020-08-31 14:22:27 来源:亿速云 阅读:249 作者:小新 小编给大家分享一下css+html实现物流进度样式的方法,希望大家阅读 ...
- html移动端隐藏代码,html Css PC 移动端 公用部分样式代码整理
css常用公用部分样式代码整理: body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol, li ...
- php控制文本换行,css如何控制文字换行方式?(代码示例)
css如何控制文字换行方式?本篇文章就给大家介绍css设置文字(特别是连续的数字和英文)强制换行.强制不换行且隐藏超出部分的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 一. ...
- 【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )
文章目录 一.网页底部盒子模型测量及样式 1.盒子布局说明 2.底部的大盒子测量及样式 3.版心盒子 4.版权盒子 5.链接盒子 二.代码示例 1.HTML 标签结构 2.CSS 样式 3.显示效果 ...
- 【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
文章目录 一.盒子测量及样式 1.总体盒子测量及样式 2.左侧盒子测量及样式 3.中间盒子测量及样式 4.右侧盒子测量及样式 二.横版导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.显示 ...
- 用html实现模糊效果,css实现简单背景模糊的方法(代码示例)
本篇文章给大家带来的内容是介绍css实现简单背景模糊的方法(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 使用filter属性来设置模糊值 效果: css样式: .co ...
- html 点击加号展开代码,纯css实现加号一个的效果(代码示例)
本篇文章给大家带来的内容是关于纯css实现加号一个的效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现下图的加号效果: 若想实现这个效果, 只需一个p元素即可搞定. ...
- html扇形调节角度,CSS如何实现任意角度的扇形(代码示例)
本篇文章给大家带来的内容是关于CSS如何实现任意角度的扇形(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白 ...
最新文章
- Android开发教程 - 使用Data Binding(二)集成与配置
- 【Elastic Stack(一)】Elastic Stack简介
- Java初学者如何自学和自己定位解决问题
- 【Python】重载模块
- 新冠轻症也会导致大脑退化,牛津大学最新研究登上Nature
- oracle 存储过程字符替换,Oracle存储过程常用字符串处理函数整理
- 街头抓拍之一:酷似福克纳的老头
- cmake,make,nmake的用法
- 盘点数据科学最流行的29个Python库
- 安装oracle9i时提示找不到文件OCS4J.properties的解决方法
- python 边缘计算_OpenEdge首页、文档和下载 - 边缘计算平台 - OSCHINA - 中文开源技术交流社区...
- 极客大学产品经理训练营:数据分析 第16课总结
- JS打开新窗口(window.open() 、href)
- Java基础之多态的运用
- 51系列单片机IO模试设置
- 航拍仙人掌识别_使用转移学习识别空中仙人掌
- 【ELMAN预测】基于粒子群算法改进ELMAN动态递归神经网络实现数据预测matlab源码
- C#获取动态key的json对象的值
- 【IPFS应用开发】ipfs安卓节点编译 ipfs andriod node
- 采用CCG和kkt条件编制两阶段鲁棒优化程序,以储能、发电、风电和光伏容量作为第一阶段变量