SOURCE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>云配送-门店派单</title>
</head>
<body>
    <div class="header">
        <div>回单处理</div>
        <div class="nav">
          <button class="button" type="button">
              <i class="icon ion-search"></i>
            查询
          </button>
           
          <button class="button" type="button">
             <i class="icon ion-paper-airplane"></i>
            回单
          </button>

          <button class="button" type="button">
             <i class="icon ion-forward"></i>
            重新派送
          </button>

          <button class="button" type="button">
              <i class="icon ion-arrow-return-right"></i>
            转派工
          </button>

          <button class="button" type="button">
              <i class="icon ion-close-circled"></i>
            撤销派工
          </button>

           <button class="button" type="button">
             <i class="icon ion-qr-scanner"></i>
            扫描瓶号
          </button>


        </div>

    </div>

    <div class="context">
        <div>
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <th>流水号</th>
                        <th>状态</th>
                        <th>客户编号</th>
                        <th>客户名称</th>
                        <th>客户地址</th>
                        <th>客户电话</th>
                        <th>数量</th>
                        <th>总金额</th>
                        <th>销售类型</th>
                        <th>送气人员</th>
                        <th>送气门店</th>
                        <th>付款方式</th>
                        <th>订单时间</th>
                    </tr>

                    <tr>
                        <th><input type="checkbox"></th>
                        <th>00001</th>
                        <th>已派工</th>
                        <th>曹子脩</th>
                        <th>三国</th>
                        <th>三国魏国都城许都皇宫36栋</th>
                        <th>19145685234</th>
                        <th>5</th>
                        <th>600</th>
                        <th>瓶价</th>
                        <th>荀彧</th>
                        <th>一组</th>
                        <th>支付宝</th>
                        <th>2020/12/15</th>
                     
                    </tr>

                </thead>

            </table>

        </div>


    </div>

   <div class="footer">
       <ul class="page">
            <li><a href="#">上一页</a></li>
            <li><a href="#">1</a></li>
            <li><a class="active" href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">下一页</a></li>

       </ul>
    </div>


</body>
</html>

.button{
    width: 110px;
    height: 50px;
    /* float: left; */
    margin: 15px;
    padding: 10PX;
    cursor: pointer;
}









/* 分页样式 */

ul.page {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.page li {
    display: inline;
    }

ul.page li a {
    color: black;
    float: left;
    padding: 8px 15px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
    margin: 0 4px;
}

ul.page li a.active {
    background-color: darkcyan;
    color: white;
    border: 1px solid darkcyan;
}

ul.page li a:hover:not(.active) {
    background-color: #ddd;
}