网页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 ...
随机推荐
- Windows 系统安装 Python 3.8 详解
安装 Python 很简单,但是其中的很多细节未必大家都清楚,趁着给自己安装最新 3.8 版本,把整个过程详细记录下. Python or Anaconda 本节是专门写给一些小白,Python 还没 ...
- Python3-提高效率的方法
1.字符串格式化 Python3.7或以上推荐使用f-string,其他版本推荐使用format方法. 2.字典的初始化 使用字面量初始化字典(以及其他集合类型). 说明:Python中初始化集合类型 ...
- JDK源码之StringBuffer与StringBuilder类分析
一 概述 StringBuffer类被 final 所修饰,不能被继承,StringBuffer继承了AbstractStringBuilder类, 是一个可变的字符序列,并且类中方法都有synchr ...
- 关于Windows Server 服务器 安装tomcat部署Java Web 项目的问题
我遇到的问题是:不知道怎么配置,感觉在服务器上部署一个web项目,应该是很高大上,步骤应该很繁琐,但是,事实却不是那样.配置反而挺简单. tomcat配置:在tomcat安装目录中的conf文件夹下有 ...
- Owncloud - Can't write into config directory!
Owncloud - Can't write into config directory! Can't write into config directory! This can usually be ...
- python中的变量和字符串
一.变量 1.python变量 *变量用于存储某个或某些特定的值,它与一个特定标识符相关联,该标识符称为变量名称.变量名指向存储在内存中的值.在创建变量时会在内存中开辟一个空间.基于变量的数据类型,解 ...
- python中更人性化的一个单元测试框架：nose2
如果你学过 python 进行自动化测试,你一定使用过 unittest.今天我们要讲的 nose2 是一个高级版本的 unittest.他比 unittest 更容易理解,用起来也更加方便一些. 快 ...
- Spring Cloud第十三篇 | Spring Boot Admin服务监控
本文是Spring Cloud专栏的第十三篇文章,了解前十二篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Clo ...
- python学习记录（八）
0910--https://www.cnblogs.com/fnng/archive/2013/04/28/3048356.html Python异常 Python用异常对象(exception ob ...
- CCF_ 201512-4_送货
一道拖了很久了题,用bool开的vis不会爆内存,dfs回溯的话会超时,于是有了一个很巧妙的dfs. #include<iostream> #include<cstring> ...