HTML 框架导航

  初次学习HTML,在www.w3school.com.cn看到了框架导航,上面的例子没有看懂所以搜了一下相应的问题,最后弄懂了怎么实现同一界面下的框架导航。

  首先是www.w3school.com.cn上的代码:

   

<html>

<frameset cols="120,*">

<frame src="/example/html/html_contents.html">
<frame src="/example/html/frame_a.html" name="showframe">

</frameset>

</html>

 实现的功能是下图的样子:

      

其中W3school中省略了很多代码,我在

1.http://blog.sina.com.cn/s/blog_6f6d07f80100oqlt.html

2.http://blog.163.com/yw0602@126/blog/static/165385907201181852256852/ 

两位总结的很齐全,我主要说说我的理解。

首先谈谈代码里面有的:

  <frameset cols = "120,*"> 其中*指代的我的理解应该是整个界面除了120的单位之后剩下的部分。

在1中,博主告诉了我:

    当点击导航条上的项目时,相应网页会在显示区域变换显示。首先准备一个主界面文件main.htm,将其划分成两块区域index和content. 在结合W3school上的代码就应该可以看懂content和index意思。

  例1:

<html>
<frameset cols="120,*">
<frame name="index" src="index.htm" />
<frame name="content" src="frame_a.htm" />
</frameset>
</html>

name即文件的名字:index、content

 其中index区域 主要是链接项目;content区域 负责显示相应的链接文件;那么出现了一个问题需要有框架导航,我们既要把index.htm中的链接输出到content区域显示。  

      此时需要用到链接中的target属性:

    例2:

<html>
<head>
</head>
<body>
 <a href="frame_a.htm" target="content">frame_a</a>
 <a href="frame_b.htm" target="content">frame_b</a>
 <a href="frame_c.htm" target="content">frame_c</a>
</body>
</html>

另外界面的颜色是在frame_a、frame_b、frame_c中添加背景颜色实现的。

最后我总结一下:

  上述代码中例1相当于整个被分成两块儿(120、*)的大框架 在里面index代表左边的框架;content代表右边的框架;

在例2中在index中写入frame_a/b/c,并且吧三个文件设置背景颜色,最后链接到content代表的框架中显示出来frame_a/b/c的内容。(此处可以参考前面第二个链接的知识结合看,就可以看懂了)

  最后我希望大家一起学习,有爱好的可以加个好友QQ:919334628;

                        邮件:shanpei2017@outlook.com

posted @ 2017-06-09 10:56  淡紫色的背光墙  阅读(625)  评论(1编辑  收藏  举报