自定义分页

 <!-- 分页器 -->
<div class="page-nation">
<div class="page-nation-left">
共<span class="total">23</span>页，
第<span class="pageNum">1</span>页
</div>

<div class="page-nation-right">
<div class="first-page">首页</div>
<div class="pre-page">上一页</div>
<div class="next-page">下一页</div>
<div class="last-page">尾页</div>
<div class="goto-pageNum-div"><input type="text" class="goto-pageNum" value="1"/></div>
<div class="btn">GO</div>
<select name="pageSize" id="pageSize">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
</div>
</div>


.page-nation {
display: flex;
align-items: center;
justify-content: space-between;
/*border: 1px solid black;*/
height: 50px;
}

.page-nation-right {
display: flex;
align-items: center;
justify-content: center;
}

.first-page, .last-page {
background-color: #0c89de;
color: white;
height: 30px;
line-height: 30px;
width: 50px;
border-radius: 5px;
text-align: center;
margin: 0 5px;
}

.first-page:hover, .last-page:hover {
background-color: #0b6fb4;
cursor: pointer;
}

.pre-page, .next-page {
background-color: #F5F5F5;
color: black;
height: 30px;
line-height: 30px;
width: 50px;
border-radius: 5px;
text-align: center;
margin: 0 5px;
}

.pre-page:hover, .next-page:hover {
background-color: #c4c4c4;
cursor: pointer;
}

.goto-pageNum-div, .btn, #pageSize {
display: flex;
align-items: center;
justify-content: center;
height: 30px;
width: 50px;
border-radius: 5px;
border: 1px solid #E2ECF5;
margin: 0 5px;
}


.goto-pageNum {
border: none;
height: 100%;
width: 100%;
text-align: center;
border-radius: 5px;
}

.btn {
border: none;
background-color: #6ca60b;
color: white;
}
.btn:hover{
cursor: pointer;
background-color: #57890a;
}