HTML导航框架

最新推荐文章于 2021-08-31 17:17:07 发布

原创最新推荐文章于 2021-08-31 17:17:07 发布 · 1.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html

博客介绍了HTML文件的创建与汇总显示操作。先新建3个.html文件作为目标框架，再新建all.html汇总这3个文件，最后新建NavFrame.html用于显示两个模块，首次打开默认显示1.html内容，点击链接右侧显示会响应切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、新建3个.html文件用作目标框架

（1）新建1.html

<html>
<body style="background-color:red">
    <p>Frame-1</p>
</body>
</html>

（2）新建2.html

<html>
<body style="background-color:green">
    <p>Frame-2</p>
</body>
</html>

（3）新建3.html

<html>
<body style="background-color:blue">
    <p>Frame-3</p>
</body>
</html

二、新建all.html，汇总以上3个.html文件

<html>
<a href="1.html" name="content">Frame-1</a><br/>
<a href="2.html" name="content">Frame-2</a><br/>
<a href="3.html" name="content">Frame-3</a><br/>
</html>

备注：在此处，3个name属性值均为content，在NavFrame.html文件中将会被引用，可以自行尝试修改看原因

备注：all.html文件中此时为三个链接，点击任意任意链接将重新打开对应的窗口

三、新建NavFrame.html文件，该文件用于显示两个模块

<html>
<frameset cols="50%,*">
    <frame  name="all" src="all.html">
    <frame  name="content" src="1.html">
</frameset>
</html>

备注：首次打开将默认显示1.html文件中的内容，注意cols取值

结果图，点击左侧任意链接右侧显示会响应切换。