console
<!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">
选择问卷
</button>
<select name="">
<option value="0">请选择问卷</option>
<option value="1">问卷1</option>
<option value="1">问卷2</option>
<option value="1">问卷3</option>
</select>
<span>
选择客户：
</span>
<input type="text">
<span>
客户电话：
</span>
<input type="text">
</div>
</div>
<div class="context">
<div>
context
</div>
</div>
<div class="send">
<span>
用户意见：
</span>
<button>
保存
</button>
</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;
}