html页面间的跳转及导航栏制作

html页面间的跳转及导航栏制作技术：通过链接进行页面跳转，通过按钮进行页面跳转

页面跳转演示：

通过链接进行页面跳转

html超链接另一个html页面的方法：在一个html文档中使用“<a>”标签定义一个可以跳转到另一个HTML页面的超链接即可，具体语法格式“<a href="html页面的具体URL">另一个html页面</a>”。

<a> 元素最重要的属性是 href 属性，它指定链接的目标。基本语法：

<a href="URL">文本</a>

下面给出示例：

包含三个文件，目录结构如下

主页面名称为Main_Page.html，Main_Page.html代码如下：

<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>主页面</title>
</head>
<body>
<a href="page/Page_1.html">跳转到Page_1页面</a>
<br>
<a href="page/Page_2.html">跳转到Page_2页面</a>
</body>
</html>

这个主页链接到另外二个页面文件，是 Page_1.html和Page_2.html，保存在文件夹page中。

Page_1.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page_1页面</title>
</head>
<body>
    <p>这是Page_1页面。</p>    
    <a href="../Main_Page.html">跳转回主页面</a>
</body>
</html>

Page_2.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page_2页面</title>
</head>
<body>
    <p>这是Page_2页面。</p>
    <a href="../Main_Page.html">跳转回主页面</a>
</body>
</html>

通过按钮进行页面跳转

通过点击按钮跳转页面，有几种实现方法：

法1、在button标签外嵌套一个a标签，利用超链接进行跳转，基本语法：

<a href="URL"> <button>文本</button> </a>

下面给出完整示例：

包含三个文件，目录结构如下

主页面名称为Main_PageA.html，Main_PageA.html代码如下：

<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>主页面</title>
</head>
<body>
<p>页面跳转测试</p>
<a href="pageA/Page_1A.html">
    <button>跳转到Page_1A页面</button>
</a>
<br>
<a href="pageA/Page_2A.html">
    <button>跳转到Page_2A页面</button>
</a>
</body>
</html>

 这个主页链接到另外二个页面文件，是 Page_1A.html和Page_2A.html，保存在文件夹pageA中。

Page_1A.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page_1A页面</title>
</head>
<body>
    <p>这是Page_1A页面。</p>    
    <a href="../Main_PageA.html"> <button>跳转回主页面</button> </a>
</body>
</html>

Page_2A.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page_2A页面</title>
</head>
<body>
    <p>这是Page_2A页面。</p>
    <a href="../Main_PageA.html"> <button>跳转回主页面</button> </a>
</body>
</html>

法2、在button标签中添加“οnclick="window.location.href='页面url'"”代码，基本语法：

<button οnclick="window.location.href = '页面url '">文本</button>

下面给出完整示例：

包含三个文件，目录结构如下

主页面名称为Main_PageB.html，Main_PageB.html代码如下：

<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>主页面</title>
</head>
<body>
<p>页面跳转测试B</p>
<button onclick="window.location.href = 'pageB/Page_1B.html'">跳转到Page_1A页面</button>
<br>
<button onclick="window.location.href = 'pageB/Page_2B.html'">跳转到Page_2A页面</button>
</body>
</html>

这个主页链接到另外二个页面文件，是 Page_1B.html和Page_2B.html，保存在文件夹pageB中。

Page_1B.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page_1B页面</title>
</head>
<body>
    <p>这是Page_1B页面。</p>    
    <button onclick="window.location.href = '../Main_PageB.html'">跳转回主页面</button>
</body>
</html>

Page_2B.html代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page_2B页面</title>
</head>
<body>
    <p>这是Page_2B页面。</p>
    <button onclick="window.location.href = '../Main_PageB.html'">跳转回主页面</button>
</body>
</html>

法3、在 input标签中添加onclick事件代码“οnclick="window.location.href='页面url'"”，基本语法：

<input type="button" value="文本" οnclick=" window.location.href='URL'">

例子和上面的法2差不多，就不具体写出了，可作为读者练习。

制作导航栏

通过<ul><li><a href=""></a></li></ul>的格式来实现导航栏

例如

<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>导航栏测试</title>
</head>
<body>
<p>导航栏</p>
<ul>
  <li><a href="page/Page_1.html"> 跳转到Page_1页面 </a></li>
  <li><a href="page/Page_2.html"> 跳转到Page_2页面 </a></li>
</ul>
</body>
</html>

还可以使用<style>标签嵌入网页的CSS式样，美化之

例、使用CSS制作一个简单美观的导航栏

<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8">
<title>导航栏测试</title>
</head>
<style>
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;
}
</style>
<body>
<p>美化过的导航栏</p>
<ul>
  <li><a href="page/Page_1.html"> 跳转到Page_1页面 </a></li>
  <li><a href="page/Page_2.html"> 跳转到Page_2页面 </a></li>
</ul>
</body>
</html>

# html
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区