通常我们从设计师手上拿到设计稿，按照功能划分为很多小块，然后再利用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. Java基础系列1：Java基本类型与封装类型

    Java基础系列1:Java基本类型与封装类型 当初学习计算机的时候,教科书中对程序的定义是:程序=数据结构+算法,Java基础系列第一篇就聊聊Java中的数据类型. 本篇聊Java数据类型主要包括两 ...

  2. sqli_labs学习笔记（一）Less-54~Less-65

    续上,开门见山 暴库: http://43.247.91.228:84/Less-54/?id=-1' union select 1,2,database() --+ challenges 爆表: h ...

  3. Day3-Python3基础-函数

    本节内容 1. 函数基本语法及特性 2. 参数与局部变量 3. 返回值 嵌套函数 4.递归 5.匿名函数 6.函数式编程介绍 7.高阶函数 8.内置函数 1.函数的定义 定义: 函数是指将一组语句的集 ...

  4. H.264原理

    前言 H264视频压缩算法现在无疑是所有视频压缩技术中使用最广泛,最流行的.随着 x264/openh264以及ffmpeg等开源库的推出,大多数使用者无需再对H264的细节做过多的研究,这大降低了人 ...

  5. mysql--->MySQL错误日志

    MySQL错误日志 简介 MySQL错误日志是记录MySQL 运行过程中较为严重的警告和错误信息,以及MySQL每次启动和关闭的详细信息.错误日志的命名通常为hostname.err.其中,hostn ...

  6. Django设置session过期时间

    settings.py #session 设置 SESSION_COOKIE_AGE = 60 * 10 # 设置过期时间10分钟,默认为两周 SESSION_SAVE_EVERY_REQUEST = ...

  7. React使用antd按需引入报错

    引言 按照antd官网配置按需引入,还是出现一系列的报错: 原因 在网上搜了一下,大部分说是react-scripts以及react-app-rewired版本不兼容的问题,我果断把下载低版本 npm ...

  8. k8s注册节点提示Docker SystemdCheck]: detected cgroupfs" as the Docker cgroup dr iver. The r ecommended dr fiver is" systemd"

    本篇就不长篇大论了,直接附上解决办法 提示如上,此提示非必要要求,只是建议,但是看着不爽,那就解决它 这是未解决之前的docker信息,现在输入下面的指令 sudo echo -e "{\n ...

  9. 【转载】计算机程序的思维逻辑 (8) - char的真正含义

    看似简单的char 通过前两节,我们应该对字符和文本的编码和乱码有了一个清晰的认识,但前两节都是与编程语言无关的,我们还是不知道怎么在程序中处理字符和文本. 本节讨论在Java中进行字符处理的基础 - ...

  10. QQ IP 地址查询相关

    1.QQwry.dat格式分析和查询IP位置的PHP程序 以前的追捕数据库太大,而且很久没有更新了. 所以我想到利用QQwry.dat这个文件查询IP所在位置,QQwry.dat 在很多地方都能找到, ...