演示.gif
想實(shí)現(xiàn)上圖所示功能：上面包含幾個(gè)選項(xiàng)，左邊是導(dǎo)航欄。首先想到的是frameset，但是鑒于html5中已經(jīng)刪掉了這個(gè)元素，所以就考慮用iframe來實(shí)現(xiàn)。
- 首先大致畫個(gè)預(yù)期效果圖
無標(biāo)題.png
一共包括五個(gè)文件，位于同一目錄下：
1.iframe.html
2.iframe.css
3.left1.html
4.left2.html
5.index.html
分別用三個(gè)span來作為容器，其中右下的span內(nèi)嵌套iframe用來顯示內(nèi)容。
代碼：
<!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">第一項(xiàng)</a></li>
<li><a href="index.html" target="right">第二項(xiàng)</a></li>
<li><a href="index.html" target="right">第三項(xiàng)</a></li>
<li><a href="index.html" target="right">第四項(xiàng)</a></li>
<li><a href="index.html" target="right">第五項(xiàng)</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 點(diǎn)擊左側(cè)“左一”時(shí)需要在下右部顯示的內(nèi)容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
這里對(duì)應(yīng)左一
</body>
</html>
4.left.html2 點(diǎn)擊左側(cè)“左二”時(shí)需要在下右部顯示的內(nèi)容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
這里對(duì)應(yīng)左二
</body>
</html>
5.index.html 下右部默認(rèn)顯示的內(nèi)容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
這是默認(rèn)界面及點(diǎn)擊上部五個(gè)選項(xiàng)顯示的內(nèi)容，如需更改，需更改iframe中top內(nèi)的超鏈接。
</body>
</html>
另外附上frameset的實(shí)現(xiàn)方法##
<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>