所有分类
  • 所有分类
  • 后端开发
网页布局新玩法:框架集如何成就浏览器界的指挥官?

网页布局新玩法:框架集如何成就浏览器界的指挥官?

一、框架如果网页由左右二个框架组成,那么除了左右二个网页文件之外,还有一个总的框架集文件。在frameset中设置将会对整个框架有效,在frame中设置则只对当前这个框架有效。二、浮动框架(三、一个框架布局的示例四、链接如何跳出框架那么链接

框架集的作用

哈喽,说到浏览器的框架,就像是一锅炖菜,框架集就是那个负责把window分成几部分的队长。你看,它就像个老板,底下带着各种框架文件,就像在公司里,总有个头头来安排任务不是吗?如果想让左上方、右下方都有框架,那就得靠这个将军般的框架集文件~

搞这个框架组件可真不容易,它就像是个老大,告诉浏览器怎么分房子让每个兄弟都住得舒服。没这规则的话,浏览器肯定懵逼了,所以我们享受到的整洁美观的框架布局可是要多谢这位大指挥官!

框架标记的魅力

  
  
  
  
  水平分割<a href='https://www.icz.com/technicalinformation/web/javascript/2024/03/11641.html' title='窗口' target='_blank' rel="noopener">窗口</a>的效果
  
  
  
 
 
     
 
     
 
 
 
 

咱们继续说下网页结构那点儿事,那些关键元素可没有凭空消失!就藏在框架里面了!每个框架的位置和大小,就用专门的标签来标示,类似于画图时用的得力助手——尺子,帮助确定每个小格子的位置。

  
  
  
  
  垂直分割窗口的效果
  
  
  

 
     
 
     
 
     
 
 
 
 

这个标签里面其实还有好多秘密!比如rows和cols,它们可是控制每个格子宽度的关键。设置好几行或列,那么框框就得跟着变,不然浏览器可就懵圈咯。然后说到frameborder和framespacing这两个参数,说白了就是用来调整窗口边缘线和间213距大小的。

  
  
  
  
  设置框架窗口的<a href='https://www.icz.com/technicalinformation/web/seo/2023/05/9618.html' title='边框' target='_blank' rel="noopener">边框</a>显示效果
  
  
  
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

网页布局新玩法:框架集如何成就浏览器界的指挥官?

源文件设置技巧

说起来,你知道 src 属性吗?没src的话,页面就只是个空壳子,有了才能活灵活现。就好比说,这个属性就是页面的身份证,告诉浏览器页面在哪里,然后再展示出来。所以,别忘了给每个页面设置上src,否则用处可就不大!

  
  
  
  
  设置框架的边框宽度
  
  
  
 
     
 
       
 
         
 
         
 
         
 
       
 
 
 
 

width和height也少不了!一般的浏览器窗口当成一个大箱子看就行了,根本不用调大小。但是如果放 HTML 页面上,比如浮动框架这种,要注意整体布局,不然尺寸不对,小盆友们展示不开拳脚的

浮动框架与普通框架

  
  
  
  
  设置框架的边框颜色
  
  
  
 
 
     
 
      
 
         
 
         
 
         
 
       
 
 
 
 

浮动框的小技巧!你可以调整名字啊、滚动条大小啥的,还有边框的厚薄!但是和普通框架比,它就不能设置框架间的距离和边框颜色。千万别慌张,解决这事儿就看那个叫”src”的属性就对了!只要告诉浮动框哪里来的(就是源文件地址啦),就能展示个性魅力咯。

想搞定框架,没那么简单哦~首先你要懂怎么把文件分配给各个模块指定尺寸和你小弟们的座位问题;然后就是调整一下各项参数,比如边界线和边距啥的;再往下,就需要在源文件里告诉每个模块应该在哪里待机;最后一步,就是通过改变属性值来调整整个框架的大小,让它更符合你网页的需求。至于具体设置,那就看各路神仙如何发挥他们的本事喽~

  
  
  
  
  设置页面源文件
  
  
  
 
 
     
     
 
 
 
 

  
 
    
    
    
  
  您的浏览器无法处理框架!
  
  
 

原文链接:https://www.icz.com/technicalinformation/web/javascript/2024/03/11970.html,转载请注明出处~~~
0

评论0

请先
注意:请收藏好网址www.icz.com,防止失联!站内免费资源持续上传中…!赞助我们
显示验证码
没有账号?注册  忘记密码?