HTML和CSS如何制作分頁效果

這篇文章主要介紹HTML和CSS如何制作分頁效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

以下是html和CSS實現分頁效果的步驟詳解：

HTML部分：

在頁面中創建一個<ul>標簽和多個<li>標簽，分別給它們一個class類名，便于對其進行CSS樣式設置，ul和li可以制作一個無序列表，因為我們需要點擊跳轉效果，所以需要在li標簽中插入a標簽，具體代碼如下：

<ul class="box modal-4">
<li><a href="#" class="prev"><i class="fa fa-chevron-left"></i> Previous</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#" class="active">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#" class="next"> Next<i class="fa fa-chevron-right"></i></a></li>
</ul>

CSS部分：

基本框架已經搭建出來了，現在我們需要用CSS進行美化。首先用float: left讓無序列表左浮動，排列在一行，用text-decoration: none去除a標簽默認的下劃線，用 padding調整間距，給分頁效果添加顏色和鼠標點擊或懸停的效果，具體代碼如下：

.box {list-style: none;display: inline-block;padding: 0;margin-top: 10px;}
.box li {display: inline;text-align: center;}
.box a {
float: left;
display: block;
font-size: 14px;
text-decoration: none;
padding: 5px 12px;
color: #fff;
margin-left: -1px;
border: 1px solid transparent;
line-height: 1.5;
}
.box a.active {cursor: default;}
.box a:active {outline: none;}
.modal-4 a {
margin: 0 5px;
padding: 0;
width: 30px;
height: 30px;
line-height: 30px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background-color: #F7C12C;
}
.modal-4 a.prev {
-moz-border-radius: 50px 0 0 50px;
-webkit-border-radius: 50px;
border-radius: 50px 0 0 50px;
width: 100px;
}
.modal-4 a.next {
-moz-border-radius: 0 50px 50px 0;
-webkit-border-radius: 0;
border-radius: 0 50px 50px 0;
width: 100px;
}
.modal-4 a:hover {background-color: #FFA500;}
.modal-4 a.active,.modal-4 a:active {background-color: #FFA100;}

效果圖：

由圖可見，一個完整的html分頁效果已經制作好了，當鼠標懸停在分頁內容上或者分頁內容被激活時，其呈現深橘黃色，當鼠標離開時則呈現橘黃色。

以上是HTML和CSS如何制作分頁效果的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！