實例詳解html+css實現靜態分頁效果（附程式碼）-css教學-PHP中文網

實例詳解html+css實現靜態分頁效果（附程式碼）

yulia

發布： 2018-10-26 11:52:30

原創

7916 人瀏覽過

大家在瀏覽網站時有沒有註意到網頁上的分頁效果，正在學習HTML和CSS的小夥伴，你會寫靜態html分頁程式碼嗎？這篇文章就結合實例跟大家介紹HTML分頁效果的製作步驟，最後將html分頁程式碼分享給大家，供大家參考，有興趣的小夥伴可以看看喔。

實現分頁效果需要用到很多CSS中的屬性，例如float浮動，hover偽類選擇器，text-align居中等，如有不清楚的同學可以參考PHP中文網的相關文章，或者造訪CSS影片教學，希望可以幫助你。

實例詳解html CSS實現靜態分頁效果的步驟：

html部分

建立一個

，給其一個類別名稱center，以便於將分頁居中；在

標籤裡面創建

標籤，ul和li可以製作一個無序列表，因為我們需要點擊跳轉效果，所以需要在li標籤中插入a標籤，具體程式碼如下：
```
<div class="center">
   <ul class="page">
       <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="#">8</a></li>
       <li><a href="#">下一页</a></li>
   </ul>
  </div>
```
登入後複製
目前的效果是這樣的：
CSS部分
由上圖可見，目前的頁面比較醜，現在我們需要用CSS來美化。首先用float: left讓無序列表左浮動，排列在一行，用text-decoration: none去除a標籤預設的下劃線，用 padding調整間距，給分頁效果添加顏色和滑鼠點擊或懸停的效果，具體程式碼如下：
```
.page {
       display: inline-block;
       padding: 0;
       margin: 0;
   }   
   .page li {display: inline;}  
   .page li a {
       color: black;
       float: left;
       padding: 8px 16px;
       text-decoration: none;
       transition: background-color .3s;
       border: 1px solid #ddd;
   }   
   .page .active {
       background-color: #4CAF50;
       color: white;
       border: 1px solid #4CAF50;
   }  
   .page a:hover:not(.active) {background-color: #ddd;}   
   .center {text-align: center;}
```
登入後複製
效果如圖所示：

由圖可見，我們的靜態html分頁效果已經實現了，當滑鼠點擊分頁內容時，被啟動的部分呈現綠色，當滑鼠懸停在分頁內容上會出現灰色，並讓整個分頁效果出現在頁面的中間。

以上給大家介紹如何用HTML和CSS實現分頁效果，比較詳細，初學者可以自己動手嘗試，看看你能不能製作出更加酷炫的分頁效果，希望這篇文章對你有所幫助！

【相關教學推薦】

1. Html影片教學
2. CSS3最新版參考手冊##3.
bootstrap教程 #

以上是實例詳解html+css實現靜態分頁效果（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！