Chinaunix首页 | 论坛 | 博客

Web world

首页　| 　博文目录　| 　关于我

cici0208

  • 博客访问： 485572
  • 博文数量： 226
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2111
  • 用 户 组： 普通用户
  • 注册时间： 2014-06-20 09:02
个人简介

web web web

文章分类

全部博文（226）

文章存档

2020年（2）

2019年（1）

2018年（3）

2017年（26）

2016年（57）

2015年（60）

2014年（77）

我的朋友
最近访客
推荐博文
物流追踪

分类： Html/Css

2016-09-15 14:34:27


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <link rel="stylesheet" href="css/bootstrap.min.css">
  7. <link rel="stylesheet" href="css/common.css">
  8. <link rel="stylesheet" href="css/index.css">
  9. <style>
  10. .logistics_info_div {
  11.     margin: 0 15px;
  12.     padding: 15px 0;
  13. }
  14. .logistics_info_ul {
  15.     max-height: 255px;
  16.     _height: 255px;
  17.     padding-left: 75px;
  18.     padding-right: 20px;
  19.     --overflow: auto;
  20.     height: 626px;
  21. }
  22. .logistics_info_ul li {
  23.     position: relative;
  24.     border-bottom: 1px solid #f5f5f5;
  25.     padding-top: 18px;
  26.     padding-bottom: 30px;
  27.     margin-bottom: 30px;
  28.     color: #666;
  29.     background:#fff;
  30.     list-style:none;
  31. }

  33. .logistics_info_ul li p {
  34.     line-height: 16px;
  35.     padding-left:30px;
  36.     font-size:16px;
  37.     color:#4F5356;
  38.     padding-top:12px;
  39. }

  41. .logistics_info_ul li .before {
  42.     position: absolute;
  43.     left: -43px;
  44.     top: 50%;
  45.     height: 120px;
  46.     width: 0;
  47.     border-left: 2px dotted #F4BC83;
  48. }

  50. .logistics_info_ul li .after {
  51.     position: absolute;
  52.     left: -54px;
  53.     top: 50%;
  54.     margin-top:-12px;
  55.     width: 24px;
  56.     height: 24px;
  57.     background: #ddd;
  58.     border-radius: 6px;
  59.     background-image: url(images/logisics/logisics.jpg);
  60. }

  62. .logistics_info_ul li.first .before{
  63.     height: 0px;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <div class="logistics_info_div">
  69.     <ul class="logistics_info_ul">
  70.         <li>
  71.             <p>2015-04-28 11:23:28</p>
  72.             <p>妥投投递并签收，签收人：他人收 他人收</p>
  73.             <span class="before"></span>
  74.             <span class="after"></span>
  75.         </li>
  76.         <li class="first">
  77.             <p>2015-04-26 17:12:00</p>
  78.             <p>泉州市速递物流分公司南区电子商务业务部已收件，（揽投员姓名：王晨光;联系电话：26403）</p>
  79.             <span class="before"></span>
  80.             <span class="after"></span>
  81.         </li>
  82.     </ul>
  83. </div>
  84. <script src="js/jquery-1.11.1.min.js"></script>

  86. <script src="js/bootstrap.min.js"></script>

  88. <script src="js/unslider.min.js"></script>
  89. <script src="js/index.js"></script>
  90. <script src="js/common.js"></script>
  91. </body>
  92. </html>

阅读(496) | 评论(0) | 转发(0) |
0

上一篇：jsonp其实很简单【ajax跨域请求】

下一篇：jquery input change

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6