zoukankan      html  css  js  c++  java
  • HTML高级标签(2)————窗体分帧(2)————后台管理页面

    使用frameset进行窗体分帧。构建简易的后台页面。这篇博客就作为一个简易后台管理页面的实战演练。


    1  首先,须要一个页面,使用<frameset>按比例划分为适合的三个区域:头部。菜单。主体。

    <frameset>不能放在<body>中编写。

    给每个<frame>进行命名,便于后面链接时target属性能够直接指向指定位置。

    代码例如以下(文件名称自己定义。我写的是 frameset.html):

    <html>
    	<head>
    		<title>后台管理页面</title>
    	</head>
    	
    	<frameset rows="100,*">
    		<frame src="head.html" name="top">
    
    		<frameset cols="180,*">
    			<frame src="menu.html" name="left" noresize scrolling="no">
    			<frame src="main.html" name="right">
    		</frameset>
    	</frameset>
    
    </html>

    2 我们须要在三个帧中指定不同的URL,须要编写几个html文件:head.html; menu.html; menu1.html; menu2.html; menu3.html; menu4.html; main.html

    head.html:

    四个选项,每一个选项链接到不同的菜单,target指向菜单位于的窗口。

    <center><h3>后台管理页面头部</h3></center><br>
    <a href="menu1.html" target="left">第一项</a>
    <a href="menu2.html" target="left">第二项</a>
    <a href="menu3.html" target="left">第三项</a>
    <a href="menu4.html" target="left">第四项</a>

    menu.html:

    九个选项,每一个选项链接到不同的的内容,target指向主体位于的窗口。

    因为所使用的方法与头部链接菜单时的全然同样,故URL就均为空,不一一编写了。

    <center><h2>菜单部分</h2></center>
    
    
    menu1.html:

    <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>
    

    menu2.html:

    <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>
    

    menu3.html:

    <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>
    

    menu4.html:

    <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>
    

    main.html:

    <center><h1>主体内容部分</h1></center>

    编写好全部文件之后。保存在同样的文件夹以下。打开frameset.html文件。就能够看到例如以下效果:


    点击头部第二项后:


    好了。一个后台最主要的功能也就实现了。

    若编写出现bug。请耐心调试。




  • 相关阅读:
    OCP-1Z0-051-V9.02-108题
    以一种访问权限不允许的方式做了一个访问套接字的尝试
    常用的几个官方文档
    OCP-1Z0-053-V12.02-388题
    FusionChart实现奇偶间隔显示
    OCP-1Z0-053-V12.02-138题
    Tcp and Udp NAT 穿越穿透打洞
    flashback database实验(使用lgmnr找出还原时间点)
    flashback table实验(基于undo数据)
    flashback query实验(基于undo数据)
  • 原文地址:https://www.cnblogs.com/yxwkf/p/5229918.html
Copyright © 2011-2022 走看看