前端专题 iframe搭建一个常见的后台管理系统框架

iframe的作用

iframe可以将多张 HTML 网页放到一个页面内,组成一个复合的 HTML页面,从实际效果来看相当于实现了一个有横幅标题,有左侧菜单栏,有右边大面积的空白处显示具体内容网页。

当然这些并不是固定的,具体复合多少个网页,怎样显示可以有你自己来决定。
一般来说大概会做成这样的样子。
其实和一般的开发工具的布局差不多,一般的后台管理系统也会做成这个样子。
前端专题 iframe搭建一个常见的后台管理系统框架_第1张图片
来看看代码,同样写在Hbuilder中,方便调试大小

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
	head>
	<body>
		<iframe src="top.html" width="100%" height="100px">iframe>
		<iframe src = "frame list.html" width="20%" height="500px">iframe>
		
		
		<iframe src="右侧框.html" name="right" width="78%" height="500px">iframe>
		
	body>
html>

可以在top.html(当然也可以自己命名)设计你自己的标题页HTML,在list.html中设计左侧的菜单栏。
右侧当然是你想要展示的主要内容啦,难度不大,相当于写了四张页面,将三张的资源整合到一张中。

如果想去掉边边框加入

<iframe src="demo_iframe.htm" frameborder="0">iframe>

跳转到指定页面

<iframe src="demo_iframe.html" name="iframeTest">iframe>
<p><a href="http://www.baidu.com" target="iframeTest">baidua>p>

上面的代码就写在第四张HTMl中

你可能感兴趣的:(#,H5,CSS,JS基础,html,html5)