网站后台展示页面(html标签-框架标签)

本文深入讲解了使用<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值