前言:
对页面进行良好的布局,是做一个易用、美观的网页的基础。
frameset属于html标签,是对页面布局使用的重要标签。
开发流程:
一、构思页面原型
网页一般采用这种布局方式。
二、html编码实现
1.对页面进行基本布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息管理</title>
</head>
<frameset rows="15%,*">
<frame src="top.html" />
<frameset cols="30%,70%">
<frame src="left.html"/>
<frame name="zst"/>
</frameset>
<frame />
</frameset>
</html>
frameset标签下的参数:rows是横着分,也就是说分之后为上下两行。后面跟的百分数代表着两行所占的比例。
cols是竖着分,分之后变为左右两列,同理后面跟的百分数代表两列的比例。
2.编写菜单栏
2.1编写"left.html"的代码
href="addStu.html"指定添加学生信息代码的位置。target="zst"指定添加学生信息出现的位置是中间。中间处的位置在第一步已命名“zst”。
2.2编写添加学生信息的代码
实现代码很简单,就不贴了。
效果图:
2.3依次添加其他功能
步骤如上。
三、最终效果图:
选择添加学生信息之后:
四、总结
H5不支持frameset标签,可以用jQuery 的 load()方法代替。