Frame 框架在HTML中小试牛刀
2017-08-22 本文已影响59人
MLGirl
一次偶然的机会，朋友找我让我给她实现一个类似于CSDN 开发者社区论坛的显示效果。嘻嘻，原因是她知道我在学 Android 之前是学 H5 开发的。故事讲到这里，开始切入正题。
导航-内容显示效果
一、Frame实例中至少要包含三个页面：
- 承载左右两个框架的 Main.html；
- 呈现链接的左框架 LeftFrame.html；
- 呈现左框架链接中的主要内容 index.html；
二、三个页面的代码编写
1.Main.html 中的代码
<!DOCTYPE html>
<html>
<head>
<title>我的主页</title>
</head>
<frameset cols="20%,*" > <!--左右框架的比例，自定义 -->
<frame src="LeftFrame.html" />
<frame src="Index.html" name="showContent" />
<!--name属性必须填写，它与LeftFrame.html 中每个链接<a>属性的action 相对应的，否则链接的页面无法显示 -->
</frameset>
</html>
科普一下：frameset（框架的生成的标记）是和html的<body>标签同等级的，所以不能将<frameset></frameset>写在<body></body>标签内部，否则会出错或无法显示；
2. LeftFrame.html 中的代码
<!DOCTYPE html>
<html>
<head>
<title>LeftFrame</title>
</head>
<body>
<a href="index.html" target="showContent" >链接一</a>
<a href="index2.html" target="showContent" >链接二</a>
<a href="index3.html" target="showContent" >链接三</a>
</body>
</html>
3. index.html 中的代码
<!DOCTYPE html>
<html>
<head>
<title>contex 内容</title>
</head>
<body>
<h1>hello world!</h1>
</body>
</html>
感谢您能看完这篇文章，希望对您有所帮助！🍀
