使用框架切分网页

效果:

代码：

 <!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. extjs store快速创建的几种方式

    viewModel中定义stores: { tickets: { model: 'Ticket', autoLoad: true, remoteFilter: true, filters: [{ pr ...

  2. Hybrid设计--核心交互

    普通网页中跳转使用a标签,这里我们要对跳转进行更多的干预,所以将全站的跳转收口到框架层,用forward去实现.拒绝用a和window.location.如果我想对所有跳转做一个处理,开动画或者对跳转 ...

  3. Dockerfile详解（三）

    1.概述 创建Docker镜像的方式有三种 docker commit命令:由容器生成镜像: Dockerfile文件+docker build命令: 从本地文件系统导入:OpenVZ的模板. 关于这 ...

  4. vue父组件数据改变，子组件数据并未发生改变（那是因为你没写监听）附带子组件的写法

    下面的代码有 父组件有三个按钮,年.月.日 点击之后父组件的数据发生改变,子组件却没改变,打印接受的数据,除了第一次其他都没打印,那是因为你没有写监听 <template> <div ...

  5. template.js简单入门

    template.js是一款开源的JavaScript模板引擎,用来渲染页面的. github地址 https://github.com/yanhaijing/template.js 下载templa ...

  6. spring 对jdbc的简化

    spring.xml <!-- 加载属性配置文件 --> <util:properties id="db" location="classpath:db ...

  7. 关于double精确度的简单问题

    (1)测试TestDouble.java结果 结果:如图,使用double类型的数据进行运算时结果是不准确的. 原因:double类型的数值占用64bit,即64个二进制数,除去最高位表示正负符号的位 ...

  8. JAVA_Stream_练习

    package airycode_java8.nice7; import airycode_java8.nice1.Employee; import org.junit.Test; import ja ...

  9. SVN windows内修改日志内容(错误解决)

    在我的电脑是windows 7,使用TortoiseSVN客户端,选中代码目录,点击右键,选择<显示日志> 显示日志信息 修改原来的日志信息(在需要修改的版本的日志中点击鼠标右键,显示如下 ...

  10. d'jang基础

    1,建立一个名为guest的django项目,django-admin startproject  guest 生成一个guest文件夹,包含一个guest文件夹和一个manage.py cd gue ...