源代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Wfuyu教程(wfuyu.com)</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; transition: background-color .3s; border: 1px solid #ddd; font-size: 18px; } ul.pagination li a.active { background-color: #eee; color: black; border: 1px solid #ddd; } ul.pagination li a:hover:not(.active) {background-color: #ddd;} </style> </head> <body> <p>上一页，下一页按钮:</p> <ul class="pagination"> <li><a href="#">❮</a></li> <li><a href="#">❯</a></li> </ul> <p>分页导航:</p> <ul class="pagination"> <li><a href="#" class="active">Home</a></li> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </body> </html>
运行结果：