console
<!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>
<button class="button" type="button">
导出Excel
</button>
<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>
<th>预约时间</th>
<th>备注</th>
<th>派单时间</th>
<th>送气人员</th>
<th>送达时间</th>
<th>完成时间</th>
<th>制单人</th>
<th>制单时间</th>
</tr>
<tr>
<th><input type="checkbox"></th>
<th>202000011</th>
<th>0001</th>
<th>张紘</th>
<th>2020/12/22</th>
<th>三国，宋龙山，沙坪海</th>
<th>1988464654</th>
<th>瓶价</th>
<th>十组</th>
<th>2.00</th>
<th>240.00</th>
<th>2020/12/22</th>
<th>无</th>
<th>人名</th>
<th>2020年12月27</th>
<th>时间</th>
<th>人名</th>
<th>2020年12月22日14:06:45</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="send">
<span>
问题答案：
</span>
</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;
}