html+css如何實現靜態分頁效果

這篇文章給大家分享的是有關html+css如何實現靜態分頁效果的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

　　html部分

　　創建一個<div>，給其一個類名center，便于將分頁居中；在<div>標簽里面創建<ul>標簽和<li>標簽，ul和li可以制作一個無序列表，因為我們需要點擊跳轉效果，所以需要在li標簽中插入a標簽，具體代碼如下：

　　<divclass="center">

　　<ulclass="page">

　　<li><ahref="#">上一頁</a></li>

　　<li><ahref="#">1</a></li>

　　<li><aclass="active"href="#">2</a></li>

　　<li><ahref="#">3</a></li>

　　<li><ahref="#">4</a></li>

　　<li><ahref="#">5</a></li>

　　<li><ahref="#">6</a></li>

　　<li><ahref="#">7</a></li>

　　<li><ahref="#">8</a></li>

　　<li><ahref="#">下一頁</a></li>

　　</ul>

　　</div>

　　目前的效果是這樣的：

　　bb.jpg

　　CSS部分

　　由上圖可見，目前的頁面比較丑，現在我們需要用CSS進行美化。首先用float:left讓無序列表左浮動，排列在一行，用text-decoration:none去除a標簽默認的下劃線，用padding調整間距，給分頁效果添加顏色和鼠標點擊或懸停的效果，具體代碼如下：

　　.page{

　　display:inline-block;

　　padding:0;

　　margin:0;

　　}

　　.pageli{display:inline;}

　　.pagelia{

　　color:black;

　　float:left;

　　padding:8px16px;

　　text-decoration:none;

　　transition:background-color.3s;

　　border:1pxsolid#ddd;

　　}

　　.page.active{

　　background-color:#4CAF50;

　　color:white;

　　border:1pxsolid#4CAF50;

　　}

　　.pagea:hover:not(.active){background-color:#ddd;}

　　.center{text-align:center;}

感謝各位的閱讀！關于“html+css如何實現靜態分頁效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！