資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 CSS 建立“下一頁”和“上一頁”按鈕？
使用 CSS 建立“下一頁”和“上一頁”按鈕是網頁的常見需求，尤其是在多頁內容中，因為它簡化了不同頁面之間的導航。在本文中，我們將瞭解如何使用 CSS 建立“下一頁”和“上一頁”按鈕。
我們的 HTML 文件中有兩個 錨 標籤，我們的任務是使用 CSS 設計這兩個錨標籤以建立“上一頁”和“下一頁”按鈕。
使用 CSS 建立“下一頁”和“上一頁”按鈕
- 我們使用兩個錨標籤來表示上一頁和下一頁按鈕。
- 我們使用 **button** 類來設計這兩個按鈕的外觀，使用 background-color 設定背景顏色，使用 color 設定文字顏色，設定它們的 border，並使用 border-radius 屬性建立圓角。
- 我們設定了按鈕的 padding，設定它們的 display 屬性，並將其 text-decoration 屬性設定為 none，從而移除文字的下劃線。
- 然後，我們使用 hover 偽類在懸停按鈕時設定不同的屬性。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS 建立了下一頁和上一頁按鈕。
<!DOCTYPE html>
<html>
<head>
<title>
Creating next and previous Buttons With CSS
</title>
<style>
a {
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}
a:hover {
background-color: white;
color: #031926;
border: 2px solid #031926;
}
.button {
background-color: #031926;
color: white;
border: 2px solid #031926;
border-radius: 10%;
}
</style>
</head>
<body>
<h3>
To Create "next" and "previous" Buttons With CSS
</h3>
<p>
</p>
<a href="#" class="button">‹ Previous</a>
<a href="#" class="button">Next ›</a>
</body>
</html>
結論
在本文中，我們瞭解瞭如何使用 CSS 建立“下一頁”和“上一頁”按鈕。這是一個簡單的任務，可以透過使用基本的 CSS 屬性（如 **background-color** 和 **border**）來實現。我們使用了懸停效果來增強互動性。
更新於: 2024年9月3日
5K+ 瀏覽量
廣告