网页超链接：主页与子页的具体链接

学习链接：网页超链接，包括从子页到首页的进入返回

简单思路是：主页面的超链接是两个子页面，子页面的超链接是首页，以达成互相链接的效果

注意事项：因为子页面在other文件下，所以有文件夹的跳入跳出，如果忽略此步，会造成无法访问。跳入文件夹用“文件夹名/”，跳出文件夹用“../”

最终文件有三个，other文件下是page1.html，page2.html，以及other文件夹外的page.html文件

最终效果：

主页面源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main{width: 200px;height: 200px;background-color: orange;margin: auto;}.ysa{width: 200px;height: 140px;font-size: 20pt;text-align: center;line-height: 140px;}.ysb{width: 200px;height: 60px;line-height: 30px;text-align: center;}a{/* 超链接标签 */text-decoration: none;/* 去掉超链接文本的下划线 */color:blue;}a:hover{/* 鼠标悬停时超链接字体变色 */color: red;}</style>
</head>
<body><div class="main"><div class="ysa">首页</div><div class="ysb"><!-- 将子页面的网页放到other文件夹里，若直接href是page1无法访问 --><!-- 跳入文件夹用“文件夹名/”，跳出文件夹用“../” --><a href="other/page1.html">点我跳到子页面1</a><br><a href="other/page2.html">点我跳到子页面2</a></div></div>
</body>
</html>

子页面1源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main{width: 200px;height: 200px;background-color: orange;margin: auto;}.ysa{width: 200px;height: 140px;font-size: 20pt;text-align: center;line-height: 140px;}.ysb{width: 200px;height: 60px;line-height: 30px;text-align: center;}a{/* 超链接标签 */text-decoration: none;/* 去掉超链接文本的下划线 */color:blue;}a:hover{/* 鼠标悬停时超链接字体变色 */color: red;}</style>
</head>
<body><div class="main"><div class="ysa">子页1</div><div class="ysb"><!-- ..意思是跳出当前文件夹，否则无法实现从子页回到首页效果 --><a href="../page.html">点我回到首页</a><br></div></div>
</body>
</html>

子页2的源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.main{width: 200px;height: 200px;background-color: orange;margin: auto;}.ysa{width: 200px;height: 140px;font-size: 20pt;text-align: center;line-height: 140px;}.ysb{width: 200px;height: 60px;line-height: 30px;text-align: center;}a{/* 超链接标签 */text-decoration: none;/* 去掉超链接文本的下划线 */color:blue;}a:hover{/* 鼠标悬停时超链接字体变色 */color: red;}</style>
</head>
<body><div class="main"><div class="ysa">子页2</div><div class="ysb"><a href="../page.html">点我回到首页</a><br></div></div>
</body>
</html>

网页超链接：主页与子页的具体链接相关推荐

采用requests请求+xpath与正则表达式解析+Mysql与json存取:爬取高考网主页与子页的学校基本信息和往年录取分数线
爬取高考网主页与子页的学校基本信息和往年录取分数线高考网创建Mysql数据库和存储实现先了解下高考网的一些爬取阻碍完整代码高考网链接: http://college.gaokao.com/ ...
HTML5期末大作业：电影网页设计——在线影院6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:电影网页设计--在线影院6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript(毕业设计) 常见网页设计作业题材有个 ...
[032] 微信公众帐号开发教程第8篇-文本消息中使用网页超链接（转）
本文主要介绍网页超链接的作用以及怎样在文本消息中使用网页超链接. 网页超链接的作用我想但凡是熟悉HTML的朋友,对超链接一定不会陌生.而今天我们要讨论和使用的仅仅是超链接中的当中一种---网页超链接 ...
微信公众帐号开发教程第8篇-文本消息中使用网页超链接
本文主要介绍网页超链接的作用以及如何在文本消息中使用网页超链接. 网页超链接的作用我想但凡是熟悉HTML的朋友,对超链接一定不会陌生.而今天我们要讨论和使用的只是超链接中的其中一种---网页超链接, ...
自定义浏览器起始页、主页和标签页（html+css）
以Chrome为例,自定义一个浏览器的起始页 Chrome的标签页有两个个人不太喜欢的点.一个是无法自定义浏览器的访问按钮,一个是搜索框在顶上的标签栏.在手机上,夸克浏览器的起始界面用户体验非常好,就 ...
HTML5期末大作业：体育网页设计——篮球专题6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:体育网页设计--篮球专题6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript(毕业设计) 常见网页设计作业题材有个 ...
[032] 微信公众帐号开发教程第8篇-文本消息中使用网页超链接
本文主要介绍网页超链接的作用以及如何在文本消息中使用网页超链接. 网页超链接的作用我想但凡是熟悉HTML的朋友,对超链接一定不会陌生.而今天我们要讨论和使用的只是超链接中的其中一种---网页超链接, ...
HTML5期末大作业：电商购物网站设计——易购电商购物网页设计与实现(31页) 含论文+答辩+PPT 计算机毕设网页设计源码 HTML+CSS+JavaScript web课程设计网页规划与设计...
HTML5期末大作业:电商网站设计--易购电商购物网页设计与实现(31页) 含论文+PPT 学生DW网页设计作业成品 HTML+CSS+JavaScript web课程设计网页规划与设计计算机毕设网 ...
在html中怎么设置页面边距,在打印网页时怎么设置调整页边距
在打印网页时怎么设置调整页边距今天给大家介绍一下在打印网页时怎么设置调整页边距的具体操作步骤. 1. 首先打开电脑,找到想要打印的网页打开. 2. 点打开之后,在页面右上角点击三横图标. 3. 在弹 ...
HTML5期末大作业：餐饮美食网页设计——美食网(7页) HTML+CSS+JavaScript
HTML5期末大作业:餐饮美食网页设计--美食网(7页) HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品 1.临近期末, 你还在为H ...

网页超链接：主页与子页的具体链接

主页面源码如下：

子页面1源码如下：

子页2的源码如下：

网页超链接：主页与子页的具体链接相关推荐

最新文章

热门文章