通常我们从设计师手上拿到设计稿，按照功能划分为很多小块，然后再利用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. Windows版Redis主从配置

    一.下载 从github上下载Redis的zip包,地址:https://github.com/MicrosoftArchive/redis/releases Redis本身不支持windows,这是 ...

  2. windows系统中如何找到某程序运行的本地文件

    主要通过window自带的服务功能来查询: 比如:

  3. Git详解之文件状态

    前言 其实文件状态根据不同场景有不同的描述,例如:已跟踪.未跟踪.已暂存.已修改.未修改等等,乱七八糟的,今天个人根据自己的使用经验对其进行分类,如有不同建议或者更好的想法也可以留言评论,万分感谢! ...

  4. java反射API

    反射主要对象 Class Constructor Field Method API-Class 获取Class对象 Object.getClass() className.class Class.fo ...

  5. mysql 基本常用语句

    1.展示当前数据库 所有表名(前提必须进入数据库,进入数据库语句:[use 数据库名;])mysql> show create table 表名; 2.看mysql支持哪些存储引擎:mysql& ...

  6. Airtest自动化测试工具介绍

    官方网站:http://airtest.netease.com/ Airtest IDE: 跨平台的UI自动化测试编辑器,适用于游戏和App,详细参见官网文档:http://airtest.netea ...

  7. Codeforces_816

    A.不断增加时间,直到符合要求. #include<bits/stdc++.h> using namespace std; int a,b; char c; int f(int x) { ...

  8. Codeforces_711_B

    http://codeforces.com/problemset/problem/711/B 比较简单,过程有点繁琐,先找一行包含那个0的行,得到和,以此填出0位置的值,然后判断这个矩阵是否符合条件. ...

  9. How to setup backup by using EMC NW + EMC NMM for sqlserver failover cluster (not always on)

    As we said, sqlsever fail over cluster is perviously version of always on. The HA was guarenteed by ...

  10. mybatis缓存问题导致无法查询到数据

    今天查询记录时,发现重复查询结果时出现空记录的情况 查看控制台信息,只有红色框选部分有进行查询数据,而其他没有.然而上图可看出有两条数据是能展现出来的,故有可能是mybatis缓存命中的. 因此在ma ...