1、frame框架
通常我们在静态网页进行布局的时候,可以采用frame。一般网页布局都是水平和竖直以及两者交叉,这里介绍前两者布局。
竖直布局;'
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
水平布局:
<html>
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
使用框架的坏处:
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面
-
框架结构标签(<frameset>)
-
- 框架结构标签(<frameset>)定义如何将窗口分割为框架
- 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
第一个html页面:all.html
<frameset cols="50%,*" bgcolor="yellow" noresize>
<frame src="left.html">
<frame name="frame2" src="right.html">
</frameset>
需要注意的是:
1.这个可以在后台进行框架设计,这里不能出现body或者body集,否则会出现异常。
2.target有四个属性:_blank,_self,_top,_parent.分别表示内容新开一个窗口,替换本窗口,浏览本窗口,父窗口。
第二个html页面:left.html
<html>
<title>歌词展示</title>
<body bgcolor="pink">
<a href="歌词显示 - 齐秦.html" target="frame2">齐秦</a></br>
<a href="歌词显示 - 周杰伦.html" target="frame2">周杰伦</a></br>
</body>
</html>
第三个html页面:right.html(这个页面可以自己根据需要进行完善)
<html>
<title>歌词</title>
</html>
第四个和第五个html页面分别是:歌词显示 - 齐秦.html、"歌词显示 - 周杰伦.html(这两个页面内容自己写)