废话少说,先上效果图
这是使用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%),后面在使用嵌套语句