简单教程
提交运行
代码编辑器:
<!DOCTYPE html> <meta charset="utf-8"><link href="/static/next/css/tryit.css?v=2017082407" rel="stylesheet"/> <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> <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> <footer>简单教程,简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>
运行结果: