网页DIV+CSS布局与ifame传统布局对比
通常我们从设计师手上拿到设计稿，按照功能划分为很多小块，然后再利用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传统布局对比的更多相关文章
- 网页DIV+CSS布局和动画美化全程实例 (陈益材) 随书光盘
网站的建站技术近几年得到迅速的发展,网页的布局与特效动画技术层出不穷,网站建设已经从简单的技术支持时代衍变到现在的视觉美化时代.但如何使设计的网页高人一筹,达到让人过目不忘的境界,如何追求以最简单的特 ...
- div+css经典三行两列布局
写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
- div+css实现几种经典布局的详解
一.左右两侧,左侧固定宽度200px,右侧自适应占满 <div class="divBox"> <div class="left">&l ...
- 一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- (转)一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
- 01 DIV+CSS 固定页面布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...
- DIV+CSS 清除浮动方法总结
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...
- DIV+CSS 网页布局之：一列布局
1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...
- DIV+CSS常用网页布局技巧！
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
随机推荐
- Centos搭建PXE，安装部署操作系统
centos系统搭建PXE网络安装centos+ubuntu+Windows Centos搭建PXE,安装部署操作系统 一 . 原理: 1.什么是PXE: PXE(Pre-boot Execution ...
- python笔记11
今日内容 函数小高级 lambda 表达式 内置函数 内容回顾 函数基本结构 参数 形参 基本参数:def func(a1,a2):pass 默认值:def func(a1,a2=123):pass ...
- alert弹出窗口，点击确认后关闭页面
alert("点击确认后,关闭页面"); window.opener=null;window.top.open('','_self','');window.close(this);
- Java 设置Excel自适应行高、列宽
在excel中,可通过设置自适应行高或列宽自动排版,是一种比较常用的快速调整表格整体布局的方法.设置自适应时,可考虑2种情况: 1.固定数据,设置行高.列宽自适应数据(常见的设置自适应方法) 2.固定 ...
- c++中重载运算符
重载运算符 1,成员函数运算符 运算符重载为类的成员函数一般格式如下 <函数类型> operator <运算符> (参数表) {函数体} 调用成员函数运算符如下 <对象名 ...
- C++静态成员函数小结
类中的静态成员真是个让人爱恨交加的特性.我决定好好总结一下静态类成员的知识点,以便自己在以后面试中,在此类问题上不在被动. 静态类成员包括静态数据成员和静态函数成员两部分. 一 静态数据成员: ...
- 从免费的物联网防火墙hihttps谈机器学习之生成对抗规则
hihttps是一款基于MQTT的免费的物联网防火墙,同时也是web应用防火墙,既支持传统的检测功能如SQL注入.XSS.恶意漏洞扫描.密码暴力破解.CC.DDOS等),又支持无监督机器学习,自主对抗 ...
- 理解POP、OOP、AOP编程
一.面向过程编程:(POP:Procedure Oriented Programming) 面向过程编程是以功能为中心来进行思考和组织的一种编程方法,它强调的是功能(即系统的数据被加工和处理的过程), ...
- 《Python学习手册 第五版》 -第11章 赋值、表达式和打印
上一章对Python的语句和语法已经进行了基本的说明,接下来就是每个章节的详细说明,本章的主要内容就是标题中涵盖的三点:赋值语句.表达式语句.打印语句 本章重点内容如下: 1.赋值语句 1)赋值语句的 ...
- Wannafly挑战赛5 A珂朵莉与宇宙 前缀和+枚举平方数
Wannafly挑战赛5 A珂朵莉与宇宙 前缀和+枚举平方数 题目描述 给你一个长为n的序列a,有n*(n+1)/2个子区间,问这些子区间里面和为完全平方数的子区间个数 输入描述: 第一行一个数n 第 ...