AitSchool

详情页

  1. 为详情页添加查询到的列表信息，首先创建详情信息模块容器 div 其class名为 detail-section。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小猪快递查询 -- 快递详情</title>
</head>
<body>
    <header class="page-header">
        <div class="user-info">
            <img class="user-avatar" src="./avatar.png">
            <span class="user-nickName">张三</span>
        </div>
        <nav class="page-nav">
             <a href="./index.html">首页</a>
             <a href="./history.html">历史</a>
        </nav>
    </header>
    <div class="page-body">
        <!-- 这里 -->
        <div class="detail-section"></div>
        <!-- 这里 -->
    </div>
    <footer class="page-footer">
        <p>Copyright  2018 扎克斯未来体验技术部出品</p>
    </footer>
</body>
</html>
  1. 详情页的列表信息，添加内容控制容器 container（非必需），主要用于控制内容的现实的区域，实现内容在某宽度内居中。
*
*
*
<div class="detail-section">
    <div class="container"></div>
</div>
*
*
*
  1. 详情页的列表信息主要包含，快递订单、订单进度两个模块。在 contaienr 中添加其容器：
*
*
*
<div class="detail-section">
    <div class="container">
        <div class="detail-info"></div>
        <ul class="detail-list"></ul>
    </div>
</div>
*
*
*
  1. 添加快递订单内容，包含快递公司、快递订单号码
*
*
*
<div class="detail-section">
    <div class="container">
        <div class="detail-info">
            <span class="detail-campany">顺丰快递</span>
            <span class="detail-id">12345678</span>
        </div>
        <ul class="detail-progress"></ul>
    </div>
</div>
*
*
*
  1. 添加快递订单进度内容，包含事件、地点。
*
*
*
<div class="detail-section">
    <div class="container">
        <div class="detail-info">
            <span class="detail-campany">顺丰快递</span>
            <span class="detail-id">12345678</span>
        </div>
        <ul class="detail-progress">
            <li class="detail-progress-item">
                <p class="detail-progress-time">时间 2018-04-14 11:44:22</p>
                <p class="detail-progress-address">订单已完成，感谢您在京东购物，欢迎您再次光临！ 妥投</p>
            </li>
            <li class="detail-progress-item">
                <p class="detail-progress-time">时间 2018-04-14 08:16:21</p>
                <p class="detail-progress-address">配送员开始配送，请您准备收货，配送员，张三，手机号，13811111111 配送员收货</p>
            </li>
            <li class="detail-progress-item">
                <p class="detail-progress-time">时间 2018-04-13 18:45:23</p>
                <p class="detail-progress-address">货物已交付京东物流</p>
            </li>
        </ul>
    </div>
</div>
*
*
*

← 历史页面 →