物流进程html+css页面
<!DOCTYPE html>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<title></title>
<style>
#ordertrack td {
vertical-align: top;
}
table {
empty-cells: show;
}
#odlist, #orderstate, #process, #ordertrack, #orderinfo {
color: #333;
}
body {
color: #666;
font: 12px/150% Arial,Verdana,
"宋体"
;
}
#mohe-kuaidi_new .mh-icon-new {
background-position: 0 -58px;
height: 18px;
left: -20px;
margin-left: -41px;
margin-top: -9px;
position: absolute;
top: 1.5em;
width: 41px;
}
#mohe-kuaidi_new .mh-icon {
background: url(
"http://p9.qhimg.com/d/inn/f2e20611/kuaidi_new.png"
) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
h1, h2, h3, h4, h5, h6, input, textarea,
select
, cite, em, i, b, strong, th {
font-size: 100%;
font-style: normal;
}
#mohe-kuaidi_new .mh-list-wrap .mh-list li.first {
color: #3eaf0e;
}
#mohe-kuaidi_new .mh-list-wrap .mh-list li {
color: #666;
}
p, form, ol, ul, li, h3, menu {
list-style: outside none none;
}
.result .res-list, .result-d .res-d-list {
font-size: 13px;
line-height: 20px;
}
body, th, td {
font-family: arial;
color: #333;
}
</style>
<style
class
=
"firebugResetStyles"
type=
"text/css"
charset=
"utf-8"
>
/* See license.txt for terms of usage */
/** reset styling **/
.firebugResetStyles {
z-index: 2147483646 !important;
top: 0 !important;
left: 0 !important;
display: block !important;
border: 0 none !important;
margin: 0 !important;
padding: 0 !important;
outline: 0 !important;
min-width: 0 !important;
max-width: none !important;
min-height: 0 !important;
max-height: none !important;
position:
fixed
!important;
transform: rotate(0deg) !important;
transform-origin: 50% 50% !important;
border-radius: 0 !important;
box-shadow: none !important;
background: transparent none !important;
pointer-events: none !important;
white-space: normal !important;
}
style.firebugResetStyles {
display: none !important;
}
.firebugBlockBackgroundColor {
background-color: transparent !important;
}
.firebugResetStyles:before, .firebugResetStyles:after {
content:
""
!important;
}
/**actual styling to be modified by firebug theme**/
.firebugCanvas {
display: none !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBox {
width: auto !important;
position:
static
!important;
}
.firebugLayoutBoxOffset {
opacity: 0.8 !important;
position:
fixed
!important;
}
.firebugLayoutLine {
opacity: 0.4 !important;
background-color: #000000 !important;
}
.firebugLayoutLineLeft, .firebugLayoutLineRight {
width: 1px !important;
height: 100% !important;
}
.firebugLayoutLineTop, .firebugLayoutLineBottom {
width: 100% !important;
height: 1px !important;
}
.firebugLayoutLineTop {
margin-top: -1px !important;
border-top: 1px solid #999999 !important;
}
.firebugLayoutLineRight {
border-right: 1px solid #999999 !important;
}
.firebugLayoutLineBottom {
border-bottom: 1px solid #999999 !important;
}
.firebugLayoutLineLeft {
margin-left: -1px !important;
border-left: 1px solid #999999 !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBoxParent {
border-top: 0 none !important;
border-right: 1px dashed #E00 !important;
border-bottom: 1px dashed #E00 !important;
border-left: 0 none !important;
position:
fixed
!important;
width: auto !important;
}
.firebugRuler {
position: absolute !important;
}
.firebugRulerH {
top: -15px !important;
left: 0 !important;
width: 100% !important;
height: 14px !important;
background: url(
"data:image/png"
) repeat-x !important;
border-top: 1px solid #BBBBBB !important;
border-right: 1px dashed #BBBBBB !important;
border-bottom: 1px solid #000000 !important;
}
.firebugRulerV {
top: 0 !important;
left: -15px !important;
width: 14px !important;
height: 100% !important;
background: url(
"data:image/png,"
) repeat-y !important;
border-left: 1px solid #BBBBBB !important;
border-right: 1px solid #000000 !important;
border-bottom: 1px dashed #BBBBBB !important;
}
.overflowRulerX > .firebugRulerV {
left: 0 !important;
}
.overflowRulerY > .firebugRulerH {
top: 0 !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.fbProxyElement {
position:
fixed
!important;
pointer-events: auto !important;
}
</style>
</head>
<body>
<style>
/*#mohe-kuaidi_new ::-webkit-scrollbar {
width: 10px;
}
#mohe-kuaidi_new ::-webkit-scrollbar-track-piece {
background-color: #eee;
}
#mohe-kuaidi_new ::-webkit-scrollbar-thumb {
background-color: #ccc;
border: 1px solid #ccc;
}*/
#mohe-kuaidi_new .mh-wrap {
margin: 6px 0;
}
#mohe-kuaidi_new .mh-wrap a {
text-decoration: none;
}
#mohe-kuaidi_new .mh-wrap a:hover {
text-decoration: underline;
}
#mohe-kuaidi_new .mh-form-wrap {
padding: 5px 15px;
}
#mohe-kuaidi_new .mh-form-wrap p {
margin: 10px 0;
}
#mohe-kuaidi_new .mh-form-wrap p label {
margin-right: 10px;
vertical-align: middle;
padding: 6px 0;
}
#mohe-kuaidi_new .mh-form-wrap p input, #mohe-kuaidi_new .mh-form-wrap p select {
width: 186px;
line-height: normal;
border: 1px solid #ccc;
padding: 6px;
box-sizing: border-box;
margin: 0;
}
#mohe-kuaidi_new .mh-form-wrap p button {
width: 80px;
height: 28px;
border: 1px solid #ccc;
margin-left: 10px;
text-align: center;
color: #333;
font-family:
"Microsoft Yahei"
;
font-size: 14px;
cursor: pointer;
background: #f7f7f7;
background: -moz-linear-gradient(top,#f7f7f7,#ececec);
background: -webkit-gradient(linear,left top,left bottom,color-stop(#f7f7f7),color-stop(#ececec));
background: -ms-linear-gradient(top,#f7f7f7,#ececec);
background: linear-gradient(to bottom,#f7f7f7,#ececec);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=
'#f7f7f7'
,endColorstr=
'#ececec'
,GradientType=0);
}
#mohe-kuaidi_new .mh-form-wrap p button:hover {
background: -moz-linear-gradient(top,#ececec,#f7f7f7);
background: -webkit-gradient(linear,left top,left bottom,color-stop(#ececec),color-stop(#f7f7f7));
background: -ms-linear-gradient(top,#ececec,#f7f7f7);
background: linear-gradient(to bottom,#ececec,#f7f7f7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=
'#ececec'
,endColorstr=
'#f7f7f7'
,GradientType=0);
}
#mohe-kuaidi_new .mh-form-wrap p button:active {
background: -moz-linear-gradient(top,#f3f3f3,#fff);
background: -webkit-gradient(linear,left top,left bottom,color-stop(#f3f3f3),color-stop(#fff));
background: -ms-linear-gradient(top,#f3f3f3,#fff);
background: linear-gradient(to bottom,#f3f3f3,#fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=
'#f3f3f3'
,endColorstr=
'#ffffff'
,GradientType=0);
}
#mohe-kuaidi_new .mh-form-wrap form.mh-loading p button {
position: relative;
color: transparent;
pointer-events: none;
}
#mohe-kuaidi_new .mh-form-wrap form.mh-loading p button::after {
background: url(http:
//p1.qhimg.com/d/inn/1b1cc057/loading_s.gif) no-repeat center;
content:
''
;
display: inline-block;
width: 4em;
height: 20px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -2em;
margin-top: -10px;
}
#mohe-kuaidi_new .mh-form-wrap .mh-error {
display: none;
color: #c00;
}
#mohe-kuaidi_new .mh-form-wrap .mh-error label {
visibility: hidden;
}
#mohe-kuaidi_new .mh-list-wrap {
max-height: 0;
_height: 0;
--overflow: hidden;
}
#mohe-kuaidi_new .mh-list-wrap.mh-unfold {
max-height: 281px;
_height: 281px;
}
#mohe-kuaidi_new .mh-list-wrap .mh-list {
border-top: 1px solid #eee;
margin: 0 15px;
padding: 15px 0;
}
#mohe-kuaidi_new .mh-list-wrap .mh-list ul {
max-height: 255px;
_height: 255px;
padding-left: 75px;
padding-right: 20px;
--overflow: auto;
height: 626px;
}
#mohe-kuaidi_new .mh-list-wrap .mh-list li {
position: relative;
border-bottom: 1px solid #f5f5f5;
margin-bottom: 8px;
padding-bottom: 8px;
color: #666;
}
#mohe-kuaidi_new .mh-list-wrap .mh-list li.first {
color: #3eaf0e;
}
#mohe-kuaidi_new .mh-list-wrap .mh-list li p {
line-height: 20px;
}
#mohe-kuaidi_new .mh-list-wrap .mh-list li .before {
position: absolute;
left: -13px;
top: 2.2em;
height: 82%;
width: 0;
border-left: 2px solid #ddd;
}
#mohe-kuaidi_new .mh-list-wrap .mh-list li .after {
position: absolute;
left: -16px;
top: 1.2em;
width: 8px;
height: 8px;
background: #ddd;
border-radius: 6px;
}
#mohe-kuaidi_new .mh-list-wrap .mh-list li.first .after {
background: #3eaf0e;
}
#mohe-kuaidi_new .mh-kd-wrap {
position: relative;
border-top: 1px solid #eee;
padding: 15px;
padding-bottom: 25px;
background: #fafafa;
}
#mohe-kuaidi_new .mh-kd-wrap li {
display: none;
}
#mohe-kuaidi_new .mh-kd-wrap li.mh-selected {
display: block;
}
#mohe-kuaidi_new .mh-kd-wrap .mh-img-wrap {
float
: left;
width: 50px;
height: 50px;
margin-right: 10px;
overflow: hidden;
}
#mohe-kuaidi_new .mh-kd-wrap .mh-img-wrap img {
width: 50px;
}
#mohe-kuaidi_new .mh-kd-wrap .mh-info-wrap {
font-size: 13px;
margin-left: 60px;
}
#mohe-kuaidi_new .mh-kd-wrap .mh-info-wrap p {
margin-bottom: 8px;
}
#mohe-kuaidi_new .mh-kd-wrap .mh-info-wrap .mh-info-name {
font-family:
"Microsoft Yahei"
;
font-size: 14px;
}
#mohe-kuaidi_new .mh-kd-wrap .mh-info-wrap .mh-info-link a {
text-decoration: none;
margin-right: 10px;
padding: 2px 10px;
border: 1px solid #ccc;
color: #333;
}
#mohe-kuaidi_new .mh-kd-wrap .mh-info-wrap .mh-info-link a:hover {
background: white;
}
#mohe-kuaidi_new .mh-kd-wrap .mh-info-wrap .mh-info-link a:active {
background: -moz-linear-gradient(top,#f3f3f3,#fff);
background: -webkit-gradient(linear,left top,left bottom,color-stop(#f3f3f3),color-stop(#fff));
background: -ms-linear-gradient(top,#f3f3f3,#fff);
background: linear-gradient(to bottom,#f3f3f3,#fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=
'#f3f3f3'
,endColorstr=
'#ffffff'
,GradientType=0);
}
#mohe-kuaidi_new .mh-slogan {
position: absolute;
right: 20px;
bottom: 0;
cursor: pointer;
}
#mohe-kuaidi_new .mh-slogan-hover {
color: #3eaf0e;
}
#mohe-kuaidi_new .mh-slogan span {
vertical-align: middle;
}
#mohe-kuaidi_new .mh-qrcode-wrap {
position: absolute;
right: 0;
bottom: -1px;
width: 96px;
margin-right: -110px;
border: 1px solid #d6d6d6;
color: #999;
padding: 6px;
box-shadow: 0 1px 1px #efefef;
}
#mohe-kuaidi_new .mh-icon {
background: url(http:
//p9.qhimg.com/d/inn/f2e20611/kuaidi_new.png) no-repeat 0 0;
}
#mohe-kuaidi_new .mh-icon-qr {
background-position: 0 -17px;
display: inline-block;
*zoom: 1;
width: 13px;
height: 13px;
vertical-align: middle;
margin-left: 10px;
}
#mohe-kuaidi_new .mh-slogan-hover .mh-icon-qr {
background-position: 0 0;
}
#mohe-kuaidi_new .mh-icon-t {
position: absolute;
left: -9px;
bottom: 14px;
width: 10px;
height: 16px;
background-position: 0 -34px;
background-color: white;
}
#mohe-kuaidi_new .mh-icon-new {
position: absolute;
left: -20px;
top: 1.5em;
width: 41px;
height: 18px;
margin-left: -41px;
margin-top: -9px;
background-position: 0 -58px;
}
#mohe-kuaidi_new .mh-wrap .mb-search {
text-decoration: underline;
margin-left: 20px;
}
#mohe-kuaidi_new .mh-wrap .mb-search .mh-new {
display: inline-block;
width: 21px;
height: 9px;
margin: -1px 0 0 3px;
background: url(http:
//p0.qhimg.com/t01a3bd62f6db66463c.png) no-repeat;
}
#mohe-kuaidi_new .mh-identcode {
border-top: 1px solid #f5f5f5;
padding: 10px 15px;
display: none;
}
#mohe-kuaidi_new .mh-identcode .mh-img-wrap {
float
: left;
width: 54px;
height: 54px;
padding: 6px;
border: 1px solid #ccc;
overflow: hidden;
}
#mohe-kuaidi_new .mh-identcode .mh-img-wrap img {
width: 54px;
}
#mohe-kuaidi_new .mh-identcode .mh-img-tip {
margin-left: 78px;
}
#mohe-kuaidi_new .mh-identcode .mh-tip-txt {
font-size: 13px;
line-height: 38px;
color: #666;
}
#mohe-kuaidi_new .mh-identcode .mh-btn-install {
text-decoration: none;
margin-right: 10px;
padding: 2px 10px;
border: 1px solid #ccc;
color: #333;
}
#mohe-kuaidi_new .mh-identcode .mh-btn-install:hover {
text-decoration: none;
}
</style>
<div data-mohe-type=
"kuaidi_new"
class
=
"g-mohe "
id=
"mohe-kuaidi_new"
>
<div id=
"mohe-kuaidi_new_nucom"
>
<div
class
=
"mohe-wrap mh-wrap"
>
<div
class
=
"mh-cont mh-list-wrap mh-unfold"
>
<div
class
=
"mh-list"
>
<ul>
<li
class
=
"first"
>
<p>2015-04-28 11:23:28</p>
<p>妥投投递并签收,签收人:他人收 他人收</p>
<span
class
=
"before"
></span><span
class
=
"after"
></span><i
class
=
"mh-icon mh-icon-new"
></i></li>
<li>
<p>2015-04-28 07:38:44</p>
<p>深圳市南油速递营销部安排投递(投递员姓名:蔡远发<a href=
"tel:18718860573"
>18718860573</a>;联系电话:)</p>
<span
class
=
"before"
></span><span
class
=
"after"
></span></li>
<li>
<p>2015-04-28 05:08:00</p>
<p>到达广东省邮政速递物流有限公司深圳航空邮件处理中心处理中心(经转)</p>
<span
class
=
"before"
></span><span
class
=
"after"
></span></li>
<li>
<p>2015-04-28 00:00:00</p>
<p>离开中山市 发往深圳市(经转)</p>
<span
class
=
"before"
></span><span
class
=
"after"
></span></li>
<li>
<p>2015-04-27 15:00:00</p>
<p>到达广东省邮政速递物流有限公司中山三角邮件处理中心处理中心(经转)</p>
<span
class
=
"before"
></span><span
class
=
"after"
></span></li>
<li>
<p>2015-04-27 08:46:00</p>
<p>离开泉州市 发往中山市</p>
<span
class
=
"before"
></span><span
class
=
"after"
></span></li>
<li>
<p>2015-04-26 17:12:00</p>
<p>泉州市速递物流分公司南区电子商务业务部已收件,(揽投员姓名:王晨光;联系电话:<a href=
"tel:13774826403"
>13774826403</a>)</p>
<span
class
=
"before"
></span><span
class
=
"after"
></span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
物流进程html+css页面的更多相关文章
- div+css页面右侧底部悬浮层
效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...
- Css - 页面标签页图标
Css - 页面标签页图标 <head> <meta charset="utf-8" /> <title>京东(JD.COM)- ...
- CSS 页面布局、后台管理示例
CSS 页面布局.后台管理示例 页面布局 1.头部菜单 2.中间内容/中间左侧菜单 3.底部内容 <div class='pg-header'> <div style='width: ...
- CSS页面排版的一点笔记
CSS页面排版 字体族 字体族的值是一个字体备选列表,多个字体使用英文逗号隔开,字体名称如果有空格则需要引号. font-family: "Georgia Pro", " ...
- CSS页面乱码 GB2312、UTF-8格式问题解决方案
如同左图所现,出现了页面乱码问题本来应该是显示gb3212字符的"关闭"文字了.. 解决方案一: 在所调用的CSS页面的第一行添加下边的这一句代码, 注意:一定要是在CSS的头 ...
- js+css页面横屏
<!DOCTYPE html> <html lang='zh'> <head> <meta charset="utf-8" /> & ...
- CSS页面渲染优化属性will-change
前面的话 当我们通过某些行为(点击.移动或滚动)触发页面进行大面积绘制的时候,浏览器往往是没有准备的,只能被动使用CPU去计算与重绘,由于没有事先准备,应付渲染够呛,于是掉帧卡顿.而CSS属性wi ...
- dic+css页面布局分享
HTML部分代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- HTML+CSS页面滚动效果处理
HTML+CSS代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> ...
随机推荐
- hibernate4 spring3.2 事务不提交分析
最近在做微信项目,我搭建了一个基于servlet,spring3.2,hibernate4.1的框架.因为基于消息的servlet和基于业务层是分开做的,也就是先把业务层做了,再去将所有的请求转到业务 ...
- 【C++自我精讲】基础系列四 static
[C++自我精讲]基础系列四 static 0 前言 变量的存储类型:存储类型按变量的生存期划分,分动态存储方式和静态存储方式. 1)动态存储方式的变量,生存期为变量所在的作用域.即程序运行到此变量时 ...
- java模式之装饰模式
1. 什么叫装饰模式? 根据业务的需求,需要对一个类的方法进行增强的处理. 2. 为什么需要装饰模式? 拓展性更加的好,当觉得这个装饰不好的时候,可以直接拿下,不需要改变任何的代码. 3. 装饰模式的 ...
- C语言与汇编“硬在哪里”——什么是面向硬件?
Jack:为什么说C/C++语言是偏向硬件的语言呢? 我:这是把C与java等无指针/引用类编程语言相比较而得出的结论.因为java在j2ee的框架下,写的代码仅仅是逻辑,本质上和写shell脚本没啥 ...
- 在egret中使用protobuf
原文章删除,重新使用MarkDown排版 在H5游戏领域,对于服务端与客户端的通信协议有一个选择,那就是使用protobuf.js.对于那些直接使用JavaScript开发的引擎而言,protobuf ...
- Fortran中将多个文件进行编译运行的方法
问题:在编译一个单独的Module文件中,发现CentOS7系统中直接使用如下命令无法运行: gfortran program.f90 module.f90 && ./a.out 查找 ...
- jQuery事件命名空间
先看一些代码: 也可以用bind进行事件绑定.我们看到上面的代码,我们可以在事件后面,以点号,加我们的名字,就是事件命名空间.所谓事件命名空间,就是事件类型后面以点语法附加一个别名,以便引用事件,如& ...
- Noip 2016
Day1 思路: 大致是 把一个环拆成链, 找某个人无非是向右找或向左找(即对当前点加或减) 若加上要移动的位置后坐标大于总人数, 就把当前坐标减去总人数, 若减去要移动的位置后坐标小于0, 就把当前 ...
- WebTours服务的启动
简介: HP loadrunner自带的一个飞机系统订票网站. 启动服务的步骤: 1.启动StartServer.bat 所在的路径: (\HP LoadRunner 12.02 Community ...
- 定位(position)
position :属性规定元素的定位类型 语法: position : static | absolute | fixed | relative JavaScript语法:object.style. ...