一、实验内容
- 利用框架实现下面页面,页面效果如下图(文件命名遵照图示):
二、实验代码及成品
frame_sets.html
<!doctype html>
<html>
<frameset rows="12%,*">
<frame src="top.html" noresize="noresize" name="topFrame"><!--noresize属性表示无法调整大小的框架。name属性为框架名称,必须书写。-->
<frameset cols="20%,*">
<frame src="left.html" noresize="noresize" name="leftFrame">
<frame src="right1.html" noresize="noresize" name="rightFrame">
</frameset>
</frameset>
</html>
top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>topFrame</title>
</head>
<body>
<h1 align="center" style="font-family: 宋体">HTML开发商业网站</h1>
</body>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a{
color: darkviolet;
}
</style>
</head>
<body>
<h1 style="font-family: 宋体">第2章 HTML语言</h1>
<a href="right1.html" target="rightFrame"><h2 style="font-family: 宋体">2.1HTML基础知识</h2></a>
<a href="right2.html" target="rightFrame"><h2 style="font-family: 宋体">2.2HTML语言入门</h2></a>
</body>
</html>
right1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color: red;font-family: 宋体" >  HTML语言是网页制作的基础,是初学者必学的内容。</h1>
</body>
</html>
right2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color: blue;font-family: 宋体" >  HTML语言是网页制作的基础,是初学者必学的内容。</h1>
</body>
</html>