使用框架切分网页

效果:

代码：

 <!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. 【Linux】-NO.6.Linux.2.JDK.1.001-【CentOS 7 Install JDK 8u121】-

    1.0.0 Summary Tittle:[Linux]-NO.6.Linux.2.JDK.1.001-[CentOS 7 Install JDK 8u121]- Style:Linux Series ...

  2. shell 脚本中如何添加多行注释

    shell中有时会用到多行注释,一种时vim的快捷方式,我不太熟悉,一种是如下 :<<!   ......! 使用: :<< !.......! 比如: :<< ! ...

  3. iOS 点击返回键崩溃的未解之谜

    1. iOS8出现. 2.点击进去下一层View,然后返回,再返回上一级的视图的时候奔溃. 3.只有点击进去一下层View的时候才出现. 4. 报错的是给一个未知对象发送这个消息 gestureRec ...

  4. nvm（Node Version Manager）管理node版本

    nvm全称Node Version Manager是 Nodejs 版本管理器,它让我们能方便的对 Nodejs 的版 本进行切换. nvm 的官方版本只支持 Linux 和 Mac. Windows ...

  5. Python Anaconda使用

    选择Python 科学计算器发行版 Python用于科学计算的一些常用工具和库 IPython-增强的交互环境:支持变量自动补全,自动缩进,支持 bash shell 命令,内置了许多很有用的功能和函 ...

  6. Xcode 常用命令

    一些自己在开发过程中总结的命令,并不是完整的,会不断的更新. 1.图片转png格式 sips -s format png start.jpg --out StartBg.png 转换时,先cd 当前图 ...

  7. IDEA2017及DataGrip2017注册码

    访问http://idea.lanyus.com/,网页中有相关说明,最简单的方式是将“0.0.0.0 account.jetbrains.com”添加到hosts文件中,然后点击页面底部的“获得注册 ...

  8. java开发前的配置

    JAVA语言是1995年由Sun公司退出的一门高级编程语言,在2009年4月20被ORACLE公司收购 看看java体系图

  9. sqli-labs(十六)(order by注入)

    第四十六关: http://www.bubuko.com/infodetail-2481914.html 这有篇文章讲得还不错可以看下 这关是order by后面的一个注入,用报错注入和盲注都是可以的 ...

  10. web.xml文件的简单说明

    在javaEE提供的tutorial中的hello1中的web.xml文件写到: <?xml version="1.0" encoding="UTF-8" ...