超级牛最详细的Div+CSS布局案例教学教材
DIVCSS布局入门演示文稿
7. }
8. #right {
9. height :250px; 10. background-color：#6CF;
11. border：2px solid #66F 12. }
第28页，共56页。
5、三列浮动中间列宽度自适应布局
• 三列中间栏左右栏的间距变化适应，单纯的使用float属性与百分比属性不能实现，就 要用绝对定位来表现，只需要设置对象的top、right、bottom及left四个方面即可， XHTMLD代码：
• 当一个元素包含另一元素中时（假设没有填充或边框将空 白边隔开），它们的顶和底空白边也会发生叠加。
• 行内框，浮动框或相对定位框之间的空白边是不会叠加的 。
第20页，共56页。
5.3 CSS布局方式
• 5.3.1 居中的布局设计 • 5.3.2 浮动的布局设计 • 5.3.3 高度自适应
第21页，共56页。
2. width:300px; 3. height :300px;
4. background-color：#6CF;
5. border：2px solid #66F 6. float:left;
7. } 8. #right {
9. width:300px;
10. height :300px;
11. background-color：#6CF;
• DIV对象除了可以直接放入文本和其他标签，也可以多个 DIV标签进行嵌套使用，最终的目的是合理的标识出页面 的区域
第5页，共56页。
<div>头部内容区</div> <div>导航菜单区</div>
<div>广告栏区</div>
第7章 第2节 DIV+CSS布局网页 课件
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 5）切换至设计视图，在“选择器”窗格中添加标签选择器“ul li”，将“属性”窗格切换 至布局属性，设置“Width”为75px、“Height”为24px，设置左边界为20px，设置“float” 为left，将“属性”窗格切换至文本属性，设置“line-height”为24px，设置“list-styletype”为none。 6）为每一个导航项设置空超链接，在“选择器”窗格中添加伪锚记选择器“a.nav:link”， 将“属性”窗格切换至文本属性，设置“font-family”为宋体、“font-size”为13px、 “color”为# 1E1E1、“font-weight”为“bold”、“text-decoration”为“none”。 7）在“选择器”窗格中添加伪锚记选择器“a.nav:visited”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#E1E1E1、“fontweight”为“bold”、“text-decoration”为“none”。
7.17
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 6）为ID为“Title”的Div创建ID选择器规则，并在“方框”中设置“Width”为499px、 “Height”为45px，在“类型”中选择“类型”项设置“font-family”为宋体、“font-size” 为16px、“color”为#000000、“line-height”为45px、“font-weight”为bold。 7）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。 8）在“分类”中选择“区块”项，设置“Text-align”为“center”。
div+css布局教程
应该这样写 margin:1px 3px 4px 2px;
3、选择器
1、CSS 派生选择器 ul li{ font-weight:bold;} 定义ul内li 标签的样式 P span a{font-weight:bold;} 定义段落下a标签的样式
可以使用派生选择器给一个元素内的子元素定义样式。两个元素之间用空格 表示。
其中“p”,我们称为选择器，指明我们要给“p”定义样式； 样式声明写在一对大括号“{}”中； Color和background称为“属性”，不通属性之间用“；”分隔 “#ff0000”和“#000000”是属性的值
2、css语法
几点值得注意的地方： 1、选择器的分组 可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用 逗号将需要分组的选择器分开。（有助于优化样式表，提高效率） 例子： h1{color: green; } h2{color: green; } h3{color: green; }
CSS 指层叠样式表 (Cascading Style Sheets)
CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行
样式通常存储在样式表中
外部样式表通常存储在 CSS 文件中
外部样式表可以极大提高工作效率
2、css语法
CSS 语法由三部分构成：选择器、属性和值： P{color:#ff0000; background:#000000;}
2、css定位和浮动
1，定位
例子：#box_relative { position: relative; left: 30px; top: 20px; }
我们看见，框2脱离原来的位置，相对与原占位空间偏移了一定的距离。 但是框2原本的占位空间没有消失。所以相对定位不会对布局格式产生 影响。（实例演示）
使用DIV+CSS布局网页说课稿
《使用Div + CSS结构布局“诗歌”页面》说课稿各位老师：你们好，我说课的题目是《使用Div+CSS结构布局“诗歌”页面》，下面我从教材、学情、教学目标、教学方法、教学过程、教学亮点与教学反思六个方面对我的教学设计进行说明。
一、教材分析地位：《使用Div+CSS结构布局“诗歌”页面》取材于教学参考书《Dreamweaver CS4从入门到精通》第12章内容。
它与我们使用教材《Dreamweaver 网页设计与制作案例教程》第7章相对应。
作用：Div + CSS是一种最新、最科学的网页布局方式，符合Web2.0的技术标准，目前也比较流行的网页布局方式。
使用Div + CSS布局可将结构与表现分离，减少了HTML文档内大量代码，只留下了页面结构的代码，方便对其进行阅读，还可以提高网页的下载速度。
所以这部分内容是我们学习网页设计非常重要的一部分，学生要重点掌握。
二、学情分析学生特点：我授课的对象为高职三年级学生，我们都知道职业学校学生的学习习惯不太好，学习自觉性相对低一些。
知识准备与兴趣：针对我们本节课内容，学生在前面已经学习了Div标签的插入方法以及CSS 样式表创建方法，了解了其功能，对其有了一定的感性认识，我们重要的是加强学生的实践操作能力的训练。
三、教学目标分析根据上述教材与学情分析，我设定如下教学目标与重难点：1．知识与技能目标：在知识与技能方面要求做到以下几点1）学会分析页面的结构的方法。
2）能使用div标签定义合理的页面结构。
3）巩固用代码与视图两种方法插入div标签以及向标签内部添加内容。
4）学会利用CSS规则布局美化页面。
2．情感目标：1）培养学生的审美能力。
2）培养学生的合作精神与协作能力。
3.教学重、难点：重点：分析页面结构、用div标签定义页面结构难点：利用CSS规则布局美化页面四、教学方法基于以上的教材目标分析和重难点的确定，我根据自己对任务驱动教学法和新课程改革的理论认识，结合授课学生实际，主要采用任务驱动、视频指导教学法。
css+div布局代码(一)教案
margin:0 auto;可以让盒子或有特定宽度的块元素居中
增加内边距会增加元素本身的宽度和高度，如果想保持原来元素的宽和高，在原来元素宽高的基础上减去这个padding值
padding如果是一个值，代表上下左右内边距相等如：padding:30px;
课题：css+div布局代码（一）
教学目标：让学生初步了解div+css，并学会用代码写出css+div布局
教学重点，难点：学生新接触的知识比较复杂，学生在学习和运用的时候会比较难。
德育渗透：
教学内容、过程：
导入
之前我们学过用菜单的方式来写css样式，今天，我们用代码来写css样式。-top:200px;}
</style>
<body>
备注：
第4页
课题：
<div class="box">这是里边的内容这是里边的内容这是里边的内容这是里边的内容这是里边的这是里边的内容这是里边的内容</div>
<h2>标题二</h2>
<p>这是一段文字</p>
<em>fewqf3wtgf34wtg43</em>
案例知识：
<style>
*{color:#F00; font-size:45px; margin:0; padding:0;}
</style>
<body>
<h2>fewfewfwe</h2>
<em>ffewfew</em>
美化我的网页-css+div布局页面教案
1 美化我的网页----------css+div 布局页面（教案）布局页面（教案）实训目的：实训目的：1、学会css 样式的创建、编辑和应用样式的创建、编辑和应用2、学会AP div 的创建和参数的设置的创建和参数的设置3、学会使用css+div 布局和美化网页。
布局和美化网页。
实训步骤：实训步骤：1、将素材库chaprter3 中的SX7文件夹复制到D ：\根目录下。
运行dreamweaver cs5 ,新建站点“网页特效制作”，站点文件夹为D:\SX7。
打开站点根目录新建空白文档index.html,修改标题为“CSS+DIV 布局网页”。
2、制作基本结构、制作基本结构（1）选择文档工具栏中的“拆分”视图下的<body>标签，将所有页面用一个大的<div>,既#container 包裹起来，代码如图3---1所示。
所示。
<div id=<div id=””container container””>页面层容器页面层容器</div>（2）在#container 块中写入div 的基本结构，将页面层容器文字替换为如下代码，如图3—2所示：所示：<div id=<div id=””banner banner””>横幅图片</div> <div id=<div id=””leftbar leftbar””>侧边栏</div><div id=<div id=””content content””>页面主体</div><div id=<div id=””footer footer””>页面的底部</div>（3）选择“窗口→CSS 样式”命令或按【shift+f11】组合键打开“CSS 样式”面板，如图3—3所示，所示，◆ 图3—3“CSS 样式”面板样式”面板单击“单击“CSS CSS 样式面板右下方”的“新建CSS 规则”按钮，打开新建CSS 规则对话框。
超级牛最详细的Div+CSS布局案例
DIV固定宽度居中显示－超级牛最详细的Div+C SS布局案例这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px; height:500px; background:#CD5C5C;}页面代码如下：<div id="container"><p>1列固定宽度居中</p></div>效果下图显示：（点击看大图）其中居中的关键是“margin:0 auto;”代码例子由“标准之路”提供，感谢！序－经验之谈－超级牛最详细的Div+CSS布局案例最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。
大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。
在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。
我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。
Div+CSS网站布局应用教程第1章 网页和网站的基础知识
1.4.4
遵循Web标准的好处
首先最为明显的就是用web标准制作的页面代码量小，可以节省带宽。 这只是web标准附带的好处，因为DIV的结构本身就比Table简单，Table布 局的层层嵌套造成代码臃肿，文件尺寸膨胀。通常情况下，相同表现的页 面用DIV+CSS比用Table布局的节省2/3的代码，这是web标准直接的好处。
1.2.1
什么是网页设计
随着时代的发展、科学的进步、需求的不断提高，网页设计已经在短短 数年内跃升成为一个新的艺术门类，而不再仅仅是一门技术。相比其他传统 的艺术设计门类而言，它更突出艺术与技术的结合、形式与内容的统一、交 互与情感的诉求。
1.2.2
网页设计的特点
与当初的纯文字和数字的网页相比，现在的网页无论是在内容上，还是 在形式上都已经得到了极大的丰富，网页设计主要具有以下特点：交互性、 版式的不可控性、技术与艺术结合的紧密性、多媒体的综合性、多维性。
1.1.2
网页的基本构成元素
网页由网址（URL）来识别于存取，当 访问者在浏览器的地址栏中输入网址后，通 过一段复杂而又快速的程序，网页文件会被 传送到访问者的计算机内，然后浏览器把这 些HTML代码“翻译”成图文并茂的网页。 虽然网页的形式与内容不相同，但是组成网 页的基本元素是大体相同的，一般包含文本 和图像、超链接、动画、表单、音频视频等 内容。 网页作为上网的主要依托，由于人们频繁地使用网络而变得越来越重要， 这使得网页设计也得到快速发展。每天无数的信息在网络上传播，而形态各 异、内容繁杂的网页就是这些信息的载体。如何设计网站页面，对于每一个 网站来说都是至关重要的。
在学习使用Div+CSS对网页进行布局制作之前，还需要清楚什么是 Web标准。WБайду номын сангаасb标准也称为网站标准，通常所说的Web标准是指进行网站 建设所采用的基于XHTML语言的网站设计语言。
DIV+CSS布局 ppt课件
9
2021/3/26
DIV+CSS布局 ppt课件
10
DIV+CSS布局
• 属性名称必须小写 • 属性值必须加引号 • 属性不能简写 • 用 Id 属性代替 name 属性
2021/3/26
DIV+CSS布局 ppt课件
11
DIV+CSS布局
• DOCTYPE • Head • Body
2021/3/26
18
DIV+CSS布局
• 间隙属性,用来设置元素内容到元素边界的 距离。
• 注意： padding用在容器内部，margin指容 器外部，就像墙上挂着的两个相框，margin 指的是相框与相框的距离，padding指的是 每个相框里照片与相框边框的距离。
2021/3/26
DIV+CSS布局 ppt课件
块距离）；
– margin right ：距右元素块距离（设置距右元素块距） ； – margin bottom ：底元素块距离（设置距低（下）元素
块距）。
margin:5px 6px 7px 8px;各参数分别指代Top、Right、 Bottom和Left
2021/3/26
DIV+CSS布局 ppt课件
• CSS:Cascading style Sheets，采用CSS技术， 可以有效地对页面的布局、字体、颜色、 背景和其它效果实现更加精确的控制。
2021/3/26
DIV+CSS布局 ppt课件
2
DIV+CSS布局
1.大大缩减页面代码，提高页面浏览速度,缩 减带宽成本;
2.结构清晰，容易被搜索引擎搜索到，天生 优化了seo
网页教案(div布局)
网页教案(div布局)第一章：HTML基础1.1 学习目标：了解HTML的基本结构掌握如何使用标签来创建网页的基本元素1.2 教学内容：HTML简介：HTML的作用和重要性HTML基本结构：`<!DOCTYPE >`、`<>`、`<head>`、`<body>`标签网页元素：、段落、、图片等标签的使用1.3 教学活动：演示HTML的基本结构及其功能示例：创建一个简单的网页，包含、段落和图片学生练习：创建一个网页，使用HTML的基本元素1.4 作业：完成一个简单的HTML练习，创建一个包含、段落和图片的网页第二章：CSS基础2.1 学习目标：了解CSS的作用和重要性掌握如何使用CSS来样式化网页元素2.2 教学内容：CSS简介：CSS的作用和重要性内联样式：使用`style`属性来添加样式内部样式表：使用`<style>`标签来添加样式外部样式表：使用`.css`文件来添加样式2.3 教学活动：演示CSS的作用和重要性示例：使用内联样式、内部样式表和外部样式表来样式化网页元素学生练习：创建一个简单的网页，使用CSS来样式化、段落和图片2.4 作业：完成一个简单的CSS练习，创建一个包含、段落和图片的网页，并使用CSS来样式化它们第三章：DIV标签3.1 学习目标：了解DIV标签的作用和重要性掌握如何使用DIV标签来创建布局3.2 教学内容：DIV标签简介：DIV的作用和重要性使用`<div>`标签来创建块级元素使用CSS来样式化DIV元素3.3 教学活动：演示DIV标签的作用和重要性示例：使用DIV标签来创建一个简单的布局学生练习：创建一个简单的网页布局，使用DIV标签来创建不同的区域3.4 作业：完成一个简单的DIV标签练习，创建一个包含、段落和图片的网页布局第四章：定位和布局4.1 学习目标：了解定位的作用和重要性掌握如何使用CSS定位技术来对元素进行精确布局4.2 教学内容：定位概述：静态定位、相对定位、绝对定位和固定定位使用`position`属性来设置元素的定位方式使用`top`、`right`、`bottom`和`left`属性来控制元素的位置了解`z-index`属性的作用4.3 教学活动：演示不同定位方式的原理和效果示例：使用定位技术创建一个导航栏布局学生练习：创建一个网页布局，使用定位技术来实现一个水平导航栏4.4 作业：完成一个定位练习，创建一个包含导航栏的网页布局。
经典div+css网页标准布局实例教程
第一章XHTML CSS基础知识学习本系列教程需有一定html和css基础，也就是指您之前做过网页，会用表格布局。
如果您刚开始学习网页制作，不知道什么是表格布局及html和css，建议您先去充电，否则学习本教程会非常吃力或者根本就听不懂。
由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到web标准（div+css）布局，会使用web标准制作出常见的页面，这也达到了本教程的目的。
本教程多以实例形式循序渐进讲解，实例涉及到哪些关键点或难点就讲解什么，较少讲解概念。
因为概念这些东西很难说明白，或者说明白你也不一定能听懂，听懂了也不一定能理解。
所以把概念留给大家以后再深入研究。
由于章节关系，没有把css和css hack单独分出，只是在用到的时候穿插入讲解了。
html 基础和css基础只在第一节中介绍了几点重要的。
下面我们开始第一章的学习一、xhtml css基础知识首先说一下我们这节课的知识点文档类型语言编码html标签css样式css优先级css盒模型组成1）文档类型当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML 的语法。
许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。
2）语言编码接下来我们还会发现这样一句话：<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />它标示文档的语言编码。
网页教案(div布局)
网页教案(div布局)第一章：HTML基础1.1 教学目标了解HTML的基本概念和作用掌握HTML的基本语法和常用标签1.2 教学内容HTML简介：HTML的概念、作用和发展历程HTML基本语法：标签、属性、注释等常用HTML标签：、段落、图片、、列表等1.3 教学步骤讲解HTML的基本概念和作用演示HTML的基本语法和常用标签让学生通过实例练习编写简单的HTML页面1.4 课后作业编写一个简单的HTML页面，包括、段落、图片和第二章：CSS基础2.1 教学目标了解CSS的基本概念和作用掌握CSS的基本语法和常用选择器2.2 教学内容CSS简介：CSS的概念、作用和发展历程CSS基本语法：选择器、属性、注释等常用CSS选择器：标签选择器、类选择器、ID选择器等2.3 教学步骤讲解CSS的基本概念和作用演示CSS的基本语法和常用选择器让学生通过实例练习编写简单的CSS样式2.4 课后作业编写一个简单的CSS样式，设置一个HTML页面的背景颜色、字体大小和颜色第三章：DIV布局基础3.1 教学目标了解DIV布局的基本概念和作用掌握DIV布局的基本方法和技巧3.2 教学内容DIV布局简介：DIV的概念、作用和应用场景盒模型：盒子模型概念、宽高设置、内外边距等浮动布局：浮动的概念、原理和应用定位布局：定位的概念、原理和应用3.3 教学步骤讲解DIV布局的基本概念和作用演示盒模型、浮动布局和定位布局的方法和技巧让学生通过实例练习编写一个简单的DIV布局页面3.4 课后作业编写一个简单的DIV布局页面，包括头部、主体和尾部三个部分第四章：响应式布局4.1 教学目标了解响应式布局的基本概念和作用掌握响应式布局的实现方法和技巧4.2 教学内容响应式布局简介：响应式布局的概念、作用和应用场景媒体查询：媒体查询的概念、语法和使用方法弹性布局：弹性布局的概念、原理和应用网格布局：网格布局的概念、原理和应用4.3 教学步骤讲解响应式布局的基本概念和作用演示媒体查询、弹性布局和网格布局的方法和技巧让学生通过实例练习编写一个简单的响应式布局页面4.4 课后作业编写一个简单的响应式布局页面，包括不同屏幕尺寸下的布局调整。
第14章DIVCSS布局基础
14.5 CSS布局方式：相对定位
除了使用浮动布局外，常用的布局方式还有定位。CSS 提供position属性用于定位。使用position定位可以定义元 素相对其父元素或者其他元素的精确位置。Position属性共 有四个关键字值，分别是static、absolute、relative和 fixed。 其中static为默认值，表示块保持在原来的位置上。 absolute代表绝对定位，relative代表相对定位，这两种定 位方式是最常用的。本小节先讲述相对定位。
如果提供全部四个参数值，将按上－右－下－左的顺 序作用于四边。
如果只提供一个，将用于全部的四边。 如果提供两个，第一个用于上－下，第二个用于左－ 右。 如果提供三个，第一个用于上，第二个用于左－右， 第三个用于下。例14-5
4．单边距值：margin-top 、margin-right 、marginbottom 、margin-left
border-style也包括border-top-style 、border-right-style
、 border-bottom-style 、border-left-style 例14-9
2．边框宽度border-width ，在设定边框宽度之前，必须先 指定边框的样式。
参数： medium : 默认宽度 thin : 小于默认宽度 thick : 大于默认宽度 length : 由浮点数字和单位标识符组成的长度值。不可 为负值。 例14-10
14.4.1 两个元素的浮动应用
在页面布局中，很多时候 会使用两个元素的浮动应 用。例如，页面为两分栏 的子元素的浮 动应用。 例14-12 技巧：IE6解释元素的边
全国“创新杯”计算机类说课大赛一等奖作品：《DIV+CSS布局网页》教学设计方案
网页设计与制作——使用DIV+CSS布局网页《网页设计与制作——网页布局》教学设计【课题】网页布局——使用DIV+CSS布局网页【教材】《网页设计与制作》【授课班级】中等职业学校网络专业二年级【教时】 4课时【教材分析及学情分析】本次课采用的教材是国家十二五规划教材《网页设计与制作》，其中DIV+CSS布局网页是重要的教学单元。
本教材内容通俗易懂、图文并茂，并且包含有丰富的信息化实训案例。
本次课的教学对象为中职学校二年级学生，他们未来主要从事网页前端设计师的工作，要求具备网页前端设计的能力。
在本次课之前，我们的学生已经掌握了Dreamweaver网页设计的相关知识，具备了网页美工的基础，学生学习热情较高，喜欢团队合作的探究学习方式，但学生自主创新能力不足，学习代码编写有一定困难，因此本课重点讲解如何使用DIV+CSS布局网页的知识内容。
【教学目标】依据本教材的内容，结合学生的学情分析，本着提高学生的知识水平及分析处理能力为宗旨，我制定了知识目标、技能目标、情感目标相结合的三维教学目标：知识目标：（1）学会DIV+CSS网页布局方式（2）掌握DIV+CSS布局的定位方法技能目标：（1）能熟练使用CSS对网页中对象的位置精确排版；（2）灵活应用DIV+CSS进行网页布局；情感目标：（1）培养学生团队合作意识；（2）提高学生责任感和职业素养；【教学重点与难点】●教学重点：DIV+CSS网页布局方式、方法。
●教学难点：灵活使用DIV+CSS布局定位。
【教学设计】课前利用该课程的学习网站和微课资源库让学生自主预习。
课中采用信息化的混合式教学法、项目驱动法等多种方法相结合的形式来激发学生的学习兴趣，并且利用微课资源库来突破教学难点；在教学效果上采用多元评价检测方法，让学生体验成功的乐趣；最后老师进行归纳总结，进行知识拓展，延伸学生的知识面。
使学生在不知不觉中实现知识的传递、迁移和融合。
【学法分析】学生是学习的主体，教师是组织者和引导者，引导学生学会学习的方法，才能构建有效的课堂。
div+css布局精品教程
Div+CSS布局入门教程（一）－通俗易懂。
本文是DIV+CSS教程中的精品。
一、页面布局与规划在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。
在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。
下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。
下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图：根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：│body {} /*这是一个HTML元素，具体我就不说明了*/└#Container {} /*页面层容器*/├#Header {} /*页面头部*/├#PageBody {} /*页面主体*/│├#Sidebar {} /*侧边栏*/│└#MainBody {} /*主体内容*/└#Footer {} /*页面底部*/至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
二、写入整体层结构与CSS接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：程序代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title><link href="css.css" rel="stylesheet" type="text/css" /></head><body></body></html>这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
超级牛最详细的D i v+C S S布局案例DIV固定宽度居中显示－超级牛最详细的Div+ CSS布局案例这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px; height:500px; background:#CD5C5C;}页面代码如下：<div id="container"><p>1列固定宽度居中</p></div>效果下图显示：（点击看大图）其中居中的关键是“margin:0 auto;”代码例子由“标准之路”提供，感谢！序－经验之谈－超级牛最详细的Div+CSS布局案例最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。
大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。
在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。
我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。
这个在我自己刚工作时，也不能明白，感觉leader老要报告真麻烦，改一个小小的功能也要发报行，我直接修改只要15分钟，但报告却要我1个多小时的时间，现在知道了，这是份很重要的依据，可以理清自己的想法，也能够在后来项目开发的后期，再帮自己找到这个项目初期的开发的原因（写得有点玄乎，但我相信做过项目的人都理解，项目到最后常常会变味的）。
做网站先要出策划图，下面这个是策划图的示例图.这是我从网上找的，感谢西乔同学的提供（由于工作的性质，我不方便将自己的策划图公开，大家都懂的）。
我平时一般用Axure RP做网站策划图，可以推荐给大家使用，有汉化版。
但出策划图只是第一步，我手下的员工都知道我的要求，不管是改版还是新建页面，草图（我允许手画版）一定要做一张，然后一定要用PhotoShop或FireWorks等图片处理软件将需要制作的界面布局设计出来，尤其不能是因为只是修改一个小栏目就可以跳过。
因为自以为只需要5分钟的修改可能最终却因为反复调整失败后连最初的效果都恢复不了，最后造成整个页面重新做的例子我看到太多，尤其是当你的水平还不成熟时。
所以一定要有设计图，这个设计图一定要很精致，一定要和你最终想得到的网页效果一样，不要敷衍自己。
最后，最重要的来了，制作页面最重要的一点就是全局性，以“模块化”思维，将同样的“模块”抽取出来，我见过很多人在制作网站时，为了有成就感，或为了网站运营时间，或工程的压力等很多原因，都会将一个页面完成然后上线一个页面，这样的情况不仅限于小型的网站，很多大型成熟的网站也会发生这样不成熟的事情，多以网站改版时为多，修改channel页面时只考虑channel页面，首页改版时只考虑首页，结果经过几次改版之后，整个网站的页面完全没有了联系，各自为政，造成很多不能删除的冗余代码，或者是技术上改动的困难，维护起来越来越辛苦。
最后，最最重要的来了，制作页面另一个最重要的一点就是要考虑程序员，一个网站最终还是需要程序员来将网站从静态变成动态，有很多页面制作人员在制作纯HTML代码时只考虑是不是还原了设计，是不是符合W3C的要求，却忘记了程序员，结果HTML 代码完全不利于开发，造成程序代码的冗余，页面展示时间过长。
这点也很需要注意的。
下面我们先从如何将页面模块化开始，我们要随时保持一个模块化的意识，其实网页就是由一个盒子叠一个盒子组合而成。
这里我们要引进一个名词－css盒模型。
css盒模型意思是DIV+CSS的重点。
就是用DIV+CSS来代替表格布局，盒模型是和table布局的一个不同点。
传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。
这种排版方式的网页代码简洁，能兼容更多的浏览器，比如PDA设备也能正常浏览。
学习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。
我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
下图将这些属性的关系表现出来margin，我们也称之为：外边距、外补丁；padding也可以称为：内边距、内补丁。
这些名称是制作人员必须要完全理解的。
看下图，我们仔细分析一下该图，来规划一下页面的布局.图片大致分为以下几个模块1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：│body {}/*这是一个HTML元素，具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/好了，大家明白最基本的页面布局与规划了吗？下面我们会直接讲各种页面布局图的嵌套关系的处理，都是一些最常见的网页结构，代码和图片由“标准之路”提供同，感谢“标准之路”。
DIV固定宽度上下二列居中显示－超级牛最详细的Div+CSS布局案例第一个例子只是告诉大家如何让页面居中，这个代码的用处一般用来做背景图，示例：http://www.smarter.co.jp/，外围是灰色的，当中页面的正文底是白色的，非常大气。
这个例子主要讲上下两列，这是最常见的，也是最简单的页面表现形式，头部放logo和banner，下面是主体内容。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;} #container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;} #header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:300px; background:#cff;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><p>这是身体</p></div></div></body>效果下图显示：点击看大图其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container 决定。
DIV1列固定宽度居中+头部+尾部居中显示－超级牛最详细的Div+CSS布局案例第二个例子是告诉大家如何让页面居中，如何加上头部。
这个例子加上了尾部，这也是一种常见的页面表现形式，头部放logo和banner，中间是主体内容，尾部放copyright等内容。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;} #container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#mainContent { height:300px; background:#cff; margin-bottom:5px;} #footer { height:60px; background:#6cf;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="mainContent"><p>这是主体</p></div><div id="footer">这是尾部</div></div></body>效果下图显示：点击看大图其中居中的关键是将“margin:0 auto;”写在最大的背景盒套中，宽度由#container 决定。
DIV1列固定宽度居中+头部+导航+尾部－超级牛最详细的Div+CSS布局案例第三个例子是我们在页面布局中加上了尾部，但一个标准的网站都有导航。
这个例子加上了导航，这是最常用的页面表现形式，本次例子中还涉及了另三个要点，是很多朋友在CSS定义时经常遇到的问题。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;} p{margin:0;}#container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;}#header { height:100px; background:#6cf; margin-bottom:5px;}#menu { height:30px; background:#09c; margin-bottom:5px;line-height:30px}#mainContent { height:300px; background:#cff; margin-bottom:5px;}#footer { height:60px; background:#6cf;}页面代码如下：<body><div id="container"><div id="header">这是头部</div><div id="menu">这是导航</div><div id="mainContent"><p>1列固定宽度居中+头部+导航+尾部</p></div><div id="footer">这是尾部</div></div></body>效果下图显示：点击看大图本例有三个关键要点1、p标签有默认值一样都是“margin-bottom:5px;”，如果仔细比较以前的示例，会发现，mainContent的上边界比较宽，超出了5px，原因是mainContent里嵌套了一个<p>。