如何用css實現頁面底部展示不同的分頁效果？（多種樣式樣本）

最後更新：2018-08-11 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

大部分網站都是由多個頁面組成的，很少是由單頁面而組成的。那麼多頁面就需要涉及到分頁功能。本篇文章就給大家介紹下css分頁設定及css分頁代碼的具體實現操作。

一、一個簡單的css分頁代碼具體樣本如下：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>css分頁樣式代碼測試</title>    <style>        ul.pagination {            display: inline-block;            padding: 0;            margin: 0;        }        ul.pagination li {display: inline;}        ul.pagination li a {            color: black;            float: left;            padding: 8px 16px;            text-decoration: none;        }    </style></head><body><h2>簡單的分頁</h2><ul class="pagination">    <li><a href="#">«</a></li>    <li><a href="#">1</a></li>    <li><a class="active" href="#">2</a></li>    <li><a href="#">3</a></li>    <li><a href="#">4</a></li>    <li><a href="#">5</a></li>    <li><a href="#">6</a></li>    <li><a href="#">7</a></li>    <li><a href="#">»</a></li></ul></body></html>

效果如：

二、css分頁效果--點擊及滑鼠移至上方分頁樣式具體程式碼範例如下：

<h2>css分頁效果--點擊及滑鼠移至上方分頁樣式</h2><p>請你移動滑鼠到分頁的數字上</p><ul class="pagination">    <li><a href="#">«</a></li>    <li><a href="#">1</a></li>    <li><a class="active" href="#">2</a></li>    <li><a href="#">3</a></li>    <li><a href="#">4</a></li>    <li><a href="#">5</a></li>    <li><a href="#">6</a></li>    <li><a href="#">7</a></li>    <li><a href="#">»</a></li></ul>

style樣式代碼：

ul.pagination {    display: inline-block;    padding: 0;    margin: 0;}ul.pagination li {display: inline;}ul.pagination li a {    color: black;    float: left;    padding: 8px 16px;    text-decoration: none;}ul.pagination li a.active {    background-color: #4CAF50;    color: white;}ul.pagination li a:hover:not(.active) {background-color: #ddd;}

效果如：

註：如果點擊當前頁，可以使用 .active 來設定當期頁樣式，滑鼠移至上方可以使用 :hover 選取器來修改樣式。

:hover在滑鼠移到連結上時添加的特殊樣式。可用於所有元素，不僅是連結。

:link 選取器設定了未訪問過的頁面連結樣式

:visited 選取器設定訪問過的頁面連結的樣式:active選取器設定當你點選連結時的樣式。

三、css分頁樣式--圓角樣式

這裡代碼主要區別就是涉及到 border-radius 屬性。

ul.pagination li a {    border-radius: 5px;}ul.pagination li a.active {   border-radius: 5px;}

效果如：

註：

border-radius 屬性是一個簡寫屬性，用於設定四個 border-*-radius 屬性。該屬性允許您為元素添加圓角邊框！

本篇文章關於css分頁樣式介紹了三種情況可供大家參考，希望對有需要的朋友有所協助！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More