html中的分页条怎么写,html如何制作分页

article/2025/8/15 17:15:25

一般的制作页面都会使用到分页,那么你知道分页功能是怎么实现的吗?让我们一起来学习一下html如何制作分页吧。

3898b4f0f694f89f13b2051956a5671d.png

新建html页面。如图:

5a2300d55df2b2296bedfecc92bf2f5e.png

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

b7a1ca731f9bd1679b5ead7699510898.png

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

d2a32619ca066c60bc0eda1a11198761.png

新建style标签回到html代码页面,找到title标签,在title标签下新建一个。如图:

a3c8bd7484d78531212668734c9ab7b0.png

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

f503b71edd0d9163078e7b4f71070d96.png

d83f762b2663f6b4bc7d8aa15490b9a6.png

添加上一页、下一页。在代码页面找到第一个a标签,在这个标签的前面添加:上一页;然后找到最后一个a标签,在这个标签后面添加:下一页;最后在样式.page a后面添加: .page span。如图:

06d79d8c0796b66d8e39fa35a61cac8c.png

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

53a25cbb4d90ad9d61437d3b09b28307.png

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

91ff30ebed96307cd3c018893991affb.png

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

ad220439ee9515bbbd875d3db2115fa3.png

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

93bdf189b149e0dac73d501a0df254f2.png

举报/反馈


http://chatgpt.dhexx.cn/article/o12GrtLk.shtml

相关文章

html分页功能

&#xff08;代码来源 http://www.xwcms.net/&#xff0c;非原创&#xff01;&#xff09; 1、导入css、js文件 2、根据index.html中的页面进行相应的修改 主要函数实现&#xff08;其中&#xff0c;#exampletable为需要分页的table的id&#xff09; <script type"te…

HTML+CSS实现网页分页页码

