您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“如何使用css實現(xiàn)分頁功能”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
1.首先創(chuàng)建一個html文件。
2.在html文件中添加html代碼架構(gòu)。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>分頁效果</title> </head> <body> </body> </html>
3.然后在html代碼架構(gòu)中的body標簽里面使用ul、li標簽設(shè)計頁碼數(shù)。
<ul class="pagination"> <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="#">?</a></li> </ul>
4.在html架構(gòu)中的html標簽里面添加style標簽并寫入css樣式代碼來實現(xiàn)點擊及鼠標懸停的分頁樣式。
<style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; } ul.pagination li a.active { background-color: #4CAF50; color: white; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style>
5.最后可通過瀏覽器方式閱讀html文件查看設(shè)計效果。
完整示例代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分頁效果</title> <style> ul.pagination { display: inline-block; padding: 0; margin: 0; } ul.pagination li {display: inline;} ul.pagination li a { color: black; float: left; padding: 8px 16px; text-decoration: none; } ul.pagination li a.active { background-color: #4CAF50; color: white; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <ul class="pagination"> <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="#">?</a></li> </ul> </body> </html>
“如何使用css實現(xiàn)分頁功能”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。