用户名:  密码:   
您当前的位置:首页 > 网页设计 >  Html+CSS > 

关于html框架学习笔记

上次修改时间: 2023-01-07 18:11:34      来源:网络总结      作者:钢铁长陈
上一页      路径:DSD\Learn\Html与CSS\      下一页

关于框架

1. 框加就是把一个页面分成多个部分显示,每部分显示不同的页面,如网站后台,左边栏是一个页面,右边是一个页面
2. 框架中不能body标签,否则框架显示不出来,还有框架标签名为<frameset,不能少输一个<framset,少输入一个e也显示不出来
3. 框架的嵌套要在不同的页面中设置,如框架分为三个区域,上,下部再分左右,那么就先需要设一个主页面分框架分上下两部门,再在下面那个页面再建一个框架,分左右两部分
4. 控制框架任意区域超链接页面显示到框架那个区域是由超链接的参数target决定,如下:
 <li><a href="test.html" target="content">aaaa</a></li>  //这里表aaaa这个超链接页面test.html显示到框架中name为content的区域
5. frameBorder=No  //用以控制是否显示框架各区域之间的边框,默认为yes
 scrolling="no" //用以控制子框架是内容超出时是否显示滚动条,默认为yes
frameSpacing=0
 


示例1:左中右方式
<!DOCTYPE html>
<html>
<frameset cols="25%,*,25%">  //用以声明框架,表明框架分三列,第一列和最后一列各占25%,*表剩余的50%归中间框架
  <frame src="frame_a.htm">  ////框架中的第一列显示的页面为frame_a.htm, <frame表框架中的子框架,子框架,没有结束符,frame_a.htm表子框显示的页面
  <frame src="frame_b.htm">  //框架中的第二列显示的页面为frame_b.htm
  <frame src="frame_c.htm">  //框架中的第三列显示的页面为frame_c.htm
</frameset>
</html>

示例2:左右方式
<frameset cols="25%,*">  //这样表分两栏,左边栏占25%,其它为右边栏
  <frame src="frame_a.htm">  ////框架中的第一列显示的页面为frame_a.htm, <frame表框架中的子框架,子框架,没有结束符,frame_a.htm表子框显示的页面
  <frame src="frame_b.htm">  //框架中的第二列显示的页面为frame_b.htm
</frameset>

示例3:上中下方式
<frameset rows="25%,*,25%">  //如果把cols改为rows表上中下三栏显示,上下各占25%,其于为中间
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>

示例5:上下方式
<frameset rows="25%,*">  //表上下二栏显示,上占25%,其于为下
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>

示例6:复杂框架,先设一个上下框架,再在下框架链接的页面里设一个左右框架
详见:D:\SynologyDrive\Site\www0\html5CommonCode\kuangjia
主框架:main.html
<!DOCTYPE html>
<html lang="en">
    <frameset rows="10%,*">
        <frame src="up.html">
        <frame src="down.html">
    </frameset>
</html>

子框架:down.thml
<!DOCTYPE html>
<html lang="en">
<frameset cols="10%,*">
    <frame src="downleft.html">
    <frame src="downright.html">
</frameset> 
</html>

示例6的框架也可合并显示:
<html lang="en">
    <frameset rows="10%,*">
        <frame name="up" src="up.html">
        <!-- <frame src="down.html"> -->
            <frameset cols="20%,*">
                <frame src="downleft.html">
                <frame src="downright.html">
            </frameset>    
    </frameset>
</html>