Frame 框架在HTML中小试牛刀

2019年5月13日 200次阅读

一次偶然的机会，朋友找我让我给她实现一个类似于CSDN 开发者社区论坛的显示效果。嘻嘻，原因是她知道我在学 Android 之前是学 H5 开发的。故事讲到这里，开始切入正题。

《Frame 框架在HTML中小试牛刀》 导航-内容显示效果

一、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>

感谢您能看完这篇文章，希望对您有所帮助！🍀

点赞