您的位置: 首页  >  IT文章  >  HTML高级标签之窗口分帧(后台老板管理页面)

HTML高级标签之窗口分帧(后台老板管理页面)

分类: IT文章 • 2022-05-03 22:01:41
HTML高级标签之窗口分帧(后台管理页面)

 上一章学习了界面分帧,  这次再学习一下如何构建一个后台管理的界面.


三: 窗口分帧之后台管理页面


1.作用: 使用frameset进行窗口分帧, 构建一个简易的后台管理页面


2.各属性的作用

<frameset><frame src="head.html" name="top"></framest> <!--frameset:  不能放在body标签中, 用来frameset将界面分区-->

<a> href="menu1" target="left">第一项</a> <!--target="left" 指向命名为"left"标签的位置-->


3.代码示例及思路

首先使用frameset将界面分帧, 将界面分为了top, left, right三部分

<!DOCTYPE html>
<html>
  <head>
    <title>窗口分帧-后台管理页面</title>
	
	<meta charset="utf-8">
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  <frameset rows="100,*"> <!-- frameset: 不能放在body标签中 , 这里用frameset将界面按比例分为3个区域-->
  	<frame src="head.html" name="top"> <!-- frame: 给此标签命名, 便于后面链接时target属性可以直接指向指定位置 -->
  	
  	<frameset cols="180,*">
  		<frame src="menu.html" name="left" noresize="noresize" scrolling="no">
  		<frame src="main1.html" name="right">
  	</frameset>
  </frameset>
  
  <body>
	  
  </body>
</html>


然后需要分别编辑对应三部分的代码

top:

<center><h3>后台管理界面头部</h3></center>
<a href="menu1.html" target="left">第一项</a> <!-- target: 指向命名为"left"标签的位置 -->
<a href="menu2.html" target="left">第二项</a>
<a href="menu3.html" target="left">第三项</a>
<a href="menu4.html" target="left">第四项</a>
<meta charset="utf-8">

right有四个部分, 用来对应top部的4项

默认为:

<center><h2>菜单部分</h2></center>
<meta charset="utf-8">

right1: 

<center><h2>菜单部分1</h2></center>
<a href="Main.html" target="right">主页</a><br>
<a href="http://www.baidu.com" target="right">百度</a><br>
<a href="" target="right">第三页</a><br>
<a href="" target="right">第四页</a><br>
<a href="" target="right">第五页</a><br>
<a href="" target="right">第六页</a><br>
<a href="" target="right">第七页</a><br>
<a href="" target="right">第八页</a><br>
<a href="" target="right">第九页</a><br>
<meta charset="utf-8">

right2:

    <center><h2>菜单部分2</h2></center>  
    <a href="" target="right">第一页</a><br>  
    <a href="" target="right">第二页</a><br>  
    <a href="" target="right">第三页</a><br>  
    <a href="" target="right">第四页</a><br>  
    <a href="" target="right">第五页</a><br>  
    <a href="" target="right">第六页</a><br>  
    <a href="" target="right">第七页</a><br>  
    <a href="" target="right">第八页</a><br>  
    <a href="" target="right">第九页</a><br>  
    <meta charset="utf-8">

right3: 

    <center><h2>菜单部分3</h2></center>  
    <a href="" target="right">第一页</a><br>  
    <a href="" target="right">第二页</a><br>  
    <a href="" target="right">第三页</a><br>  
    <a href="" target="right">第四页</a><br>  
    <a href="" target="right">第五页</a><br>  
    <a href="" target="right">第六页</a><br>  
    <a href="" target="right">第七页</a><br>  
    <a href="" target="right">第八页</a><br>  
    <a href="" target="right">第九页</a><br>  
    <meta charset="utf-8">

right4: 


    <center><h2>菜单部分1</h2></center>  
    <a href="" target="right">第一页</a><br>  
    <a href="" target="right">第二页</a><br>  
    <a href="" target="right">第三页</a><br>  
    <a href="" target="right">第四页</a><br>  
    <a href="" target="right">第五页</a><br>  
    <a href="" target="right">第六页</a><br>  
    <a href="" target="right">第七页</a><br>  
    <a href="" target="right">第八页</a><br>  
    <a href="" target="right">第九页</a><br>  
    <meta charset="utf-8">

主体内容部分:


<center><h1>主体内容部分</h1></center> 
</html>
<meta charset="utf-8">

4.运行结果

HTML高级标签之窗口分帧(后台老板管理页面)


相关推荐