頁面翻頁

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻頁</title>
<style type="text/css">
.page{
width: 960px;
height: 42px;
margin: 100px auto;
border: 1px #E7E7E7 solid;
}
.page1{
width: 450px;
margin: 8px auto;
}
a{
text-align: center;
text-decoration: none;
display: inline-block;
background-color: gold;
font: 12px 微軟雅黑;
color: #000;
padding: 5px 11px;
}
a:hover{
color: #dd992d;
}
</style>
</head>
<body>
<div class="page">
<div class="page1">
<a href="#" class="button">上一頁</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<span>...</span>
<a href="#">17</a>
<a href="#">18</a>
<a href="#">19</a>
<a href="#">20</a>
<a href="#" class="button">下一頁</a>
</div>
</div>
</body>
</html>

效果圖

翻頁.png
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容