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

拼搏现实的明天。 2023-07-02 06:21 58阅读 0赞

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

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

frameset属性：

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>cols</td> 
   <td>对页面进行列切割单位：像素/百分比</td> 
  </tr> 
  <tr> 
   <td>rows</td> 
   <td>对页面进行行切割单位：像素/百分比</td> 
  </tr> 
 </tbody> 
</table>

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

*  按行切割  
      按行切割——这样将页面分割为上下两个部分，其中上部分和下部分分别占整个网页的10%和90%，也可以用\*号代替，\*号代表精确分割以后剩余的比例。比如所举例子中也可以使用`10%，*`进行表示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfc2xfY29kZQ_size_16_color_FFFFFF_t_70 1]  
    代码表示

*  按列切割  
      按列切割——这样将页面分割为左中右三个部分，其中左中右三个部分分别占页面的20%,50%,30%，也可以用\*号代替，\*号代表精确分割以后剩余的比例。比如所举例子中也可以使用`20%,*,30%`进行表示![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfc2xfY29kZQ_size_16_color_FFFFFF_t_70 2]  
    代码实现

*  混合切割  
    将网页切割为如下样式，分割三个部分  
    ![\-][-]  
    代码实现：

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

frame属性

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>属性说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>引入的页面路径</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>该框架的名称用于和a标签target连用</td> 
  </tr> 
 </tbody> 
</table>

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

代码实现  
index.html

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>

图片:  
![在这里插入图片描述][20200127145512346.jpg]  
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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfc2xfY29kZQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200127140907991.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfc2xfY29kZQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfc2xfY29kZQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200127141242899.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfc2xfY29kZQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfc2xfY29kZQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200127141918434.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfc2xfY29kZQ==,size_16,color_FFFFFF,t_70
[-]: https://img-blog.csdnimg.cn/20200127144050184.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfc2xfY29kZQ==,size_16,color_FFFFFF,t_70
[20200127145512346.jpg]: https://img-blog.csdnimg.cn/20200127145512346.jpg