欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

如何在html中设置框架集 博客分类: html htmlUI 

程序员文章站 2024-03-05 17:01:37
...

框架集包含<frameset>和<frame>两个标签,其中<frameset>描述窗口的分割,<frame>定义放置在每个框架中的HTML页面。

如何在html中设置框架集
            
    
    博客分类: html htmlUI 

工具/原料

  • 基本语法如下:

    <frameset cols="25%,50%,*" rows="50%,*" border="5">

    <frame src="the_first.html">

    <frame src="the_second.html">

    ......

    </frameset>

方法/步骤

  1.  

    1.纵向分割窗口

    <html>

    <head>

    <title>rows纵向分割为3个窗口</title>

    </head>

    <frameset bordercolor="red" rows="25%,50%,*" border="5">

    <frame src="subframe/the_first.html" name="top"/>

    <frame src="subframe/the_second.html" name="middle"/>

    <frame src="subframe/the_thdrd.html" name="bottom"/>

    </frameset >

    <html>

    如何在html中设置框架集
            
    
    博客分类: html htmlUI 
  2.  

    2.横向分割窗口

    <html>

    <head>

    <title>cols进行纵向分割</title>

    </head>

    <frameset bordercolor="#FF0000" cols="200,*,200" border="5">

    <frame name="leftFrame" src="subframe/the_first.html" />

    <frame name="mainFrame" src="subframe/the_second.html" />

    <frame name="rightFrame" src="subframe/the_third.html" />

    </frameset >

    <html>

     

    如何在html中设置框架集
            
    
    博客分类: html htmlUI 
  3.  

    3.横向和纵向同时分割窗口

    <html>

    <head>

    <title>创建多框架页面</title>

    </head>

    <frameset rows="20%,*" frameborder="0">

    <frame src="subframe/top.html" name="topFrame"  

    scrolling="no" noresize="topframe"/>

     <frameset cols="20%,*">

       <frame src="subframe/left.html" name="leftframe"

       scrolling="no" noresize"noresize">  

     <frame src="subframe/right.html" name="rightframe">

     </frameset >

    </frameset >

    <html>

     

     

    如何在html中设置框架集
            
    
    博客分类: html htmlUI 

注意事项

  • 要实现上述框架效果,除边框外,还需用框架的其他修饰属性。例如,是否允许调整各框架窗口的大小,则使用“noresize” 属性设置;当框架内的页面内容较多时,是否需要显示滚动条,则使用“scrolling”属性设置。

相关标签: html UI