物流进程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"> ...
随机推荐
- HDFS中文件的压缩与解压
HDFS中文件的压缩与解压 文件的压缩有两大好处:1.可以减少存储文件所需要的磁盘空间:2.可以加速数据在网络和磁盘上的传输.尤其是在处理大数据时,这两大好处是相当重要的. 下面是一个使用gzip工具 ...
- Ajax实现xml文件数据插入数据库(二)--- ajax实现与jsp的数据交互。
在上一篇文章中我们成功得到了重新组织后的数据,接下来需要做的便是将数据插入到数据库中了.在与数据库打交道的过程中有一些方法是普遍的,我们将这些通用方法封装到一个DbUtil类中,以便复用,封装好的Db ...
- 通用性安装redis和基本配置
之前聊redis的文章比较多了,但还没写一下安装和配置方面的总结. 总的来说,一般运行环境都是centos,开发环境无外乎windows,linux,mac os,我在这三个平台都安装和部署过redi ...
- 使用kettle工具将文本文件的内容插入Linux虚拟机下的mysql表中
一. 解压kettle包 1.把包拷到Linux系统下 还有mysql的驱动包 2.解压zip后缀的包 输入命令:unzip /software/pdi-ce-7.0.0.0-25.zip ...
- ASP.NET网站运行常见错误以及解决方法(持续更新)
一.A potentially dangerous Request.Form value was detected from the client 用户在页面上提交表单到服务器时,服务器会检测到一些潜 ...
- C语言之总结1
1). 终端常用的命令: pwd 显示终端的工作路径. ls list 清单 显示当前工作路径下的所有的文件以及文件夹. ls -l 以详细信息显示当前工作路径下的所有的文件以及文件夹. cd 要切 ...
- Excel单元格所在的行和列变色
网友问到如何通过移动光标选择单元格,所在的行和列变色.如每次输入价格的时候,想想在横竖方向上有颜色标识,这样方便对照输入价格 . 这里可以使用窗体的Worksheet_SelectionChange ...
- CKPlayer 只调用HTML5播放器时全屏问题 这只是Chrome浏览器的渲染bug
如题,在系统中使用CKPlayer播放器,一切顺利,偶然发现没有全屏按钮, 正常的全屏按钮是这样的: 经过一步步调试,发现问题出在iframe, 当视频页面在iframe内时,全屏按钮不显示了,这个和 ...
- Flexible 弹性盒子模型之CSS align-self 属性
实例 居中对齐弹性对象元素内的某个项: #myBlueDiv { align-self:center; } 复制 效果预览 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号. 紧跟在 -w ...
- Linux中的info指令
Info 是什么?info是一种文档格式,也是阅读此格式文档的阅读器:我们常用它来查看Linux命令的info文档.它以主题的形式把几个命令组织在一起,以便于我们阅读:在主题内以node(节点)的形式 ...