最近在开发一个项目,frameset居然被淘汰,纳尼?这也算,好吧,我太落后了,一直都在使用frameset布局,在网上找了点资料来看,网上没有一个完整的demo,故写一个,给需要的人。
文件结构分为四个,top.html,left.html,content.html,index.html。
(1)top.html就是放logo,用户信息,显示时间等信息的地方啦。
(2)left.html是放导航的地方。
(3)content.html则是内容显示的地方,点击导航的某一项,在content.html页面上显示。
(4)index.html是前三个页面组合的地方,配置各个页面所占比例。
好了,让我们来看看下面的代码吧。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<style>
#iframeTop{
width: 100%;
height: 70px;
}
#iframeLeft{
width: 15%;
height: 700px;
float: left;
}
#iframeContent{
width: 84%;
height: 700px;
}
</style>
<body>
<div>
<iframe id="iframeTop" name="iframeTop" frameborder="0" src="view/top.html"></iframe>
<iframe id="iframeLeft" name="iframeLeft" frameborder="0" src="view/left.html"></iframe>
<iframe id="iframeContent" name="iframeContent" frameborder="0" src="view/content.html"></iframe>
</div>
</body>
</html>
在left.html中怎么写链接可以显示到content.html页面呢,道理很简单,在left.html中的导航中使用target,target="iframeContent",就是这个代码,通过iframe的id,链接可跳转至框架中的content.html中,这样就得到了一个框架布局。代码为:<a href="login.html" target="iframeContent">。