在看w3school里面HTML课程的时候,看到框架,有一个导航框架的实例。实现了功能,但是没有给出源码。我查了一下frame的具体操作方法,写出了所有代码。
我写的导航框架包括五个文件
其中,每个文件的代码依次为。
框架_导航框架.html
<html>
<frameset cols = "120,*">
<frame src = "框架_导航框架_目录链接.html"/>
<frame src = "框架_导航框架_显示a.html" name="showfram"/>
</html>
在这部分代码中,使用cols属性将页面分为两部分,一部分包括120像素,另一部分为剩余部分。同时指定两部分分别的HTML代码。第二个frame中name属性,相当于给该frame起了一个名字,方面后面对该部分进行操作。
框架_导航框架_目录链接.html
<html>
<p> <a href = "框架_导航框架_显示a.html" target="showfram">Frame a </a> </p>
<p> <a href = "框架_导航框架_显示b.html" target="showfram">Frame b </a> </p>
<p> <a href = "框架_导航框架_显示c.html" target="showfram">Frame c </a> </p>
</html>
在框架_导航框架.html中,相当于用frameset将整个页面分成了两部分,此部分代码相当于对左边部分进行操作。增加三个超链接。target属性,用于指定对应的html文件在名称name为showfram的frame中打开。
框架_导航框架_显示a.html
<html>
<body bgcolor = "yellow">
<p>Frame B </p>
</body>
</html>
框架_导航框架_显示b.html
<html>
<body bgcolor = "blue">
<p>Frame B </p>
</body>
</html>
框架_导航框架_显示c.html
<html>
<body bgcolor = "purple">
<p>Frame a </p>
</body>
</html>
这三部分代码仅书写三个不同的结果界面。
最终实现效果图如下。
初始界面以及点击Frame a界面:
点击Frame b界面:
点击Frame c界面: