设计并制作网页技术介绍页面page1.html和page2.html，单击index.html页面中的图片时，跳转显示page1.html页面，单击上一页、下一页时，页面之间相互跳转

已于 2023-12-26 03:04:01 修改
阅读量866 收藏 18
点赞数 19
文章标签： html 前端
于 2023-12-26 01:23:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sankang2022/article/details/135211869
版权

index文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<div align="center"> <a href="page1.html"><img src="inmages/timg.jpg" width="500" height="300" boder="1" /></a>
</div>
</body>
</html>

page1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.fx {
    width: 1500px;
}

.fc {
    width: 200px;
    float: left;
}

.fv {
    width: 1200px;
    height: 193px;
}

.fb {
    float: left;
}

.fn {
    float: right;
}
</style>
</head>

<body>

<div align="center" class="fx">
<h2>HTML5技术介绍</h2><hr color="#FF9900" />
<div align="left" class="fc" >
<img src="inmages/HTML5.jpg" width="199" height="193" />
</div>
<div align="left" class="fv">
<ul>
<li>HTML5规范于2014年10月29日由万维网联盟正式宣布，HTML是万维网最核心的超文本标记语言。</li>
<br />
<li>HTML5是定义HTML标准的新版本，具有新的元素，属性和行为。</li>
<br />
<li>HTML5的设计目的是为了在移动设备上支持多媒体。</li>
<br />
<li>随着移动通信技术的快速发展，HTML5将成为主流。</li></ul>
<br />
</div>
<hr color="#FF9900" />
</div>
<div class="fb"> <a href="index.html"><img src="inmages/prev.png" /></a>
</div>
<div class="fn"> <a href="page2.html"><img src="inmages/next.png" /></a>
</div>
</body>
</html>

page2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.fx {
    width: 1500px;
}

.fc {
    width: 200px;
    float: left;
}

.fv {
    width: 1200px;
    height: 193px;
}

.fb {
    float: left;
}

.fn {
    float: right;
}
</style>
</head>

<body>

<div align="center" class="fx">
<h2>CSS3技术介绍</h2><hr color="#33FF66" />
<div align="left" class="fc" >
<img src="inmages/css3.jpg" width="199" height="193" />
</div>
<div align="left" class="fv">
<ul>
<li>CSS即层叠样式表（Cascading StyleSheet）。</li>
<br />
<li>CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。
</li>
<br />
<li>这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。</li>
<br />
<li>在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。</li>
</ul>
<br />
</div>
<hr color="#33FF66" />
</div>
<div class="fb"> <a href="page1.html"><img src="inmages/prev.png" /></a>

</body>
</html>

新建index.html，通过img的src属性加载图片timg.jpg，通过boder属性设置边框线为1，调整图片宽度为500，高度为300。-CSDN博客文章浏览阅读15次。title>无标题文档https://blog.csdn.net/sankang2022/article/details/135212111 

