html里frame导航框架实现方法

流过昼夜 提交于 2019-12-18 05:27:11

我以最简单的实例讲解。这个例子模仿w3cschool关于html导航框架的例子。

首先,电脑桌面的一个文件夹里建5个网页,分别取名a.html,b.html,c.html,contents.html,showFrame.html。

其次,分别在这5个网页里面写入代码,在a.html,b.html,c.html 3个网页里分别设置一种背景颜色就行了,(只要可以区分是不同的页面就行了)

在showFrame.html里写入

<html>

<frameset cols="30%,70%">
<frame src="contents.html" />
<frame src="a.html" name="showframe"/>         //默认是现实a.html页面

</html>

 

在contents.html里写入

<html>

<p>  <a href="a.html" target="showframe">A</a>     </p>
<p>  <a href="b.html" target="showframe">B</a>     </p>
<p>  <a href="c.html" target="showframe">C</a>     </p>

</html>

大功告成了,用浏览器打开showFrame.html,会有如下这个红色的页面,

点击B的时候会有这个页面,

点击C的时候会有这个页面,

预期的效果实现了,左边的A,B,C就是导航菜单,后边的就是变化的网页内容。

红色部分是关键内容,请细心琢磨。我觉得这是指定哪个网页在哪个窗口打开,这也是frame框架的关键所在。

<frame src="a.html" name="show"/> , 这句里的name="showframe",是指定这个frame的名称为showframe,

<a href="a.html" target="show">A</a>,这句起到的作用是指定a.html这个网页在名称为showframe的flame里打开。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!