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

大家在瀏覽網站時有沒有註意到網頁上的分頁效果，正在學習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中文網其他相關文章！