資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 CSS 新增可懸停分頁
分頁用於將給定文件分成多個頁面並分配編號。它透過將各種條目或網頁內容分成單獨的頁面，使瀏覽大量內容變得更容易，從而方便內容切換。啟用分頁的網頁連結允許使用者滾動瀏覽您的內容。CSS 分頁是網站首頁上不同網頁索引的一種有效技術。如果您的網站頁面很多，則需要為每個頁面實現分頁。可懸停分頁沒什麼特別的，只是當用戶將滑鼠懸停在分頁上時，它會顯示懸停效果。
CSS 中有不同型別的分頁可用，其中一些列在下面 -
簡單分頁
帶邊框的分頁
活動和可懸停分頁
帶圓形和可懸停按鈕的分頁
使用 CSS 建立分頁
分頁是一系列出現在頁面底部的數字。使用分頁時，還可以有上一頁和下一頁按鈕。使用 `display: inline-block` 屬性，因為頁面編號在螢幕上水平顯示。分頁中包含頁面連結，因此要刪除連結的預設下劃線，請使用 `text-decoration:none`。現在可以為連結新增填充和背景顏色。此外，還可以為分頁連結新增 `:hover` 效果。
為了更好地理解如何使用 CSS 新增可懸停分頁，讓我們看看以下示例 -
示例
讓我們看看下面的示例，我們將使用 CSS 建立一個活動且可懸停的頁面。
<!DOCTYPE html>
<html>
<head>
<style>
.tp a {
font-size: 20px;
float: left;
padding: 15px 16px;
text-decoration: none;
}
.tp a.active {
background-color: #ABEBC6;
}
.tp a:hover:not(.active) {
background-color: #E8DAEF;
}
</style>
</head>
<body style="background-color:#E5E8E8">
<div class="tp">
<a href="#">«</a>
<a href="#">1</a>
<a href="#">2</a>
<a class="active" href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">»</a>
</div>
</body>
</html>
當我們執行以上程式碼時，它將生成一個輸出，其中包含應用了 CSS 的分頁，顯示在網頁上。
示例
考慮另一個示例，我們將使用列表和 CSS 建立一個圓形且可懸停的分頁。
<!DOCTYPE html>
<html>
<head>
<style>
.pagination li {
display: inline;
}
.pagination li a {
color: #DE3163;
font-size: 20px;
float: left;
padding: 10px 20px;
text-decoration: none;
border-radius: 7px;
}
ul.pagination li a.active {
background-color: #E8DAEF;
color: #212F3D;
}
ul.pagination li a:hover:not(.active) {
background-color: #FADBD8;
}
</style>
</head>
<body style="background-color:#D6EAF8">
<ul class="pagination">
<li>
<a href="#">«</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a class="active" href="#">4</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
</body>
</html>
執行以上程式碼後，輸出視窗將彈出，在網頁上顯示應用了 CSS 的分頁。
示例
在以下示例中，我們將使用 CSS 建立帶邊框的分頁
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
font-family: verdana;
background-color: #EAFAF1;
}
ul.tp {
display: inline-block;
padding: 0;
}
ul.tp li {
display: inline;
}
ul.tp li a {
float: left;
padding: 10px 18px;
text-decoration: none;
border: 1.2px solid #7D3C98;
}
ul.tp li a.active {
background-color: #DE3163;
color: #1C2833;
border: 1.2px solid #7D3C98;
}
ul.tp li a:hover:not(.active) {
background-color: #D6EAF8;
}
</style>
</head>
<body>
<h2>Bordered Pagination</h2>
<ul class="tp">
<li>
<a href="#">«</a>
</li>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a class="active" href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">»</a>
</li>
</ul>
</body>
</html>
當我們執行以上程式碼時，它將生成一個輸出，其中包含文字和帶邊框的分頁，顯示在網頁的中央。
更新於: 2024年1月8日
207 次瀏覽
廣告