使用框架切分网页

效果:

代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         frame_a

     </body>

 </html>

frame_a.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        frame_2

    </body>

</html>

frame_2.html

<html>

    <frameset rows="25%,75%">

        <frame  src="frame_a.html" name="framea" />

        <frame src="frame_2.html" name="frame2" />

    </frameset>

</html>

框架分页.html

<frameset></frameset>中的rows="25%,75%"可以同时加载上下两个页面，上面的那个页面占整个页面的1/4，下面的那个页面占3/4.，也可以分为多个页面。

框架的多种切分方法

效果:

代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         frame3

     </body>

 </html>

fram_3.html

<html>

    <frameset rows="25%,*">

        <frame  src="frame_a.html" name="framea" />

        <frameset cols="25%,*">

        <frame src="frame_2.html" name="frame2" />

        <frame src="frame_3.html" name="frame3" />

        </frameset>

    </frameset>

</html>

多种框架切分方法.html

在代码中的rows="25%,*",cols="25%,*"中的*表示剩余的比例。cols表示垂直分页，rows表示上下分页。

使用框架实现后台管理系统的布局

效果：

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body  >

        <div align="center">

            <br />

            欢迎来到perfect*的博客园

        </div>

    </body>

</html>

top.html

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <a href="apart.html" target="right">新的文章</a><!--这里的right来自于框架中frame定义的name属性值-->

     </body>

 </html>

left.html

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <div align="center">

             perfect*又有新的博客发布了，欢迎浏览!!！

         </div>

     </body>

 </html>

right.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        使用框架实现后台管理系统的布局

    </body>

</html>

apart.html

<html>

    <frameset rows="10%,*">

        <frame  src="top.html" name="top" />

        <frameset cols="10%,*">

        <frame src="left.html" name="left" />

        <frame src="right.html" name="right" />

        </frameset>

    </frameset>

</html>

使用框架实现后台管理系统的布局.html

使用框架实现后台管理系统的布局.html中的target属性实现了在其它网页显示另一个网页的内容。

框架frame的更多相关文章

  1. 我给女朋友讲编程html系列(3) --html中的超链接标签-a标签 和 框架frame与框架集frameset

    我们浏览网页的时候,当单击某段文字或图片时,就会打开一个新的网页,这里面就使用了超链接. 就比如下图是一个导航类网页,当你单击某个链接就会打开新的网页. 比如,我拿我的qq空间“金河访谈”举例,新建一 ...

  2. html框架frame iframe

    框架 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面.没分HTML文档称作一个框架. 缺点: 开发人员必须同时跟踪更多的HTML文档 很难打印整张页面 框架结构标签(<frameset ...

  3. JSP 使用框架frame

    JSP使用框架放在<head>标签里面.如果放在<body>标签里面,用Tomcat打开,是不会显示的.

  4. XFS： Cross Frame Script (跨框架脚本) 攻击。

    一.Cross Frame Script (跨框架脚本) 攻击什么是Cross Frame Script?很简单,做个实验就知道了.把下面的这段HTML代码另存为一个html文件,然后用ie浏览器打开 ...

  5. Cross Frame Script (跨框架脚本) 攻击

    一.Cross Frame Script (跨框架脚本) 攻击 什么是Cross Frame Script? 很简单,做个实验就知道了.把下面的这段HTML代码另存为一个html文件,然后用ie浏览器 ...

  6. iOS10 UI教程视图的边界与视图的框架

    iOS10 UI教程视图的边界与视图的框架 iOS10 UI视图的边界 在视图的几何形状中我们提到了视图属性中的一部分属性可以将定义的视图绘制在屏幕上.其中典型的3个属性为边界属性.框架属性以及中心位 ...

  7. HTML布局与框架

    HTML块 HTML块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>.<ul> <!DOCTYPE html> <html> ...

  8. HTML框架与布局

    原文:http://www.cnblogs.com/yyhh/p/4210659.html HTML块 HTML块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>. ...

  9. js调用父框架函数

    if (window.parent && window.parent.frames["frame_main"]) { alert(window.parent.fra ...

随机推荐

  1. 2018-2019-1 20189221《Linux内核原理与分析》第三周作业

    2018-2019-1 20189221<Linux内核原理与分析>第三周作业 实验二 完成一个简单的时间片轮转多道程序内核代码 实验过程 在实验楼中编译内核 编写mymain.c函数和m ...

  2. centos 打包报错License for package Android SDK Build-Tools 25.0.3 not accepted

    报错如下: 提示没有25.0.3的安卓环境,那么,接下来就需要安装这个环境 1.android list sdk -a 会显示需要更新 类似如下(截图只是一部分,前后还有一部分): 2.android ...

  3. MVC View小技巧

    1.在View中添加命名空间引用 1)直接在.cshtml文件中添加 @using MvcMusicStore.Models 2)在Views文件夹的web.config文件中添加,对整个Views文 ...

  4. phing

    javascript compress java -jar ./compiler.jar --js {from} --js_output_file {to}

  5. cocos2d JS 设置字幕循环滚动(背景图滚动亦可)

    var dong = ccs.load("res/Login.json"); this.addChild(dong.node); this.cShamNotice = ccui.h ...

  6. selenium处理弹出窗口

    在selenium ui自动化测试过程中,经常会遇到,弹出新窗口,那么会对我们元素定位造成哪些影响呢? 1.元素id或xpath;name都没有问题,就是定位不到. 那如何解决呢?没错webdrive ...

  7. react native初识

    开发的第一步就是搭建rn的开发环境,你可以去官网去查看教程也可以 点击 http://bbs.reactnative.cn/topic/10 进去查看window的开发环境安装的教程:注意:很关键的一 ...

  8. python--教你做个最简单的tcp通信。。

    TCP协议:建立在IP协议之上的,TCP协议,传输控制协议(英语:Transmission Control Protocol,缩写为 TCP)是一种面向连接的.可靠的.基于字节流的传输层通信协议,由I ...

  9. <9>cc.Sprite组件

    1.精灵 精灵(Sprite)是Cocos系列的核心概念之一,是Cocos Creator最常用的显示图像的组件. 游戏中显示一个图片,我们就可以把这个叫做”精灵” sprite,这只是简单理解概念. ...

  10. C#之Action的实际应用例子

    public class DemoAction{ public Action action; public Action<int> action1; public Action<in ...