使用框架切分网页

效果:

代码：

 <!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. [LeetCode] 492. Construct the Rectangle_Easy tag: Math

    For a web developer, it is very important to know how to design a web page's size. So, given a speci ...

  2. 2019年UI和UX设计趋势：大概是最全的汇总了！

    朋友们,很快,2018就要跟我们说

  3. JS通过类名判断是否都必填

    //判断class='required' 是否都必填 function required() { var flag = true; $(".required").each(func ...

  4. cocos2dx 3.13 在Mac平台下配置安卓环境变量

    终端下输入:vi .bash_profile 编辑环境变量: export COCOS_CONSOLE_ROOT=/Users/jiazedong/Cocos2d-x/cocos2d-x-3.2/co ...

  5. Request.UrlReferrer注意点

    定义: public sealed class HttpRequest { // // 摘要: // 获取有关客户端上次请求的 URL 的信息,该请求链接到当前的 URL. // // 返回结果: / ...

  6. 第六天实验详解——dedecms通过xss漏洞写马

    第六天实验详解 **XSS跨站攻击的分类** XSS漏洞类型主要分为持久型和非持久型两种: 1. 非持久型XSS漏洞一般存在于URL参数中,需要访问黑客构造好的特定URL才能触发漏洞. 2. 持久型X ...

  7. JAVA8方法引用

    方法引用:若Lambda方法体已经实现,我们可以使用方法引用* 主要有三种语法格式:* 对象::实例方法名* 类::实例方法名* 类::静态方法名** 注意:Lambda体中调用的方法的参数列表与返回 ...

  8. jQuery-导航下拉菜单-实用简单

    /*CSS代碼*/ /*導航*/ .nav{background: url("../img/menu_bar.gif") repeat-x;} .nav ul li{display ...

  9. Python二分法查找

    1.1二分前提是有序,,否则不可以2分,2分查找的时间复杂度是O(log n):排序后二分查找到适当的位置插入数值 lst = [37,99,73,48,47,40,40,25,99,51] def ...

  10. jQuery选择器--#id、element和.class

       #id 描述 根据给定的ID匹配一个元素.使用任何的元字符作为名称的文本部分, 它必须被两个反斜杠转义:\\ 参数 id  用于搜索的,通过元素的 id 属性中给定的值 element 概述 根 ...