通常我们从设计师手上拿到设计稿，按照功能划分为很多小块，然后再利用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. ubuntu18.04编译jdk8

    准备编译环境 sudo apt-get install -y zip unzip build-essential libx11-dev libxext-dev libxrender-dev libxt ...

  2. try catch finally的理解

    定义以及用法: try/catch/finally 语句用于处理代码中可能出现的错误信息. 错误可能是语法错误,通常是程序员造成的编码错误或错别字.也可能是拼写错误或语言中缺少的功能(可能由于浏览器差 ...

  3. SVN : 在SVN检测下来的Maven项目没有Maven标志

    在Ecplise使用import->从SVN检出项目, 检出的项目没有了 Maven标志 解决方案 右键点击项目->configure->Convert to Maven Proje ...

  4. C++基类和派生类的构造函数

    派生类不能继承基类的构造函数,若想通过派生类来对基类的private的变量成员进行初始化则需要: 通过派生类的构造函数来调用基类的构造函数完成基类成员变量的初始化. 看下面的例子: #include ...

  5. qt5实现简单布局

    layout.h #ifndef LAYOUT_H #define LAYOUT_H #include <QtWidgets/QDialog> #include <QLabel> ...

  6. Linux服务器上python2升为python3.6

    如何在在Linux服务器上吧Python2升级为Python3 最近白嫖了一年的服务器,打算在服务器上跑一个Python项目,没想到居然预装的是Python2.7.5.本来是打算把Python2.7. ...

  7. 使用stringstream打破字符与其他类型之间的隔阂

    考虑这样一个问题:给您一行各位数字,计算它们的和.数字之间用空格隔开.只能使用字符串. 一般考虑使用getchar,但这对于不熟悉 ASCLL 码的同学十分困难.C++的sstream头文件中提供了十 ...

  8. 2020你还不会Java8新特性？

    Java8(1)新特性介绍及Lambda表达式 前言: 跟大娃一块看,把原来的电脑拿出来放中间看视频用 --- 以后会有的课程 难度 深入Java 8 难度1 并发与netty 难度3 JVM 难度4 ...

  9. ELK logstash 各种报错

    1.logstash 启动后数据传输了,但是 ElasticSearch 中没有生成索引,查看logstash日志,报错如下 [2018-06-08T14:46:25,387][WARN ] [log ...

  10. LVS 部署

    一.LVS的组成 LVS 由2部分程序组成,包括 ipvs 和 ipvsadm. 1. ipvs(ip virtual server):一段代码工作在内核空间,叫ipvs,是真正生效实现调度的代码.2 ...