设计并制作网页技术介绍页面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中...
efTwo（F2） - 高级在页面上查找「efTwo (F2) - Advanced Find on Page」-crx插件
03-20
Bing，Yahoo，可能会更多受支持）添加了悬停删除功能，可轻松删除单词固定设置页面d esign支持快捷滚动（再次按热键可滚动到下一个关键字）错误修正1.1.0跳转并突出显示页面上的特定单词（单击该单词，然后使用“下...
设计并制作网页技术介绍页面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网页设计:如何设...
整个页面的屏幕截图「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 1393
【编者按】ChatGPT提供了多种方法。编者常用VS Code，所以想使用VS Code解决问题，但ChatGPT提供了一些错误的方法，失败了。最后发现编写python程序最简单。
[计网初识2]web的3个核心标准html，url，http
qq_43235540的博客
07-15 697
web的3个核心标准-->HTML,URL,HTTP的构成，
前端开发体系+html文件详解
m0_63432840的博客
07-14 565
target：指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top（跳出顶级窗口)controls="true"手动控制音频播放，也可换为autoplay（进入网页自动播放）或loop（循环播放）width="500px" height="300px"可改变视频窗口大小但不会改变原视频外框的形状。此时的a标签为为锚点，如果要跳到另一个同目录页面的一个指定位置，在href后加其他页面路径。优先级：行内样式>内部样式=外部样式。
html（抽奖设计）
2301_81704123的博客
07-13 507
可以根据自己的喜好设计抽奖内容，或者修改颜色。
dhtmlx-gantt甘特图数据展示
dy1717的博客
07-15 391
甘特图数据展示
VUE前端HTML静默打印（不弹出打印对话框）PDF简单方案
qq_34168515的博客
07-15 466
在做打印功能的时候，以前大部分客户端都是用C#做的，静默打印（也就是不弹出打印对话框）比较简单。但是使用浏览器作为客户端，静默打印（也就是不弹出打印对话框）做起来就比较困难。困难的原因是浏览器的各种限制，浏览器并不支持这方面的更改在现有使用vue开发的项目中，有个比较简单的处理方式就是使用 electron-hiprint也就是本来是浏览器去调用打印控件，现在直接在对应电脑上安装一个程序，然后浏览器去调用该程序。
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、付费专栏及课程。

余额充值