1.主页面index.html
<html>
<!-- frameset导航框架 -->
<!-- 外层上下结构,以行rows为分界,上10%,下90% -->
<frameset rows="10%,90%">
<frame src="top.html">
<!-- 内层左右结构,以列cols为分界,左边120px,右边* -->
<frameset cols="120,*">
<!-- 左侧为contents.html导航条框架 -->
<frame src="contents.html">
<!-- 右侧为内容显示框架,可以把默认要显示的页面写到src属性中,这样一打开就显示该页面 -->
<frame src="2.html" name="showframe">
</frameset>
</frameset>
</html>
2.top页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>top</title>
</head>
<body>
top
</body>
</html>
3.left frame
<html>
<body>
<!-- 该页为导航条,只要设置超链接即可 -->
<a href="2.html" target="showframe">2</a><br/>
<a href="http://www.baidu.com" target="showframe">3</a><br/>
<a href="4.html" target="showframe">4</a>
</body>
</html>
4.内容页
2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
英雄联盟
</body>
</html>
3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <a href="http://www.baidu.com">百度</a> -->
</body>
</html>
4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
网页开发
</body>
</html>