1.代码
/*
*Copyright (c)
*All rights reserved.
*文件名称: class6 页面布局.html
*作者: 郭栋
*完成日期:2018年 8月12日
*版本号:v1.0
*问题描述:frameset框架布局,前面练习操作,后面列表为下一文件提供跳转操作
*输入描述:
*程序输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class6</title>
</head>
<!--文档流 从上到下从左到右-->
<!--frameset布局-->
<!--table布局-->
<!--div布局-->
<!--<frameset rows="200px,*" frameborder="yes" border="1px" bordercolor="red" >-->
<!--<frame src="http://www.baidu.com" noresize="noresize">-->
<!--<frameset cols="30%,*">-->
<!--<frame name="leftwindow" src="http://www.360.com" scrolling="no">-->
<!--<frame src="http://www.taobao.com">-->
<!--</frameset>-->
<!--</frameset>-->
<!--<noframes>-->
<!--<body>-->
<!--你的浏览器不支持框架集!-->
<!--</body>-->
<!--</noframes>-->
<!--<body>-->
<!--<a href="http://www.baidu.com" target="frame_name">点击</a>-->
<!--<iframe name="frame_name" src="http://www.jd.com" height="500" width="50%">-->
<!--你的浏览器不支持 iframe框架标签-->
<!--</iframe>-->
<!--</body>-->
<body>
<ul style="list-style: none;" >
<h2 ><small>导航</small></h2>
<li><a href="http://www.baidu.com" target="view_frame">百度 </a></li>
<li><a href="http://www.360.com" target="view_frame"> 360</a></li>
<li><a href="http://www.jd.com" target="view_frame"> 京东</a></li>
<li><a href="http://www.taobao.com" target="view_frame">淘宝 </a></li>
</ul>
</body>
</html>
/*
*Copyright (c)
*All rights reserved.
*文件名称: frameset布局.html
*作者: 郭栋
*完成日期:2018年 8月12日
*版本号:v1.0
*问题描述:frameset布局,实现页面布局及列表点击跳转
*输入描述:
*程序输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<frameset rows="40%,*" bordercolor="red">
<frame src="http://www.youdao.com">
<frameset cols="10%,*" bordercolor="red">
<frame src="class6%20页面布局.html" noresize="noresize">
<frame name="view_frame" >
</frameset>
</frameset>
</html>
2实验结果
3.心得
刚了解的三种布局方式,frameset、table,div布局,在frameset学习中感觉也挺简单的,现阶段感觉要加强对各种属性的印象。在完成最后小练习过程中存在一些问题,在版本 68.0.3440.106(正式版本) (64 位)Chrome浏览器中,<a>标签的taget的framename效果无用,表现为在新的网页中打开链接,而在61.0.2 (32 位)Firefox浏览器中不存在这种问题。望各位指教。