前端开发过程中，常常需要制作分页的效果，制作分页的思路很简单。
1.新建一个
2.在
3.通过css设置标签的样式。
打开html开发软件，新建一个html页面。如图：
在html页面找到body标签，在body标签里新建一个div标签，然后在div标签中新建a标签，并在a标签中输入页数。
如图：
保存html页面，使用浏览器打开查看分页效果。如图：
新建style标签
回到html代码页面，找到title标签，在title标签下新建一个。如图：
设置翻页样式
在style标签里新建一个样式类page，在page类中设置样式，然后对a标签设置样式，设置好后在div标签引用page类。保存好代码后刷新浏览器即可看到翻页效果。如图：
样式代码：
.page{ text-align: center; margin-top: 50px; }
.page a{ text-decoration: none; border:1px solid #f9d52b; padding: 5px 7px; color: #767675; cursor: pointer; }
添加上一页、下一页。
在代码页面找到第一个a标签，在这个标签的前面添加：上一页；然后找到最后一个a标签，在这个标签后面添加：下一页；最后在样式.page a后面添加： .page span。
如图：
保存好代码后重新刷新页面，即可看到分页效果。如图：
设置鼠标滑过，鼠标变成手指状态。
在.page a,.page span样式类中添加： cursor: pointer;即可。如图：
添加鼠标滑过分页字体变色。
在styel标签中设置鼠标滑过后字体变色：
.page a:hover,.page span:hover{ color: red; }
在浏览器中查看效果。如图：
标签：html,分页
-
分页预览怎么把一页变成两页
2024-12-24 02:49浏览量 605次 -
分页符的作用
2024-09-10 23:08浏览量 545次 -
html5新增的表单元素有哪些
2024-09-02 14:13浏览量 570次 -
html 换行代码
2023-12-13 12:08浏览量 575次 -
HTML5游戏
2023-04-18 18:10浏览量 674次 -
HTML 5 textarea
2023-04-09 22:10浏览量 661次
