如果您想要實現具備輸入框的分頁css效果，可以使用以下代碼：
<div class="pagination"> <input type="text" class="pagination-input" placeholder="頁碼"> <a href="#" class="pagination-link prev">上一頁</a> <a href="#" class="pagination-link next">下一頁</a> </div>
解釋：
首先，我們創建了一個class為pagination的
標簽，其中包含了輸入框和兩個分頁鏈接。
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}我們用CSS中的flex布局來居中顯示分頁組件。我們還用了margin-top屬性來添加一些頁面空間。
.pagination-input {
height: 36px;
width: 80px;
text-align: center;
margin: 0 10px;
}
.pagination-link {
display: block;
text-decoration: none;
border: solid 1px #ccc;
color: #333;
padding: 8px 16px;
border-radius: 4px;
margin: 0 5px;
}
.pagination-link:hover {
background-color: #eee;
}
.prev {
margin-right: auto;
}
.next {
margin-left: auto;
}我們還添加了一些CSS樣式，使分頁組件看起來更整潔。
使用這個帶輸入框的分頁css，您可以更方便地進行頁碼跳轉。
下一篇jquery wrap