zoukankan      html  css  js  c++  java
  • frameset

          frame,是网页开发必须掌握的知识。例如后台架构、局部刷新,页面分割,都是frame的用途表现,尤其是后台页面制作,使用frame会给用户带来非常舒适的使用感受。
    frame知识点包括(frameset标签、frame标签、iframe标签)。
          
    一、frameset

    1. 属性

    ①border

    设置框架的边框粗细。
    ②bordercolor
    设置框架的边框颜色。
    ③frameborder
    设置是否显示框架边框。设定值只有0、1;0 表示不要边框,1 表示要显示边框。
    ④cols
    纵向分割页面。其数值表示方法有三种:“30%、30(或者30px)、*”;数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%;“30”表示该区域横向宽度为30像素;“*”表示该区域占用余下页面空间。例如:cols="25%,200,*" 表示将页面分为三部分,左面部分占页面30%,中间横向宽度为200像素,页面余下的作为右面部分。
    ⑤rows
    横向分割页面。数值表示方法与意义与cols相同。
    ⑥framespacing
    设置框架与框架间的保留的空白距离。

    2. 用例

    <frameset cols="213,*" frameborder="no" border="0" framespacing="0">
    注意1:
    cols与rows两属性尽量不要同在一个<frameset>标签中使用。若要实现下图架构,代码正确写法为:
    Frameset使用教程
    <frameset rows="59,*" cols="*" frameborder="no" border="0" framespacing="0">
      <frame src="???" name="topFrame" scrolling="No" noresize="noresize" id="topFrame"/>
      <frameset cols="213,*" frameborder="no" border="0" framespacing="0">
        <frame src="???" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"/>
        <frame src="???" name="mainFrame" id="mainFrame"/>
    【即,若想即使用cols又使用rows,可利用frameset嵌套实现】
    注意2:
    <frameset cols="40%,*,*">
    意思是:第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。
    <frameset cols="*,*,*,*">
    意思是:浏览器窗口等分为四部分。
    二、frame
    1. 属性
    ①name
    设置框架名称。此为必须设置的属性。
    ②src
    设置此框架要显示的网页名称或路径。此为必须设置的属性。
    ③scrolling
    设置是否要显示滚动条。设定值为auto, yes, no。
    ④bordercolor
    设置框架的边框颜色。
    ⑤frameborder
    设置是否显示框架边框。设定值只有0、1;0 表示不要边框,1 表示要显示边框。
    ⑥noresize
    设置框架大小是否能手动调节。
    ⑦marginwidth
    设置框架边界和其中内容之间的宽度。
    ⑧marginhight
    设置框架边界和其中内容之间的高度。
    ⑨width
    设置框架宽度。
    ⑩height
    设置框架高度。
    2. 用例
    <frame src="???" name="topFrame" scrolling="No" noresize="noresize" marginwidth="10" marginhight="10" width="400" height="800" />
    三、iframe
    是浮动的框架(frame),其常用属性与frame类似,其他的主要有以下(相同的就不列举了)
    1. 属性
    ①align
    设置垂直或水平对齐方式
    ②allowTransparency
    设置或获取对象是否可为透明。
    2. 用例
    <iframe name="123" align="middle" marginwidth="0" marginheight=0 src="???" frameborder="0" scrolling="no" width="776" height="2500"></iframe>
    注意:
    iframe标签与frameset、frame标签的验证方法不同,是XHTML 1.0 Transitional。且iframe是放在body标签之内,而frameset、frame是放在body标签之外。
    四、综合示例
     
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>First</title>
        </head>
      <!--
                作者:1107530849@qq.com
                时间:2014-06-24
                描述:注意此处body标签是没有的(noframes才显示)
            -->    
            <frameset rows="10%,90%">
                <frame src="Top.html" name="top"/>
                <frameset cols="15%,*">
                        <frame src="Home.html" name="home"/>
                            <frame src="index1.html" name="index1"/>
                            
                </frameset>
            
                <noframes>
                    <body>
                    你的浏览器不支持frame
                    </body>
                </noframes>
                
            </frameset>
        </html>
    first.html
    //top页面
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Top</title>
        </head>
        <body>
            <iframe src="iframe.html" border="0" frameborder="0"></iframe>
        </body>
    </html>
    
    //iframe页面
    
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Top</title>
        </head>
        <body>
            我是通过iframe引入的top
        </body>
    </html>
    top.html
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>Home</title>
        </head>
        <body>
            <ul>
            
            <!--
                作者:1107530849@qq.com
                时间:2014-06-24
                描述:关键点是target属性,需要跟显示页面的name属性一致
            -->    
                <li><a href="index1.html" target="index1">index1</a> </li>
                <li><a href="index2.html" target="index1">index2</a></li>
                <li><a href="index3.html" target="index1">index3</a></li>
            </ul>
        </body>
    </html>
    左侧导航页面home.html
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="" />
            <title></title>
        </head>
        <body>
            index1
        </body>
    </html>
    导航链接页
  • 相关阅读:
    剑指Offer-30.连续子数组的最大和(C++/Java)
    剑指Offer-29.最小的K个数(C++/Java)
    UVA 1616 Caravan Robbers 商队抢劫者(二分)
    UVA 10570 Meeting with Aliens 外星人聚会
    UVA 11093 Just Finish it up 环形跑道 (贪心)
    UVA 12673 Erratic Expansion 奇怪的气球膨胀 (递推)
    UVA 10954 Add All 全部相加 (Huffman编码)
    UVA 714 Copying Books 抄书 (二分)
    UVALive 3523 Knights of the Round Table 圆桌骑士 (无向图点双连通分量)
    codeforecs Gym 100286B Blind Walk
  • 原文地址:https://www.cnblogs.com/shierfen/p/6768956.html
Copyright © 2011-2022 走看看