zoukankan      html  css  js  c++  java
  • 常见页面布局方式(三种框架集)

    frameset框架集

    Frameset标签可定义一个框架集,它用来组织多个窗口(框架),每个框架有独立的html文档,在有frameset时,不可以同时存在body标签,他和body标签是同级的。

    多个框架组成了一个框架集

    1 框架集标签(frameset)定义了如何将窗口分割为框架

    2 每个frameset 定义了一系列行或列

    3 rows、columns的值规定了每行或每列占据屏幕的面积

    frameset的一些属性

      cols“”把一个浏览器窗口按列进行切割,也就是把浏览器竖着切分

          cols“20%,200px,*”上半部分战20%,中间部分占200px,剩下的为第三部分。

      rows=“20%,200px,*”以行方式分割,横着划分

      border=“1”设置间距为1等等

      bordercolor=“red”框架边的颜色

      frameborder=“no/yes” 是否显示边框线(也可以写0或1)

      noresize=“noresize”不可以重新设置大小(两个内容之间不可以移动了)浏览器之间解析方式不太一样最好在frame单独写,而不是在frameset上写

    它们都在frameset标签上显示。

    框架标签<frame />

    frame标签定义了放置在每个框架中的HTML文档。它通过引用要显示的HTML文档的路径,他是自闭合标签。

    frame常用属性

    1 name设置框架名称

    2 src 设置此框架要显示的网页名称或路径。此为必须设置的属性。

    3 scrolling=“” 设置是否要显示滚动条。设定值为auto,yes,no。不可以用0  1来写值:

    !不能将body和frameset标签同时使用,但是如果添加包含一段文本的<noframeset>标签,就必须得将这段文字嵌套于<body>标签内:

    <frameset rows="200px,*" border="1" bordercolor="red">
      <frame src="http://www.baidu.com" />
      <frameset cols="30%,*">
      <frame src="http://www.360.com" name="leftwindows" scrolling="no" />
      <frame src="http://www.taobao.com" noresize=“noresize”/>
      </frameset>
    </frameset>
    <noframes>
      <body>
        你的浏览器不支持frameset框架集
      </body>
    </noframes>

    浏览器不支持框架集用norframes标签来显示,一般写咋frameset下面里面包含body标签。

    例如百谷歌度网站,百度谷歌一起搜

    iframe内联框架和框架集实例

    <iframe>内联框架标签

    iframe元素会创建包含另外一个文档的内联框架(即行内框架)。iframe是属于内联框架,他是body的子集。iframe作为一个普通元素放在body里,而frameset是代替了body元素

    属性:

    1width可设置内联框架的宽

    2 height可设置高

    3 name 设置框架名称

    4 src设置页面的路径

    例子:<a href="http://www.youdao.com: target="right">百度</a>

      <iframe name="right" src="http://www.baidu.com" frameborder="1" width="400" hright="200">你的浏览器不支持iframe标签</iframe>

    制作页面是没有写单位,都默认为像素。

    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <a href="http://www.jd.com" target="iframeName">点击</a>
    <iframe name="iframeName" src="http://www.baidu.com" width="600" height="600" frameborder="0">你的浏览器不支持iframe标签</iframe>
    </body>
    </html>

    通过target属性指向了iframe的名字所以页面会在iframe里面显示,如果不加target,就会在整个页面打开。

    a标签的target属性值:

    _blank,在新的窗口打开

    _self,默认,在相同的框架中打开被连接文档

    _parent,在父框架集中打开被连接文档(在最外面的frameset中打开)

    _top,在整个窗口中打开

    framename,通过名字在指定的框架中打开

    可以应用的qq邮箱类型的,在左面点击在右面被打开如下:

    list.html

    <!DOCTYPE html>

    <html>

    <head lang="en">

    <meta charset="utf-8">

      <title></title>

    </head>

    <body>

      <ul>

        <li><a href="htto://www.baidu.com" target="rightWindow">百度</a></li>

        <li><a href="htto://www.360.com" target="rightWindow">360</a></li>

        <li><a href="htto://www.taobao.com" target="rightWindow">淘宝</a></li>

        <li><a href="htto://www.jd.com" target="rightWindow">京东</a></li>

      </ul>

    </body>

    </html>

    index.html

    <!DOCTYPE html>

    <html>

    <head lang="en">

      <title></title>

    </head>

    <frameset rows="20%,*">

      <frame src="http://www.baidu.com" />

      <frameset rows="20%,*>

      <frame src="list.html" />

      <frame name="rightWdow" src="http://www.youdao.com" />

      </frameset>

    </frameset>

    </html>

    显示如下:在左下点击的效果会在右面的框架里产生。

  • 相关阅读:
    android中样式和自定义button样式
    android——实现多语言支持
    sizeof,数组,指针
    C++预处理相关
    内联函数
    牛客C++刷题
    leetcode刷题列表
    ends在linux和Windows下输出结果不同
    计算机负数为什么使用补码及浮点型计算
    个人技术博客:VUE:0基础入门
  • 原文地址:https://www.cnblogs.com/1111duguxiaoyu/p/6131340.html
Copyright © 2011-2022 走看看