演示.gif
想实现上图所示功能：上面包含几个选项，左边是导航栏。首先想到的是frameset，但是鉴于html5中已经删掉了这个元素，所以就考虑用iframe来实现。
- 首先大致画个预期效果图
无标题.png
一共包括五个文件，位于同一目录下：
1.iframe.html
2.iframe.css
3.left1.html
4.left2.html
5.index.html
分别用三个span来作为容器，其中右下的span内嵌套iframe用来显示内容。
代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="iframe.css">
</head>
<body>
<span class="top">
<!--上部-->
</span>
<span class="left">
<!--下左-->
</span>
<span class="right">
<!--下右-->
<iframe src="index.html" height="400px" width="580px" name="right"></iframe>
</span>
</body>
</html>
- 具体例子
1.iframe.html框架界面
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="iframe.css">
</head>
<body>
<span class="top">
<ul>
<li><a href="index.html" target="right">第一项</a></li>
<li><a href="index.html" target="right">第二项</a></li>
<li><a href="index.html" target="right">第三项</a></li>
<li><a href="index.html" target="right">第四项</a></li>
<li><a href="index.html" target="right">第五项</a></li>
</ul>
</span>
<span class="left">
<ul>
<li><a href="left1.html" target="right">左一</a></li>
<li><a href="left2.html" target="right">左二</a></li>
</ul>
</span>
<span class="right">
<iframe src="a.html" height="400px" width="580px" name="right"></iframe>
</span>
</body>
</html>
2.iframe.css样式文件
body {
height: 800px;
width: 600px;
margin: 0;
padding: 0;
}
span{
margin-left: 100px;
}
.top {
background: gray;
width:800px;
height: 50px;
position: absolute;
left: 0;
top: 0;
}
.top li{
float:left;
list-style-type: none;
margin-left:80px;
}
.top a:link{
text-decoration: none;
color:white;
}
.top a:hover{
background: black;
text-decoration:underline;
}
.left {
background: pink;
position: absolute;
left: 0px;
top: 60px;
height:400px;
width:200px;
}
.right {
background: pink;
height:400px;
width:580px;
position: absolute;
left: 220px;
top: 60px;
}
3.left.html1 点击左侧“左一”时需要在下右部显示的内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
这里对应左一
</body>
</html>
4.left.html2 点击左侧“左二”时需要在下右部显示的内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
这里对应左二
</body>
</html>
5.index.html 下右部默认显示的内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
这是默认界面及点击上部五个选项显示的内容，如需更改，需更改iframe中top内的超链接。
</body>
</html>
另外附上frameset的实现方法##
<html>
<head><meta http-equiv="content-type" content="text/html;charset=gb2312"/>
</head>
<frameset rows="47%,*">
<frame name="head" src="head.html" noresize/>
<frameset cols="20%,80%" name="foot">
<frame name="left" src="left.html" noresize/>
<frame name="right" src="index.html">
</frameset>
</frameset>
</html>
网友评论