html+css如何實現(xiàn)靜態(tài)分頁效果

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

　　html部分

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

　　<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部分

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

　　.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;}

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