Div+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,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%13%88%00%00%00%0E%08%02%00%00%00L%25a%0A%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%04%F8IDATx%DA%EC%DD%D1n%E2%3A%00E%D1%80%F8%FF%EF%E2%AF2%95%D0D4%0E%C1%14%B0%8Fa-%E9%3E%CC%9C%87n%B9%81%A6W0%1C%A6i%9A%E7y%0As8%1CT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AATE9%FE%FCw%3E%9F%AF%2B%2F%BA%97%FDT%1D~K(%5C%9D%D5%EA%1B%5C%86%B5%A9%BDU%B5y%80%ED%AB*%03%FAV9%AB%E1%CEj%E7%82%EF%FB%18%BC%AEJ8%AB%FA‘%D2%BEU9%D7U%ECc0%E1%A2r%5DynwVi%CFW%7F%BB%17%7Dy%EACU%CD%0E%F0%FA%3BX%FEbV%FEM%9B%2B%AD%BE%AA%E5%95v%AB%AA%E3E5%DCu%15rV9%07%B5%7F%B5w%FCm%BA%BE%AA%FBY%3D%14%F0%EE%C7%60%0EU%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5JU%88%D3%F5%1F%AE%DF%3B%1B%F2%3E%DAUCNa%F92%D02%AC%7Dm%F9%3A%D4%F2%8B6%AE*%BF%5C%C2Ym~9g5%D0Y%95%17%7C%C8c%B0%7C%18%26%9CU%CD%13i%F7%AA%90%B3Z%7D%95%B4%C7%60%E6E%B5%BC%05%B4%FBY%95U%9E%DB%FD%1C%FC%E0%9F%83%7F%BE%17%7DkjMU%E3%03%AC%7CWj%DF%83%9An%BCG%AE%F1%95%96yQ%0Dq%5Dy%00%3Et%B5‘%FC6%5DS%95pV%95%01%81%FF‘%07%00%00%00%00%00%00%00%00%00%F8x%C7%F0%BE%9COp%5D%C9%7C%AD%E7%E6%EBV%FB%1E%E0(%07%E5%AC%C6%3A%ABi%9C%8F%C6%0E9%AB%C0‘%D2%8E%9F%F99%D0E%B5%99%14%F5%0D%CD%7F%24%C6%DEH%B8%E9rV%DFs%DB%D0%F7%00k%FE%1D%84%84%83J%B8%E3%BA%FB%EF%20%84%1C%D7%AD%B0%8E%D7U%C8Y%05%1E%D4t%EF%AD%95Q%BF8w%BF%E9%0A%BF%EB%03%00%00%00%00%00%00%00%00%00%B8vJ%8E%BB%F5%B1u%8Cx%80%E1o%5E%CA9%AB%CB%CB%8E%03%DF%1D%B7T%25%9C%D5(%EFJM8%AB%CC‘%D2%B2*%A4s%E7c6%FB%3E%FA%A2%1E%80~%0E%3E%DA%10x%5D%95Uig%15u%15%ED%7C%14%B6%87%A1%3B%FCo8%A8%D8o%D3%ADO%01%EDx%83%1A~%1B%9FpP%A3%DC%C6‘%9C%95gK%00%00%00%00%00%00%00%00%00%20%D9%C9%11%D0%C0%40%AF%3F%EE%EE%92%94%D6%16X%B5%BCMH%15%2F%BF%D4%A7%C87%F1%8E%F2%81%AE%AAvzr%DA2%ABV%17%7C%E63%83%E7I%DC%C6%0Bs%1B%EF6%1E%00%00%00%00%00%00%00%00%00%80cr%9CW%FF%7F%C6%01%0E%F1%CE%A5%84%B3%CA%BC%E0%CB%AA%84%CE%F9%BF)%EC%13%08WU%AE%AB%B1%AE%2BO%EC%8E%CBYe%FE%8CN%ABr%5Dy%60~%CFA%0D%F4%AE%D4%BE%C75%CA%EDVB%EA(%B7%F1%09g%E5%D9%12%00%00%00%00%00%00%00%00%00H%F6%EB%13S%E7y%5E%5E%FB%98%F0%22%D1%B2‘%A7%F0%92%B1%BC%24z3%AC%7Dm%60%D5%92%B4%7CEUO%5E%F0%AA*%3BU%B9%AE%3E%A0j%94%07%A0%C7%A0%AB%FD%B5%3F%A0%F7%03T%3Dy%D7%F7%D6%D4%C0%AAU%D2%E6%DFt%3F%A8%CC%AA%F2%86%B9%D7%F5%1F%18%E6%01%F8%CC%D5%9E%F0%F3z%88%AA%90%EF%20%00%00%00%00%00%00%00%00%00%C0%A6%D3%EA%CFi%AFb%2C%7BB%0A%2B%C3%1A%D7%06V%D5%07%A8r%5D%3D%D9%A6%CAu%F5%25%CF%A2%99%97zNX%60%95%AB%5DUZ%D5%FBR%03%AB%1C%D4k%9F%3F%BB%5C%FF%81a%AE%AB‘%7F%F3%EA%FE%F3z%94%AA%D8%DF%5B%01%00%00%00%00%00%00%00%00%00%8E%FB%F3%F2%B1%1B%8DWU%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*UiU%C7%BBe%E7%F3%B9%CB%AAJ%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5J%95*U%AAT%A9R%A5*%AAj%FD%C6%D4%5Eo%90%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5%86%AF%1B%9F%98%DA%EBm%BBV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%ADV%AB%D5j%B5Z%AD%D6%E4%F58%01%00%00%00%00%00%00%00%00%00%00%00%00%00%40%85%7F%02%0C%008%C2%D0H%16j%8FX%00%00%00%00IEND%AEB%60%82") 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,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%0E%00%00%13%88%08%02%00%00%00%0E%F5%CB%10%00%00%00%04gAMA%00%00%D6%D8%D4OX2%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%06~IDATx%DA%EC%DD%D1v%A20%14%40Qt%F1%FF%FF%E4%97%D9%07%3BT%19%92%DC%40(%90%EEy%9A5%CB%B6%E8%F6%9Ac%A4%CC0%84%FF%DC%9E%CF%E7%E3%F1%88%DE4%F8%5D%C7%9F%2F%BA%DD%5E%7FI%7D%F18%DDn%BA%C5%FB%DF%97%BFk%F2%10%FF%FD%B4%F2M%A7%FB%FD%FD%B3%22%07p%8F%3F%AE%E3%F4S%8A%8F%40%EEq%9D%BE8D%F0%0EY%A1Uq%B7%EA%1F%81%88V%E8X%3F%B4%CEy%B7h%D1%A2E%EBohU%FC%D9%AF2fO%8BBeD%BE%F7X%0C%97%A4%D6b7%2Ck%A5%12%E3%9B%60v%B7r%C7%1AI%8C%BD%2B%23r%00c0%B2v%9B%AD%CA%26%0C%1Ek%05A%FD%93%D0%2B%A1u%8B%16-%95q%5Ce%DCSO%8E%E4M%23%8B%F7%C2%FE%40%BB%BD%8C%FC%8A%B5V%EBu%40%F9%3B%A72%FA%AE%8C%D4%01%CC%B5%DA%13%9CB%AB%E2I%18%24%B0n%A9%0CZ*Ce%9C%A22%8E%D8NJ%1E%EB%FF%8F%AE%CAP%19*%C3%BAEKe%AC%D1%AAX%8C*%DEH%8F%C5W%A1e%AD%D4%B7%5C%5B%19%C5%DB%0D%EF%9F%19%1D%7B%5E%86%BD%0C%95%A12%AC%5B*%83%96%CAP%19%F62T%86%CAP%19*%83%96%CA%B8Xe%BC%FE)T%19%A1%17xg%7F%DA%CBP%19*%C3%BA%A52T%86%CAP%19%F62T%86%CA%B0n%A9%0CZ%1DV%C6%3D%F3%FCH%DE%B4%B8~%7F%5CZc%F1%D6%1F%AF%84%F9%0F6%E6%EBVt9%0E~%BEr%AF%23%B0%97%A12T%86%CAP%19%B4T%86%CA%B8Re%D8%CBP%19*%C3%BA%A52huX%19%AE%CA%E5%BC%0C%7B%19*CeX%B7h%A9%0C%95%E1%BC%0C%7B%19*CeX%B7T%06%AD%CB%5E%95%2B%BF.%8F%C5%97%D5%E4%7B%EE%82%D6%FB%CF-%9C%FD%B9%CF%3By%7B%19%F62T%86%CA%B0n%D1R%19*%A3%D3%CA%B0%97%A12T%86uKe%D0%EA%B02*%3F1%99%5DB%2B%A4%B5%F8%3A%7C%BA%2B%8Co%7D%5C%EDe%A8%0C%95a%DDR%19%B4T%C66%82fA%B2%ED%DA%9FC%FC%17GZ%06%C9%E1%B3%E5%2C%1A%9FoiB%EB%96%CA%A0%D5qe4%7B%7D%FD%85%F7%5B%ED_%E0s%07%F0k%951%ECr%0D%B5C%D7-g%D1%A8%0C%EB%96%CA%A0%A52T%C6)*%C3%5E%86%CAP%19%D6-%95A%EB*%95q%F8%BB%E3%F9%AB%F6%E21%ACZ%B7%22%B7%9B%3F%02%85%CB%A2%5B%B7%BA%5E%B7%9C%97%E1%BC%0C%EB%16-%95%A12z%AC%0C%BFc%A22T%86uKe%D0%EA%B02V%DD%AD%8A%2B%8CWhe%5E%AF%CF%F5%3B%26%CE%CBh%5C%19%CE%CB%B0%F3%A4%095%A1%CAP%19*Ce%A8%0C%3BO*Ce%A8%0C%95%A12%3A%AD%8C%0A%82%7B%F0v%1F%2FD%A9%5B%9F%EE%EA%26%AF%03%CA%DF9%7B%19*Ce%A8%0C%95%A12T%86%CA%B8Ze%D8%CBP%19*Ce%A8%0C%95%D1ae%EC%F7%89I%E1%B4%D7M%D7P%8BjU%5C%BB%3E%F2%20%D8%CBP%19*Ce%A8%0C%95%A12T%C6%D5*%C3%5E%86%CAP%19*Ce%B4O%07%7B%F0W%7Bw%1C%7C%1A%8C%B3%3B%D1%EE%AA%5C%D6-%EBV%83%80%5E%D0%CA%10%5CU%2BD%E07YU%86%CAP%19*%E3%9A%95%91%D9%A0%C8%AD%5B%EDv%9E%82%FFKOee%E4%8FUe%A8%0C%95%A12T%C6%1F%A9%8C%C8%3D%5B%A5%15%FD%14%22r%E7B%9F%17l%F8%BF%ED%EAf%2B%7F%CF%ECe%D8%CBP%19*Ce%A8%0C%95%E1%93~%7B%19%F62T%86%CAP%19*Ce%A8%0C%E7%13%DA%CBP%19*Ce%A8%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4h%A9%0C%B3E%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4h%A9%0C%B3E%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%A9%0CZf%8B%16-Z%B4h%D1R%19f%8B%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1R%19%B4%CC%16-Z%B4h%D1%A2%A52%CC%16-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2%A52h%99-Z%B4h%D1%A2EKe%98-Z%B4h%D1%A2EKe%D02%5B%B4h%D1%A2EKe%D02%5B%B4h%D1%A2E%8B%96%CA0%5B%B4h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%96%CA%A0e%B6h%D1%A2E%8B%16-%95a%B6h%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-%95A%CBl%D1%A2E%8B%16-Z*%C3l%D1%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z*%83%96%D9%A2E%8B%16-Z%B4T%86%D9%A2E%8B%16-Z%B4T%06-%B3E%8B%16-Z%B4%AE%A4%F5%25%C0%00%DE%BF%5C‘%0F%DA%B8q%00%00%00%00IEND%AEB%60%82") 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>

时间: 2024-10-27 04:05:42

Div+CSS展示物流跟踪轨迹信息的相关文章

DIV+CSS实操五:经管系网页内容模块内容添加(二)

继续接着DIV+CSS实操系列的博文添加代码:DIV+CSS实操一:经管系网页总体模块布局,DIV+CSS实操二: 经管系网页添加导航栏和友情链接栏,DIV+CSS实操三:经管系网页内容模块添加标题栏和版权信息模块和 DIV+CSS实操四:经管系网页内容模块内容添加(一).我们还是添加内容版块的内容,这一次是中间部分和右半部 分.由于中间的图片无缝滚动需要JS实现,我们后续加上. HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

DIV+CSS实操三:经管系网页内容模块添加标题栏和版权信息模块

我们继续接着DIV+CSS实操一:经管系网页总体模块布局和DIV+CSS实操二:经管系网页添加导航栏和友情链接 栏这个系列的博文做经管系网页.这一次我们所要做的就是给内容版块添加标题栏,还有就是给制作信息版块添加链 接.这一篇博文基本就是做这些了,记着和前两篇博文比较效果. 还是老套路,写HTML代码时,一定要注意闭合标签,一定要注意代码的整齐承担和完整性,先来HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

DIV+CSS实操一:经管系网页总体模块布局

首先我们先来打开经管系网页,看看网页效果是怎么样的.通过所学Web前端开发的知识,我们一步一步模仿出 标准的网页.我们知道DIV+CSS可以实现网页模块的总体布局,这基本取代了HTML中用table布局,DIV+CSS布局 更加灵活,改写代码方便. 经管系原网页截图: 我先开始做网页的整体模块布局草图: 下面开始编写代码: 第一次HTML代码: <span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W

div+css感悟

div+css感觉很简单,可是真正做起来一些小细节把握不好,这个网页的布局也是完成不了的.今天学习了一些技巧方法现在分享下: 即一个原则,网页由一个个的大盒子组成,一个个的大盒子里面装着一个个的小盒子.先衡量好大盒子的尺寸,才好确定小盒子的大小. 大盒子包含小盒子,大的盒子必须又小的盒子组成,一个模块不能只有小盒子,要由大盒子来包装.所以先设定大盒子的宽度,高度可以设置,也可以不设置,再设置小盒子的具体信息. 1.现在的网页布局都是采用盒子模型,即网页由一个个div来构成的,div包含着很多di

初学者用div+css结构写网页的几个误区

1.用div+css结构制作静态html网页不等于彻底抛弃古老的table写法.之所以不建议用table来布局网页是因为在网页加载很慢的时候要等table结构加载完成才能看到网页,其次是table的布局没有一定的语义,网页代码修改起来比较麻烦. 在写一些栏目块时,特别是数据分类较多,比如“求购信息”的栏目块,顶部可能出现“发布人.发布时间.信息标题.联系方式”等项目,像这样的地方建议还是要用table来写,因为table是专门用来写数据表格的,控制起来很方便,而且符合语义要求,还有页面中出现类似

div+css 布局经验 - 最简单的 = 最不变形的(原创技巧)

站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条"捷径". 希望广大网友提出宝贵意见 同时不希望将初学的您 带入走火入魔的状态! 1 :css (cascading style sheet): 初学者可以下载一本css 2.0 手册 大概48小时的时间可以看完 试完.至于样式手册上的单词(属性和取值) 多久能背完取决你的努力和英语基础,请注意 无论

DIV+CSS规范命名大全集合

一.命名规则说明: 1).所有的命名最好都小写2).每个标签都要有开始和结束,且要有正确的层次,排版有规律工整3).表现与结构完全分离,代码中不涉及任何的表现元素,如style.font.bgColor.border等4).<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询.5).给每一个表格和表单加上一个唯一的.结构标记id6).给图片加上alt标签7).尽量使用英文命名原则8).尽量不缩写,除非一看就明白的单词 二.相对网页外层重要部分CSS

2天驾驭DIV+CSS (实战篇)(转)

这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区[知识三] 什么是W3C标准?[基础一] CSS如何控制页面[基础二] CSS选择器[基础三] CSS选择器命名及常用命名[基础四] 盒子模型[基础五] 块状元素和内联元素 实战篇[第一课] 实战小热身[第二课] 浮动[第三课] 清除浮动[第四课] 导航条(上) | 导航条(下)[大练

DIV+CSS网页布局常用的一些基础知识整理

CSS命名规范一.文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二.常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer 版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu 标 志:logo标 语:banner标 题:title侧边栏:sidebar 图 标:Icon注 释:note