基于frameset（HTML5）框架实验室E210网站制作

最新推荐文章于 2023-07-23 11:47:43 发布

原创

最新推荐文章于 2023-07-23 11:47:43 发布 · 350 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML5 frameset

本文展示了如何使用HTML5的frameset框架创建一个包含顶部、左侧和右侧三个模块的简单网站。适合初学者，通过实例介绍了frameset的使用方法，包括rows属性的设置以及内容模块的划分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

废话少说，先上效果图在这里插入图片描述
这是使用HTML5中frameset框架完成的效果图，才学了一天今天直接上手做的所以比较简陋，适合初学者，大神勿喷。

frameset是HTML5的一个分块框架适合这种分块网站的页面制作，例如我们学校的教务处网站等等（使用的哪个框架不清楚，我没看底层代码），上面的效果图一共分为了3个模块，我们暂且称为top,left,right三个模块吧，top此处只有一张图片，left模块有实验室简、导师信息、研究方向、实验室成员几个标题模块，而right是用来显示左边标题模块的具体内容的。

首先第一步总的HTML标签的书写（主要是给页面分块）

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8">
		<title></title>
	</head>
	<frameset rows="30%,*">
		<frame src="top.html" scrolling="no" name="topFrame"/>
			<frameset cols="30%,*">
				<frame name="leftFrame" src="left.html" noresize="noresize">
				<frame name="rightFrame" src="pagel.html"/>
			</frameset>
	</frameset>
	
</html>

在使用frameset时不可模块公用.
frameset rows="30%," 这行代码的意思是行的划分，此处分两块，上半部分占30%，星号表示余下的所占比例（即70%），后面在使用嵌套语句