网站后台展示页面（html标签-框架标签）

没事多喝水w

于 2020-01-27 15:04:51 发布

阅读量1.1k

点赞数

分类专栏：前端

wang

本文链接：https://blog.csdn.net/w_sl_code/article/details/104091802

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文深入讲解了使用<frameset>和<frame>标签进行网页布局的方法，包括按行、按列及混合模式的切割技巧，以及如何通过src和name属性引入和定位页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般网站页面在设计的时候分为前端页面和后端页面，前端页面因为是直接展示给用户的，所以需要美观，后台页面是给管理员使用的，一般对于美观性要求比较低，简单简洁可以使用即可
如下商城页面
在这里插入图片描述
一般使用<frame>标签，该标签是框架设置布局标签，专门用于页面的布局和划分。

注意：framset和 body不能一起使用

frameset属性：

属性名	属性说明
cols	对页面进行列切割单位：像素/百分比
rows	对页面进行行切割单位：像素/百分比

页面切割模式可以使用三种格式，分别为按列切割，按行切割还有混合切割三种格式

按行切割
按行切割——这样将页面分割为上下两个部分，其中上部分和下部分分别占整个网页的10%和90%，也可以用*号代替，*号代表精确分割以后剩余的比例。比如所举例子中也可以使用10%，*进行表示

代码表示

<frameset rows="10%,90%">
		<frame />
		<frame />
		<frame />
</frameset>

按列切割
按列切割——这样将页面分割为左中右三个部分，其中左中右三个部分分别占页面的20%,50%,30%，也可以用*号代替，*号代表精确分割以后剩余的比例。比如所举例子中也可以使用20%,*,30%进行表示
代码实现

<frameset cols="20%,*,30%">
		<frame />
		<frame />
		<frame />
</frameset>

混合切割
将网页切割为如下样式，分割三个部分

代码实现：

<frameset rows="15%,*">
		<frame />
		<frameset cols="20%,*">
			<frame />
			<frame />
</frameset>

<frame>标签，是的子标签。用于页面引入。

frame属性

属性名	属性说明
src	引入的页面路径
name	该框架的名称用于和a标签target连用

可以将target="name"跳到指定name页面框中

代码实现
index.html

<frameset rows="17%,*">
		<!--第一行-->
		<frame src="top.html" />
		<!--第二行-->
		<frameset cols="20%,*">
			<frame src="left.html"/>
			<frame name="right" src="center.html"/>
		</frameset>
	</frameset>

top.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="../img/top_100.jpg" width="100%" height="60px"/>
	</body>
</html>

图片:
在这里插入图片描述
left.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h1><a href="order.html" target="right">订单页面</a></h1>
		<h1><a href="shopping.html" target="right">购物页面</a></h1>
	</body>
</html>

center.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1><b>欢迎使用本商城管理系统</b></h1>
	</body>
</html>

order.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>这里是订单页面</h1>
	</body>
</html>

shopping.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>这里是购物页面</h1>
	</body>
</html>