html如何制作分页

2024-04-08 12:00:10

前端开发过程中，常常需要制作分页的效果，制作分页的思路很简单。
1.新建一个<div>标签；
2.在<div>标签里面创建多个<a>标签；
3.通过css设置<a>标签的样式。

操作方法

01

打开html开发软件，新建一个html页面。如图：
02

在html页面找到body标签，在body标签里新建一个div标签，然后在div标签中新建a标签，并在a标签中输入页数。如图：
03

保存html页面，使用浏览器打开查看分页效果。如图：
04

新建style标签回到html代码页面，找到title标签，在title标签下新建一个<style type="text/css"></style>。如图：
05

设置翻页样式在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; }
06

添加上一页、下一页。在代码页面找到第一个a标签，在这个标签的前面添加：<span>上一页</span>；然后找到最后一个a标签，在这个标签后面添加：<span>下一页</span>；最后在样式.page a后面添加： .page span。如图：
07

保存好代码后重新刷新页面，即可看到分页效果。如图：
08

设置鼠标滑过，鼠标变成手指状态。在.page a,.page span样式类中添加： cursor: pointer;即可。如图：
09

添加鼠标滑过分页字体变色。在styel标签中设置鼠标滑过后字体变色： .page a:hover,.page span:hover{ color: red; }
10

在浏览器中查看效果。如图：

赞 (0)

如何制作分页表格？

现实生活中,我们都会应用到各种电子表格,例如 Microsoft Execl 表格是较为常用的,那面对大量的数据,如何制作分页表格呢?以便于及时打印出来. 操作方法 01 打开Microsoft Ex ...
帝国cms列表页的制作并且数据分页

把栏目数据发分页的形式展示出来,这里以每页2条为列,希望给初学者带来一定的启发! 操作方法 01 登录帝国cms 02 找到栏目->管理栏目点修改选择 [生成选项] 把生成信息每页显示修改成 ...
excel分页表头如何制作

文件-页面设置-"工作表"选项有个顶端标题行,点那个后面有个红色的箭头可以选择你要设置为表头的行
如何设置Excel表格分页

经常在Excel中制作表格时，我们不可能仅仅只作一个表格，有时可能会在一个工作簿中制作多个表格。但我们又希望将所有的表格分别打印到每一张纸上面，每张纸上面只打印一个表格，那么，我们应该如何实现呢?有 ...
DedeCms(织梦)模版制作教程及标记语法详解

一、织梦（Dedecms）简介：织梦内容管理系统(DedeCms) 以简单、实用、开源而闻名，是国内最知名的PHP开源网站管理系统，也是使用用户最多的PHP类CMS系统，在经历了二年多的发展，目前的 ...
使用Word2003制作书法字帖

使用Word2003和Excel2003相结合的方法,可以制作一张既实用又正规的钢笔书法字帖,用户可以尝试一下.唐代欧.虞.颜.柳四大名家把书法艺术推向了极致,宋代毕升的活字印刷术又为出版业插上了腾飞 ...
Excel表格分页技巧

经常在Excel中制作表格时，我们不可能仅仅只作一个表格，有时可能会在一个工作簿中制作多个表格。但我们又希望将所有的表格分别打印到每一张纸上面，每张纸上面只打印一个表格，那么，我们应该如何实现呢?有 ...
Excel表格如何分页打印.自动分页.取消分页等技巧

经常在Excel中制作表格时，我们不可能仅仅只作一个表格，有时可能会在一个工作簿中制作多个表格。但我们又希望将所有的表格分别打印到每一张纸上面，每张纸上面只打印一个表格，那么，我们应该如何实现呢?有许 ...
怎样用WPS制作PDF

PDF是目前主流的电子书格式之一，打开你的WPS，体验一下制作流程吧! 一、打开或生成原始文件。本例中选择用WPS打开《岳飞传.txt》，并进行智能格式整理。二、添加必要的注释。奸人万俟?l姓名 ...