直角分页页码实现 <!doctype html> <html> <head> <meta charset"utf-8"> <title>直角分页页码</title> <style type"text/css">/*设置 a 标签的css样式*/.page-normal a{border: 1px solid #ff6500;padding: …

前端 利用html实现分页切换效果

本篇文章主要要实现的功能效果如下&#xff1a; 包含首页 尾页 上一页 下一页 总计的页数以及总计的条数还有跳转的功能 整体思想&#xff1a;先定位一个中心页 上一页、下一页就是根据定位中心页然后加减就可以实现 首页就是要根据一次要展示几页&#xff0c;然后分别展示…

HTML实现分页功能

思路 主要是通过display: block和display: none来实现页面的切换。 将每个页面用一个div包起来&#xff0c;默认第一个页面的样式是display: block&#xff0c;其他页面的样式是display: none&#xff0c;然后通过JavaScript获取鼠标点击事件来隐藏其他页面&#xff0c;显示当…

html+js实现分页功能

1、分页功能实现效果如下&#xff1a; 2、代码如下 <!DOCTYPE html > <html> <head><title> 消息呈现 </title><link rel"icon" href"picture.ico" type"image/x-icon" /><script src"../js/jquer…

阿里云服务器Windows系统搭建Java Web网站教程

一、首先首先搜索阿里云官网&#xff0c;购买服务器 二、 打开控制台-云服务器ECS-实例&#xff0c;先停止运行&#xff0c;再选择更换系统盘&#xff0c;选择带有jdk和tomcat和MySQL的系统镜像安装。 三、 待服务器重启后&#xff0c;打开Windows自带的远程连接软件&#xff0…

关于阿里云Centos服务器搭建Java网站不能访问的问题

转载请注明出处&#xff1a;http://blog.csdn.net/l1028386804/article/details/73864773 首先阿里云提供的手册是没问题的 手工搭建 然后我在地址栏输入服务器地址之后总是提示无法访问&#xff01; 输入命令 netstat -tunlp&#xff0c;80端口确实是在监听&#xff08;这…

【阿里云】基于ECS搭建Java Web开发环境

点击右侧 切换至Web Terminal&#xff0c;执行以下命令&#xff0c;查看yum源中JDK版本。 yum list java* 执行以下命令&#xff0c;使用yum安装JDK1.8。 yum -y install java-1.8.0-openjdk* 执行以下命令&#xff0c;查看是否安装成功。 java -version 如果显示如下图内…

一、申请阿里云服务器及搭建Java开发环境教程 -- 购买阿里云服务器(1)

注&#xff1a;云服务器开发环境如下 &#xff08;CentOS JDK1.7 Mysql ZooKeeper Redis Nginx maven中央库Nexus&#xff09; 一、购买阿里云服务器 1、百度搜索阿里云官网或地址栏输入 https://www.aliyun.com 进入阿里云官网&#xff0c;登录或注册进入&#xff0c;…

阿里云搭建网站

首次搭建个人小站&#xff0c;建议购买域名和服务器到知名商家&#xff0c;比如阿里云&#xff0c;百度云等。因为阿里云绑定了个人淘宝账号&#xff0c;所以成为本人首选&#xff0c;嘿嘿。 购买域名。点击打开http://www.aliyun.com/ 链接地址。并点击右上角的“万网”标记。…

阿里云服务器部署javaweb

1.首先购买服务器和域名 服务器类型选择&#xff1a;云服务器ecs&#xff08;不要选择突发性能型&#xff09;&#xff0c;域名自便&#xff08;注&#xff1a;域名解析需要备案&#xff0c;此类型服务器要求有效期大于三个月才可以备案&#xff09;。 服务器设置&#xff1a…

教你从0开始部署阿里云服务器,阿里云服务器搭建网站教程

教你从0开始部署阿里云服务器&#xff0c;阿里云服务器部署网站的办法&#xff0c;阿里云搭建项目的办法&#xff0c;阿里云服务器搭建网站教程 1.购买 登录官网点击下面链接&#xff1a;阿里云注册链接 查看云服务器购买列表&#xff0c;购买时选择地区、操作系统镜像等&…

阿里云搭建java web

1.首先进入ECS实例&#xff0c;开启实例并且使用XShell连接 2.安装JDK 执行以下命令&#xff0c;查看yum源中JDK版本。 yum list java*执行以下命令&#xff0c;使用yum安装JDK1.8。 yum -y install java-1.8.0-openjdk*执行以下命令&#xff0c;查看是否安装成功。 java …

如何使用阿里云搭建个人网站

国内比较早的几个个人网站有阮一峰、月光博客等。他们都会定期的更新一些文章&#xff0c;阮一峰的更新频率大概在每月4篇&#xff0c;月光博客每天一篇。他们每天的浏览量在2万以上&#xff0c;每月最低收入都在2万以上。作为一个程序员&#xff0c;我一直想给自己找点事情做。…

如何利用阿里云ECS服务器和域名,搭建部署自己的网站(Windows系统)

前言 建站简单方法 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、购买服务器和域名 根据自己的需求购买相应级别的服务器 示例&#xff1a;ECS共享型n4 二、服务器创建实例和域名备案 详细过程自行百度即可&#xff0c;再此不详细说明&…

【网站搭建】阿里云搭建个人网站详细流程

1. 工具的选择 因为直接网页操作实例的话不是很方便&#xff0c;鉴于有Linux和大数据开发经验。使用以下工具 winscp&#xff1a;文件传输&#xff0c;可以实现本地和远程端的文件传输&#xff0c;也可以直接修改远程端文件&#xff0c;不用在终端里了XSHELL:安全终端模拟软件…

教你快速在阿里云服务器上搭建网站!

前文概述 出于好奇&#xff0c;我用学生优惠租了一台阿里云服务器&#xff0c;打算做一些Java web的开发&#xff0c;但是毕竟是第一次接触这样的东西&#xff0c;还是比较陌生&#xff0c;在这个过程中遇到了一些问题(肯定会遇到问题的)&#xff0c;但是呢&#xff0c;在网上搜…

使用阿里云ECS服务器搭建java环境

服务器搭建java 第一步 安装java环境 首先使用Linux命令 yum list java*截图如下 在这里可以选择自己想要的版本。这里我选择java8 yum install java-1.8.0-openjdk.x86_64出现如下截图&#xff0c;则表示安装完毕 接下来可以查看java的版本号&#xff0c;以证明安装完毕…

保姆级教程,阿里云快速搭建个人网站

首先想要搭建一个网站需要一个域名和服务器&#xff0c;我们先去阿里云搜索这两个东西&#xff0c;然后分别去购买一下 服务器这里有轻量级应用服务器和云服务器ECS都可以选择 我选择的是ECS&#xff0c;然后我们去购买&#xff0c;产品区域选中国的话还要去进行ICP备案&…

手把手带大家搭建一个java个人网站(腾讯云为例)

大家好&#xff0c;我是鸟哥。一个半路出家的程序员。 这次真是学妹要的&#xff01;前几天鸟哥以腾讯云为例给大家分享了一篇如何搭建服务器的文章——手把手带大家搭建一台服务器&#xff08;腾讯云为例&#xff09;&#xff0c;文章结尾表示过几天带大家搭建一个网站&#x…