通常我们从设计师手上拿到设计稿，按照功能划分为很多小块，然后再利用div+css写成静态页面按照设计稿排列还原，最后把具体内容填充到小块里面。网页布局就是你想要的页面功能在你拿到设计图切块完成重新排列还原好！

div是一个容器，具体根据内容自动适配，可以设置它的宽高，内容尽可能的排列到div当中，当然在设置div宽高后，它里面的图片文字是可能超出设置的宽高度的。

table布局，可以查看HTML基础标签图片文本超链接列表表格介绍这里面有讲到，需要注意的是在table表格中，colspan是可以跨列合并单元格的，rowspan是可以跨行合并单元格的！以前的布局除了div+css还有frameset布局,它主要运用于管理后台控制菜单切换，实现这个局部的刷新。

iframe翻译过来是页面框架，其实它是用来嵌套页面的，在页面里面可以嵌套别人的页面，展示代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>ifame嵌套</title>

 </head>

 <body>

     <iframe src="https://www.baidu.com/" frameborder="0" width="50%"></iframe>

     <iframe src="https://hao.360.com/" frameborder="0" width="50%" style="float: left;"></iframe>

 </body>

 </html>

其次是frameset基于frame一个一个页面嵌套进来的,需要注意的是frameset不能和body共用，它们是平级的关系，二者只能出现其一！具体按照下面的代码来看，也可以实际操作下，有点绕哈，按照讲解一二三依次来看，有相应的注释：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>frameset实现局部刷新</title>

 </head>

 <!--讲解一：frameset中frame的嵌套-->

 <!-- <frameset rows="30%,70%">

         <frame src="frame1.html">

         <frame src="frame2.html">

     </frameset> -->

 <!--讲解二：frameset和table表格差不多，2行2列-->

 <!-- <frameset rows="30%,70%">

         <frame src="frame1.html">

         <frameset cols="20%,80%">

             <frame src="frame2.html">

             <frame src="frame3.html">

         </frameset>

     </frameset> -->

 <!--讲解三：frameset如何控制实现局部刷新-->

 <!-- 4个frame文件写的内容如下： -->

 <!-- frame1中写着： --><!--frame1-->

 <!-- frame2中写着： --><!-- <a href="frame3.html" target="showframe">frame3.html</a><a href="frame4.html" target="showframe">frame4.html</a> -->

 <!-- frame3中写着： --><!--frame3-->

 <!-- frame4中写着： --><!--frame4-->

 <frameset rows="30%,70%">

     <frame src="frame1.html">

     <frameset cols="20%,80%">

         <frame src="frame2.html">

         <frame src="frame3.html" name="showframe"><!--如果不写name="showframe"没办法实现局部刷新，会打开新的窗口-->

     </frameset>

 </frameset>

 </html>

最后关于iframe与frame的区别在我看来：iframe翻译过来是嵌套，其实就是把别的页面嵌套到自己的页面进来<iframe src="嵌套目标文件" frameborder="0"></iframe>；而这个frame是frameset实现局部刷新的基石，没有frame，frameset就无法实现局部刷新,同时要注意的是frameset与body不能同时出现!

网页DIV+CSS布局与ifame传统布局对比的更多相关文章

  1. 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘

    网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...

  2. div+css经典三行两列布局

    写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...

  3. div+css实现几种经典布局的详解

    一.左右两侧,左侧固定宽度200px,右侧自适应占满 <div class="divBox"> <div class="left">&l ...

  4. 一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  5. (转)一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

  6. 01 DIV+CSS 固定页面布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...

  7. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  8. DIV+CSS 网页布局之：一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

  9. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

随机推荐

  1. RAID磁盘冗余阵列

    RAID阵列分类 **一.RAID 0** 1.优点: 充分利用 I/O 总线性能使其带宽翻倍,读/写速度翻倍: 充分利用磁盘空间,利用率为 100%.2.缺点: 不提供数据冗余: 无数据检验,不能保 ...

  2. Spring5.x源码分析 | 从踩坑到放弃之环境搭建

    Spring5.x源码分析--从踩坑到放弃之环境搭建 前言 自从Spring发行4.x后,很久没去好好看过Spring源码了,加上最近半年工作都是偏管理和参与设计为主,在技术细节上或多或少有点疏忽,最 ...

  3. Java 中的各种锁和 CAS + 面试题

    Java 中的各种锁和 CAS + 面试题 如果说快速理解多线程有什么捷径的话,那本文介绍的各种锁无疑是其中之一,它不但为我们开发多线程程序提供理论支持,还是面试中经常被问到的核心面试题之一.因此下面 ...

  4. Kubernetes-Ingress资源详解

    什么是Ingress #阿里云称之为ingress路由!在 Kubernetes 集群中,主要用于接入外部请求到k8s内部,Ingress是授权入站连接到达集群服务的规则集合,为您提供七层负载均衡能力 ...

  5. pymysql连接提示format: a number is required, not str

    最近想随手写一个简单的员工管理系统,第一次使用python连接数据库,在这个过程中就遇到了一些问题,遂记录 遇到问题习惯性百度一下,很多教程都不适合新手,有些还不知道是不是瞎写的,所以我觉得有必要自己 ...

  6. python 不可变字典 inmutabledict的实现

    python inmutabledict的实现 关于在python中如何实现不可变字典的方法.早在pep416中,就建议python官方实现inmutabledict,但是官方否认了.理由主要是 根据 ...

  7. Java 继承_Chris

    题目: 编写一个应用程序,创建一个矩形类,类中具有长.宽两个成员变量和求周长的方法.再创建一个矩形类的子类——正方形类,类中定义求面积方法.重写求周长的方法.在主类中,输入一个正方形边长,创建正方形对 ...

  8. 从零开始学习redis源码

    2020的开年是比较艰难的,爆发了肺炎疫情,希望大家多注意安全,也希望疫情早日好转! 以3.2版本的源码为例,开始讲解,有时会贴出源码,进行说明,并会注明源码出处. 数据库 应该都知道默认redis会 ...

  9. 接口自动化CSV文件生成超长随机字符串--java接口方法

    public class STR { private static String Builderrud(int a){ StringBuilder builder= new StringBuilder ...

  10. 未来图书-需求分析——脑机接口、VR、AI推荐系统

    个人比较喜欢科幻作品,也常常畅想未来.. "书"作为几千年来人类文明信息载体,必然会不断演变.. 文荟宿舍墙上贴着Elon Musk的海报,向往像他一样能够在有限的生命中用极致的想 ...