初次学习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