基于frameset标签进行一个简单的页面布局

VaporGas

于 2024-08-28 17:41:35 发布

阅读量357

点赞数 8

文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_52937170/article/details/141644639

版权

前言：

在学习HTML的时候，我们可能遇到过用<frameset>进行页面布局，本文将介绍如何使用<frameset>进行一个简单的静态页面布局。

一、页面原型分析

将主页面分为三个部分：分别是顶栏top，和顶栏下方的左右边栏left、right

二、需求场景

需求1：在left栏中点击指定链接，right栏中跳转指定页面并展示

需求2：在top栏中点击退出链接，跳转到登录页面

注意：以下的html页面都在相同目录下（注意路径的层级关系）

三、功能实现

登录login页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录login页面</title>
	</head>
	<body>
		<!-- 设置外边距margin和边框border，让内容居中显示 -->
		<form>
		<div style="margin: 0px auto; width: 200px;">
			<!-- 用户名输入框 -->
			<input type="text" name="username" placeholder="请输入用户名" /><br />
			<!-- 密码输入框 -->
			<input type="password" name="password" placeholder="请输入密码"/> <br />
			<!-- 提交按钮 -->
			<input type="submit" value="登录"> <br />
		</div>
		</form>
	</body>
</html>

效果图：

top页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主页面main</title>
		<style>
				/* 使用通配符选择器，为所有标签添加背景色 */
			*{
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<!-- 二级标题 -->
		<h2>this is top</h2> 
		<!-- 创建超链接，跳转到登录页面 -->
		<a href="login.html" target="_parent">退出</a>
	</body>
</html>

left页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
			background-color: lightgray;
		}
	</style>
	<body>
		<!-- a标签中的target中的值和frame标签的name属性值 -->
		<!-- 目的是将链接跳转的页面，在frame标签所在位置显示 -->
		<p><a href="product.html" target="rightname">商品管理</a></p>
		<p><a href="case.html" target="rightname">分类管理</a></p>
		<p><a href="emp.html" target="rightname">员工管理</a></p>
	</body>
</html>

注意：准备名称为product.html，case.html和emp.html 文件和left在相同目录下，内容可以是任意（这里只是为了展示效果）

right页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				background-color: orange;
			}
		</style>
	</head>
	<body>
		this is right
	</body>
</html>

主页面main：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主页面</title>
	</head>
	<frameset rows="20%,*" border="10px">
			<frame src="top.html" name="topname">
			<frameset cols="20%,*">
				<frame src="left.html" name="leftname">
				<frame src="right.html" name="rightname">
			</frameset>
	</frameset>
</html>

分析：

第一个<frameset>标签，将main页面分为上下两个部分，上面部分占20%，下面部分占80%（由rows属性值决定）

第二个<frameset>标签，将下面的部分又分为左右两个部分，左边占20%，右边占80%（*是通配符，代表除了左边部分的剩下的所有）

每个<frame>展示一个页面的内容，name属性给布局框架中的位置起名字

效果图：

重点

1. <frameset>和<body>是平行的标签，<frameset>不要放在<body>里面,否则有可能显示不全,或显示空白

2.在 HTML 5 中不支持<frameset>，即没有相关的提示信息

3.使用<frameset>可能会带来session丢失等问题

4.现在使用 <div> + <iframe> 替代<frameset>实现