大数据三康
关注
  • 19
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html页面跳转先显示底部,页面跳转
weixin_30312037的博客
06-03 1126
Model.prototype.openBtnClick = function(event){var url = '$UI/comp/contents.w';justep.Shell.showPage(url);};在页面B中关闭自身Model.prototype.closeBtnClick = function(event){justep.Shell.closePage();};2、在BeX5中...
django html跳转页面跳转页面,Django html单击打开另一个html页面
weixin_39654322的博客
06-03 1161
我目前在使用django打开html页面时遇到了问题，尽管我已经尝试在网址.py, 视图.py，以及html页面。我的代码如下：电池电流.py在“视图”文件夹下from __future__ import absolute_importfrom __future__ import unicode_literalsfrom django.core.files.storage import defau...
设计并制作网页技术介绍页面page1.html，单击上一页、下一页时，页面之间相互跳转
sankang2022的博客
12-26 425
HTML5是定义HTML标准的新版本，具有新的元素，属性和行为。HTML5技术介绍随着移动通信技术的快速发展，HTML5将成为主流。无标题文档
计并制作网页技术介绍页面page2.html，单击上一页跳转
sankang2022的博客
12-26 528
计并制作网页技术介绍页面page2.html，单击上一页跳转
html自动随机跳转网址,网页制作页面跳转 怎么制作一个随机跳转页面的超链接?...
weixin_39603117的博客
06-02 2861
“网页设计如何从一个页面跳转到另一个页面”window.location.href = 'page2.html';html网页登录界面跳转设计在网页制作中如何实现不同页面之间的跳转在页面的开始位置加入一个书签，选择“插入”菜单下的“书签”命令，在弹出的对话框中输入书签的名字，比如“top”，单击“确定”，在页面开始就会出现一个书签标志。在页面的最后输入“返回顶端”，并选中，HTML网页设计:如何设...
html5 做的实训作品,实训1-2制作HTML5百科页面.doc
weixin_39862382的博客
06-03 1264
博学谷——让IT教学更简单，让IT学习更有效PAGE 2PAGE 7实训1-2 制作HTML5百科页面实训目的熟悉HBuilder,熟悉HTML5文档基本格式能够运用HTML5语法基本格式及标记、文本控制标记以及图像标记制作简单的页面。案例描述制作一个HTML5百科页面“HTML5百科—首页.html”，默认效果如图1所示。图1 HTML5百科页面默认效果当在图1所示的页面区域单击时，跳转...
html中点击事件弹出页面跳转页面,react中怎么实现点击跳转页面？
weixin_34840783的博客
06-03 1803
react中怎么实现点击跳转页面？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。react中实现点击跳转到新页面方法实现点击跳转到新页面，可以有两种形式，一个是本地页面打开，一个是本地页面不变跳转到新的页面。(一)页面点击本地页面打开新页面引入ant的Button组件onClick={()=>{window.location.href="http...
html如何实现点击文本跳转到其他页面,关于使用javascript实现点击一个页面文本框，然后跳转到另一个页面进行点击值回传例子...
weixin_30017913的博客
06-03 958
一团网资讯一团资讯 > javascript > 关于使用javascript实现点击一个页面文本框，然后跳转到另一个页面进行点...关于使用javascript实现点击一个页面文本框，然后跳转到另一个页面进行点击值回传例子2018-06-08 12:01:22 发布者：来源网络d.jsppageEncoding="gb2312"%>Insert title herefu...
axure导出html预览页面变大,axure制作的网页 肿么让他自适应分辨率呢
weixin_39668479的博客
06-05 3212
在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。第一种方法：做一个网页解决问题(长了点)如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得面目全非，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们有所帮助。一、消除任...
efTwo（F2） - 高级在页面上查找「efTwo (F2) - Advanced Find on Page」-crx插件
03-20
Bing，Yahoo，可能会更多受支持）添加了悬停删除功能，可轻松删除单词固定设置页面d esign支持快捷滚动（再次按热键可滚动到下一个关键字）错误修正1.1.0跳转并突出显示页面上的特定单词（单击该单词，然后使用“下...
整个页面的屏幕截图「Full Page Screen Capture」-crx插件
03-08
在极少数情况下，如果您的页面太大，以至于Chrome无法存储在一张图片中，它将通知您并将其拆分为单独的标签中的图片。 将结果导出为PNG，JPEG或各种PDF纸张尺寸-所有这些都可以通过扩展程序的选项进行配置。 此扩展...
landing-page-udacity
05-25
作者艾哈迈德·戈玛（Ahmad Gomma）Udacity登陆页面项目使用语言html Css Javascript与Dom项目总结该项目旨在提供... 此外，当用户单击导航项目时，该项目将滚动到适当的部分，而不是提供默认的跳转。 听起来可能不算
怎样在多个Excel工作表中快速跳转指定表.docx
09-27
在Excel中处理包含多个工作表的数据时，快速跳转到特定的工作表是非常重要的效率提升技巧。以下是如何在Excel中实现这一目标的详细步骤和相关知识点： 1. **工作表的基本概念**：在Excel中，一个文件称为工作簿，...
JSP程序设计考试试题与答案-(1).docx
10-20
1. Page 指令用于定义 JSP 文件中的全局属性。该指令的用法是，在一个页面中可以使用多个 `<%@ page %>` 指令，但 `<%@ page %>` 指令中的属性只能出现一次。 答案：C 知识点：Page 指令是 JSP 编程中用于定义全局...
html 关闭信息窗口
cuisidong1997的博客
07-14 347
如果你想要通过点击favicon来关闭一个窗口，你需要添加一个监听器来监听favicon的点击事件，但是由于favicon通常不支持JavaScript事件监听，你可能需要使用一些特殊的技巧，例如监听鼠标移动到favicon上的事件，并通过这种方式触发窗口关闭。如果你是指的是一个favicon（网页标题前的小图标），并且你想要通过点击这个图标来关闭一个信息窗口，那么你需要使用JavaScript来监听favicon的点击事件，并在事件处理函数中执行关闭窗口的操作。html 关闭信息窗口 ico。
高频面试题-HTML
CSDN20221005的博客
07-15 938
离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下 来。块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)空元素： <br> <hr> <img> <input> <link> <meta>->新增了语义化标签(header/footer/nav/asid)->新增了表单增强控件(data/time/email/url)
DDei在线设计器-HTML渲染
最新发布
hoslay1的专栏
07-18 219
HtmlViewer插件通过将一个外部DIV附着在图形控件上，从而改变原有图形的显示方式。允许使用者自己定义HTML通过HTML元素。本示例演示了通过Html来扩展渲染图形，从而获得更加丰富的图形展现。通常情况下，我们创建的图形控件，如下图所示：通过HtmlViewer插件，我们可以使用表现力更强的HTML元素来替换显示的图形，或者结合业务需要，将一些业务数据显示在图形上，如下：!
ChatGPT对话：如何把Html文件转换为Markdown文件
uestcai的博客
07-15 1390
【编者按】ChatGPT提供了多种方法。编者常用VS Code，所以想使用VS Code解决问题，但ChatGPT提供了一些错误的方法，失败了。最后发现编写python程序最简单。
2．设计一个具有三个选项的菜单程序，当单击每个选项时分别跳转到三个不同的页面。
06-06
好的，这个问题我可以回答。以下是实现这个菜单程序的基本步骤： 1. 创建一个包含三个选项的菜单页面。 2. 在每个选项上添加一个单击事件处理程序。 3. 创建三个不同的页面，每个页面都包含不同的内容。 4. 在每个选项的事件处理程序中，使用 JavaScript 将用户重定向到相应的页面。 以下是一个简单的示例代码，你可以参考一下： ```html <!DOCTYPE html> <html> <head> <title>菜单程序</title> <script> function goToPage1() { window.location.href = "page1.html"; } function goToPage2() { window.location.href = "page2.html"; } function goToPage3() { window.location.href = "page3.html"; } </script> </head> <body> <h1>菜单</h1> <ul> <li><a href="#" onclick="goToPage1()">选项1</a></li> <li><a href="#" onclick="goToPage2()">选项2</a></li> <li><a href="#" onclick="goToPage3()">选项3</a></li> </ul> </body> </html> ``` 在这个示例中，我们创建了一个包含三个选项的菜单页面。每个选项都绑定了一个单击事件处理程序，当用户单击某个选项时，会调用相应的函数（goToPage1、goToPage2、goToPage3）。这些函数使用 window.location.href 将用户重定向到不同的页面（page1.html、page2.html、page3.html）。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值