SOURCE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>云配送-投诉处理</title>
</head>
<body>
    <div class="header">
        <div>投诉处理</div>
        <div class="nav">
          <span>
        咨询时间
        </span>
           
          <input type="date">
        <span>
        到    
        </span>   
        <input type="date">


        <button class="button" type="button">
        咨询类型
        </button>

        <select name="type" id="" class="Custom_type">
                    <option value="0"></option>
                    <option value="1">城市客户</option>
                </select>

         <button class="button" type="button">
        订单来源
        </button>

        <select name="type" id="" class="Custom_type">
                    <option value="0"></option>
                    <option value="1">城市客户</option>
                </select>

         <button class="button" type="button">
        查询
        </button>

         <button class="button" type="button">
        微信回复
        </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>
                    </tr>

                    <tr>
                        <th><input type="checkbox"></th>
                        <th>魏国</th>
                        <th>2020/12/22</th>
                        <th>于禁</th>
                        <th>三国魏国都城许都皇宫32栋</th>
                        <th>19145685234</th>
                        <th>液化气怎么安全使用</th>
                        <th>政府查询人员</th>
                        <th>流动车</th>
                        <th>液化气相关知识PDF</th>
                        <th>2020/12/22</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>

/* 分页样式 */

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;
}