AitSchool

历史页面

在历史页面，添加历史查询信息。

  1. 同理首先添加 history-section 模块和 ，container 容器。

history.html

<!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="history-section">
            <div class="container"></div>
        </div>
        <!-- 这里 -->
    </div>
    <footer class="page-footer">
        <p>Copyright  2018 扎克斯未来体验技术部出品</p>
    </footer>
</body>
</html>
  1. 在 history 模块中以表格形式展现内容
*
*
*
<div class="history-section">
    <div class="container">
        <table border>
            <tr>
                <th width="30%">快递公司</th>
                <th width="70%">订单号</th>
            </tr>
            <tr>
                <td>顺丰</td>
                <td>1234242424</td>
            </tr>
            <tr>
                <td>京东</td>
                <td>8884223223</td>
            </tr>
        </table>
    </div>
</div>
*
*
*

← 小结 →