html页面间的跳转及导航栏制作 |
您所在的位置:网站首页 › 导航栏html怎么做 › html页面间的跳转及导航栏制作 |
html页面间的跳转及导航栏制作
html页面间的跳转及导航栏制作技术:通过链接进行页面跳转,通过按钮进行页面跳转 页面跳转演示: 通过链接进行页面跳转 html超链接另一个html页面的方法:在一个html文档中使用“”标签定义一个可以跳转到另一个HTML页面的超链接即可,具体语法格式“另一个html页面”。 元素最重要的属性是 href 属性,它指定链接的目标。基本语法: 文本 下面给出示例: 包含三个文件,目录结构如下 主页面名称为Main_Page.html,Main_Page.html代码如下: 主页面 跳转到Page_1页面 跳转到Page_2页面这个主页链接到另外二个页面文件,是 Page_1.html和Page_2.html,保存在文件夹page中。 Page_1.html代码如下: Page_1页面这是Page_1页面。 跳转回主页面Page_2.html代码如下: Page_2页面这是Page_2页面。 跳转回主页面 通过按钮进行页面跳转通过点击按钮跳转页面,有几种实现方法: 法1、在button标签外嵌套一个a标签,利用超链接进行跳转,基本语法: 文本 下面给出完整示例: 包含三个文件,目录结构如下 主页面名称为Main_PageA.html,Main_PageA.html代码如下: 主页面页面跳转测试 跳转到Page_1A页面 跳转到Page_2A页面这个主页链接到另外二个页面文件,是 Page_1A.html和Page_2A.html,保存在文件夹pageA中。 Page_1A.html代码如下: Page_1A页面这是Page_1A页面。 跳转回主页面Page_2A.html代码如下: Page_2A页面这是Page_2A页面。 跳转回主页面法2、在button标签中添加“οnclick="window.location.href='页面url'"”代码,基本语法: 文本 下面给出完整示例: 包含三个文件,目录结构如下 主页面名称为Main_PageB.html,Main_PageB.html代码如下: 主页面页面跳转测试B 跳转到Page_1A页面 跳转到Page_2A页面这个主页链接到另外二个页面文件,是 Page_1B.html和Page_2B.html,保存在文件夹pageB中。 Page_1B.html代码如下: Page_1B页面这是Page_1B页面。 跳转回主页面Page_2B.html代码如下: Page_2B页面这是Page_2B页面。 跳转回主页面法3、在 input标签中添加onclick事件代码“οnclick="window.location.href='页面url'"”,基本语法: 例子和上面的法2差不多,就不具体写出了,可作为读者练习。 制作导航栏通过的格式来实现导航栏 例如 导航栏测试导航栏 跳转到Page_1页面 跳转到Page_2页面还可以使用标签嵌入网页的CSS式样,美化之 例、使用CSS制作一个简单美观的导航栏 导航栏测试 ul { list-style-type: none; margin: 1px; padding: 0px; width: 200px; background-color: #f7f4f1; text-align:center; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } li a.active { background-color: #6477; color: white; } li a:hover:not(.active) { background-color: #505; color: white; }美化过的导航栏 跳转到Page_1页面 跳转到Page_2页面 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |