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

usrname为username

已于 2022-08-06 05:14:58 修改

阅读量2.3k

点赞数 1

分类专栏：前端文章标签： java servlet 前端

于 2022-08-02 15:59:49 首次发布

本文链接：https://blog.csdn.net/weixin_54327001/article/details/126123123

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

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

注意事项：因为子页面在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>

usrname为username

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
网页超链接：主页与子页的具体链接

写在最前书写tips.ysa是的快捷书写方式.ysa+.ysb是简单思路是主页面的超链接是两个子页面，子页面的超链接是首页，以达成互相链接的效果注意事项因为子页面在other文件下，所以有文件夹的跳入跳出，如果忽略此步，会造成无法访问。跳入文件夹用“文件夹名/”，跳出文件夹用“../”最终文件有三个，other文件下是page1.html，page2.html，以及other文件夹外的page.html文件最终效果。......
复制链接

扫一扫

专栏目录