使用框架切分网页

效果:

代码：

 <!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. [Java in NetBeans] Lesson 12. Arrays

    这个课程的参考视频和图片来自youtube. 主要学到的知识点有: 1. Array: container that holds a fixed number of values of the sam ...

  2. 石子合并（区间DP经典例题）

    题目链接:https://www.luogu.org/problemnew/show/P1880 #include <cstdio> #include <cmath> #inc ...

  3. Hybrid设计--Hybrid中Native能力的设计

    稍微成熟的团队,header一定是不利于业务的UI组件,这个组件会封装在view层,方便前端使用.对业务前端开发来说,不用关注header是如何实现的,只用框架层释放的API.(一个前端有一个自己的U ...

  4. 第一章入门篇CSS样式的分类、盒模型

    1.CSS样式的分类 CSS样式分为一项4种: 1.内联样式表,直接写在元素style属性里面的样式,如 <p style="color:red;">内联样式</ ...

  5. 使用Github进行代码管理

    准备: Github地址:https://github.com 注册Github帐号 一.新建仓库 进入如下界面: 到这里仓库就创建完成了. 二.安装Github-window-desktop 安装g ...

  6. Mac虚拟机上使用Genumotion模拟器

    在Mac虚拟机系统上开发ReactNative的IOS应用非常方便,只要安装Xcode即可,  但 Android应用就需要三个步骤: 首先声明,下载Android SDK会非常慢,最好有快速的网络或 ...

  7. python number

    一.number类型转换 int(x [,base ]) 将x转换为一个整数 long(x [,base ]) 将x转换为一个长整数 float(x ) 将x转换到一个浮点数 complex(real ...

  8. System.BadImageFormatException”C#报错

    在平常的开发中或多或少会遇到一些问题,而本次向小编这里是自己刚刚解决的一个问题,贴出来与大家分享一下,纠结了一个下午,终于解决了,是有关平台的一个报错问题.   方法/步骤     报错”“Syste ...

  9. jQuery-插入内容-新增内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. caffe在Linux下生成均值文件

    参照博客:https://blog.csdn.net/sinat_28519535/article/details/78533319