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

最新推荐文章于 2024-04-12 10:56:49 发布

极光雨雨

最新推荐文章于 2024-04-12 10:56:49 发布

阅读量1.7k

点赞数 2

分类专栏： # H5 CSS JS基础文章标签： html html5

本文链接：https://blog.csdn.net/weixin_44131922/article/details/107870503

版权

H5 CSS JS基础专栏收录该内容

24 篇文章 0 订阅

订阅专栏

iframe的作用

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

当然这些并不是固定的，具体复合多少个网页，怎样显示可以有你自己来决定。
一般来说大概会做成这样的样子。
其实和一般的开发工具的布局差不多，一般的后台管理系统也会做成这个样子。
在这里插入图片描述
来看看代码，同样写在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>
		<!--连接到列表超链接网页-->
		<!--可以设置一个空框架 设置好名字  将超链接的target连到这个框架中-->
		<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">baidu</a></p>

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

极光雨雨

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
前端专题 iframe搭建一个常见的后台管理系统框架

iframe的作用iframe可以将多张 HTML 网页放到一个页面内，组成一个复合的 HTML页面，从实际效果来看相当于实现了一个有横幅标题，有左侧菜单栏，有右边大面积的空白处显示具体内容网页。当然这些并不是固定的，具体复合多少个网页，怎样显示可以有你自己来决定。一般来说大概会做成这样的样子。其实和一般的开发工具的布局差不多，一般的后台管理系统也会做成这个样子。来看看代码，同样写在Hbuilder中，方便调试大小<!DOCTYPE html><html> <
复制链接

扫一扫