2018网页设计与制作教程(div+css布局技术)
- 格式：ppt
- 大小：2.08 MB
- 文档页数：25
下载文档原格式
合集下载
动态网页设计Div+CSS布局入门
<div class=“contentR”> 右侧内容区 </div>
. contentL{ contentL{ float:left; }
元素特性的改变
块元素改为具有行元素的特性： 块元素改为具有行元素的特性：
1. 2.
display:inline； 改为行元素) display:inline；(改为行元素) float:left； 向左浮动) float:left；(向左浮动)
3.1 布局步骤1 布局步骤1
1、使用div定义语义结构 、使用div定义语义结构 一个典型的版面分栏结构：页头、导航栏、内容、版权 结构代码： • <div id=“header”></div> id=“header” • <div id=“nav”></div> id=“nav” • <div id=“content”></div> id=“content” • <div id=“footer”></div> id=“footer” 把这四个盒子装进一个更大的盒子，body中，如下 把这四个盒子装进一个更大的盒子，body中，如下 <body> 上面四行代码 </body>
}
提示： • 块元素可以转换为行元素； 块元素可以转换为行元素； • 行元素可以转换为块元素； 行元素可以转换为块元素；
如何改变块布局
DIV是块元素，两个DIV排列时，会竖着排，如何 DIV是块元素，两个DIV排列时，会竖着排，如何 让他能横排呢？
<div class=“contentL” > 左侧内容区 </div>
DIV+CSS网页布局教程
DIV+CSS网页布局教程一、传统table布局传统Table布局方式只是利用了HTML的table元素所具有的零边框特性因此，Table布局的核心是：设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明gif图片实现，最终的结构是一个复杂的表格（有时候会出现多次嵌套），显然，这样不利于设计和修改。
二、table布局的缺点1、设计复杂，改版时工作量巨大2、表现代码与内容混合，可读性差3、不利于数据调用分析4、网页文件量大，浏览器解析速度慢如蜗牛三、web标准的构成结构：用来对网页中的信息进行整理与分类，常用的技术有：HTML、XHTML、XML表现：用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等..主要技术就是CSS,目前版本2.0行为：是指对整个文档内部的一个模型进行定义及交互行为的编写主要技术有：DOM(文档对象模型)、ECMAScript(JavaScript脚本语言)四、web标准布局基于Web标准的网站设计的核心目的：如何使网页的表现与内容分离！这样做的好处：高效率的开发与简单维护信息跨平台的可用性降低服务器成本；加快网页解析速度更良好的用户体验那么，CSS2.0从真正意义实现了设计代码与内容分离真正的表现与内容完全分离，代码可读性强，样式可重复应用五、css布局代码示例HTML代码：<!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/style1.css" rel="stylesheet" type="text/css" /></head><body><div id="container"><div id="header">头部</div><div id=“content”>主体</div><div id="footer">尾部</div></div></body></html>Css代码：* {font-family: Arial, Helvetica, sans-serif, "宋体";font-size: 12px;margin: 0px;text-align:center;}#container {width: 810px;margin:auto;background:#CCCCCC;}#header {height: 100px;width: 800px;padding:5px;background-color: #6699FF;}#content {height: 400px;width: 800px;padding:5px;background-color#FF9900;}#footer {width: 800px;height: 50px;padding:5px;background-color: #6699FF;}六、向web标准过度/HTML基础为什么要使用XHTML?XHTML是在HTML4.0基础上，用XML规则扩展得到的，建立XHTML的目的就是为了实现HTML向XML的过度。
用DIV+CSS实现网页布局及网站设计
学号：1407010222 姓名：叶亮班级：14计算机2班实验二用DIV+CSS实现网页布局及网站设计一、实验目的与要求1. 掌握HTML基本标签的应用2. 掌握CSS基本知识。
3. 掌握用DIV+CSS实现网页布局及网站设计。
二、实验内容1. 插入CSS样式表2. 建立DIV标签3. 构建网站主要内容三、源程序<!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><style type="text/css">.h {font-family: 黑体;font-size: 18px;font-style:normal ;}</style><style>p {text-indent: 20px;text-align: center;line-height: 150px;word-spacing: 10px;letter-spacing: 10px;text-decoration: underline;font-family:楷体;font-style: italic;font-size: 60px;color:darkgoldenrod;font-weight: bold;}p1 {font-family: 仿宋;font-size: 30px;color:blue;font-weight: bold;}#container {width :810px;margin :auto ;background-color:aquamarine;}#header {height:150px;background-image:url(/images/1.jpg);background-repeat:round;}#main {background-color:darkorange;height :400px;margin-bottom:5px;}#lside {background-color:darkkhaki;width :403px;float :left;height :395px;margin-right:5px;margin-top:5px;background-image:url(/images/b1.jpg);background-repeat:round;}#rside {background-color:darkseagreen;width :402px;float :right;height :395px;margin-top:5px;background-image:url(/images/b2.jpg);background-repeat:round;}#footer {height :390px;background-image:url(/images/b3.jpg);background-repeat:round;}</style></head><body background="images/b.jpg"><div id="container"><div id="header"><p>经典小说推荐</p></div><div id="main"><div id="lside"><p1>历史类</p1><table width="395"height="360"border="1"><tr><td><span class="h">《大秦帝国》 华夏历史上最强大帝国的崛起与没落。
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语言的网站设计语言。
网页设计与制作第8章 使用CSS+Div布局
8.2.3
关于CSS布局块
查看CSS布局外框、布局背景和布局框模型的方法是，选择菜 单命令【查看】/【可视化助理】/【CSS布局外框】或【CSS布局背 景】、【CSS布局框模型】。也可通过单击【文档】工具栏上的 （可视化助理）按钮，在弹出的下拉菜单中选择使用CSS布局块可 视化助理选项。
8.2.4
8.1.3
关于Div和Span
Div标签实际上是一种区隔标记，用来为HTML文档内大块（block-level） 的内容提供结构和背景。Div的起始标签和结束标签之间的所有内容都是用来 构成这个块的。在Div标记之间可以放置其他一些HTML元素，然后使用CSS 相关属性将Div容器标记中的元素作为一个独立对象进行修饰，不会影响其他 HTML元素。 大部分Div标记都可以使用Span标记代替，但Div标签是一个块级元素 （block），它的内容会自动地开始一个新行，而Span标签是一个行内元素 （inline），其前后不会发生换行。Div标记可以包含Span标记元素，但Span标 记一般不包含Div标记。换行是Div固有的惟一格式表现，Span没有固定的格 式表现。当对Span应用样式时，它才会产生视觉上的变化。如果不对Span应 用样式，那么Span元素中的文本与其他文本不会任何视觉上的差异。可以为 Span应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 Span 应用 样式。可以对Div通过 class 或 id 应用额外的样式，使其作用会变得更加有效。 实际上，在网页设计中，对于较大的块可以使用Div完成，而对于具有独特样 式的单独HTML元素，可以使用Span标记完成。
8.2 使用简单的CSS+Div布局
8.2.1 教学案例━━把握好你的生活 8.2.2 插入Div标签 8.2.3 关于CSS布局块 8.2.4 关于CSS排版理念
CSS+Div布局全
8.5.1 练习案例-电子产品
4．利用#menu样式为menu的<div>标签添加图像背景。在#nav标签 中，输入文字“公司介绍 产品展示 客户服务 人员招募 互动社区”， 并设置#nav样式，字体大小为16px，行高度为30px，颜色为#FFF。 5．设置#nav a:link，#nav a:visited样式属性，颜色为#FFF，文字装 饰为无，设置#nav a:hover样式属性，文字装饰为下划线，完成导 航条的制作。 6．在ID名称为info的<div>标签中，插入1*3表格，宽度为100%，将 三个图像分别插入到单元格中，设置#info样式背景为黑色。 素材所在位置：光盘/案例素材/ch08/练习案例-电子产品。 案例布局要求如图8-67所示，案例效果如图8-68所示。
无浮动
8.2.3 浮动方式
#box1 { height: 100px; width: 150px; background-color:
#F90; }
#box2 { height: 100px;
width: 200px; background-color: #C30; } #box3 { height: 100px; width: 250px; background-color: #3FF; }
8.1.2 盒子属性
在CSS样式中， 将盒子模型的 内边距、边框 和外边距，按 top、bottom、 left、right的四 个方向，分别 进行定义和设 置，描述盒子 属性。
8.1.2 盒子属性
例如，在网页中创建一个<div>标签，ID标识为 Div1，并在其中插入一个图像，代码如下：
#apDiv1 { position:absolute;
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
《网页设计与制作》教案-第10讲 布局技术之二—Div+CSS(二)
第10讲布局技术之二—Div+CSS（二）1.1教学目标：◆知识目标1.理解CSS盒子模式。
2.掌握CSS规则设置方法。
◆技能目标能够理解Div+CSS所体现的表现和内容相分离特性。
◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握CSS规则设置方法1.3 教学难点理解CSS规则的作用。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、CSS样式基本操作1．样式表的操作途径我们可以通过三种途径来创建、编辑CSS样式。
从主菜单选择“窗口/CSS样式”即可打开样式面板，如图3-35所示。
图3-35 CSS样式面板在CSS样式面板的右下角有四个功能按钮，分别为：●附加样式表：用于打开“链接外部样式表”对话框，选择要链接到或导入到当前文档中的外部样式表。
●新建CSS样式：打开“新建CSS 样式”对话框，创建新样式。
●编辑样式表：打开“CSS 样式定义”对话框。
编辑当前文档或外部样式表中的任何样式。
删除CSS样式：删除“CSS 样式”面板中的所选样式，并从应用该样式的所有元素中删除格式。
单击CSS样式面板右上角的菜单按钮，可以显示如图3-36所示的面板菜单。
通过该菜单，可以完成对CSS样式面板的大部分控制。
在CSS样式面板的列表区域中单击鼠标右键，也可以打开同样的菜单。
图3-36 面板菜单从主菜单选择“文本/CSS样式”命令，选择“新建”也可启动“新建样式表”对话框，如图3-37所示。
在页面空白处单击鼠标右键，在弹出的菜单中一样可以启动“新建样式表”对话框，如图3-38所示。
不管如何启动上述几个样式菜单或面板，他们都包含相同的几个命令：新建样式表、编辑样式表、链接样式表和导出样式表。
div+css布局教程 ppt课件
例子：body { font-family: Verdana, sans-serif; } 根据上面这条规则，站点的 body 元素将使用 Verdana 字体 通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这 些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）
但回到具体情况，不同的项目也应该根据具体情况对命名方式作出选择 ，不同方式的命名规则应该结合使用，大型网站，如淘宝，更适合使用语义 命名结合的方式，对于页面的样式修改，能快速敏捷地做出相应调整，对于 制作，能快速地拼凑，而大部分宣称型的单页，个人更推荐使用结构化的命 名方式，页面制作者能方便快速地完成页面，而不用多把时间陷近命名的考 虑中，
div+css布局教程
二、网页布局常用属性
其中“p”,我们称为选择器，指明我们要给“p”定义样式； 样式声明写在一对大括号“{}”中； Color和background称为“属性”，不通属性之间用“；”分隔 “#ff0000”和“#000000”是属性的值
div+css布局教程
几点值得注意的地组的选择器就可以分享相同的声明。用 逗号将需要分组的选择器分开。（有助于优化样式表，提高效率）
书写方式为： @import url(color.css); @imporp url(type.css);
引用的样式表必须出现在其他规则之前,样式表的头部,这样才能保证正常的 效果.
div+css布局教程
2、关于ID和Class命名的规范 总体思想：语义化的命名
div+css布局教程
个人推荐在开发过程中逐渐形成自己的命名规范， 如header/footer/main/hd/bd/nav/box/mode等，使用连字符“-” 如site-nav/quick-menu/secondaryContent/。
但回到具体情况，不同的项目也应该根据具体情况对命名方式作出选择 ，不同方式的命名规则应该结合使用，大型网站，如淘宝，更适合使用语义 命名结合的方式，对于页面的样式修改，能快速敏捷地做出相应调整，对于 制作，能快速地拼凑，而大部分宣称型的单页，个人更推荐使用结构化的命 名方式，页面制作者能方便快速地完成页面，而不用多把时间陷近命名的考 虑中，
div+css布局教程
二、网页布局常用属性
其中“p”,我们称为选择器，指明我们要给“p”定义样式； 样式声明写在一对大括号“{}”中； Color和background称为“属性”，不通属性之间用“；”分隔 “#ff0000”和“#000000”是属性的值
div+css布局教程
几点值得注意的地组的选择器就可以分享相同的声明。用 逗号将需要分组的选择器分开。（有助于优化样式表，提高效率）
书写方式为： @import url(color.css); @imporp url(type.css);
引用的样式表必须出现在其他规则之前,样式表的头部,这样才能保证正常的 效果.
div+css布局教程
2、关于ID和Class命名的规范 总体思想：语义化的命名
div+css布局教程
个人推荐在开发过程中逐渐形成自己的命名规范， 如header/footer/main/hd/bd/nav/box/mode等，使用连字符“-” 如site-nav/quick-menu/secondaryContent/。
网页设计与制作教程第6章 Div+CSS布局页面
习题6
习题6Байду номын сангаас
1．制作如图6-17所示的两列固定宽度型布局。 2．制作如图6-18所示的三列固定宽度居中型布局。 3．综合使用Div+CSS布局技术创建如图6-19所示的博客页面。
6.2 典型的CSS布局样式
6.2.1 两列布局样式
页面布局整体上分为上、中、下3个部分，即header区域、container区 域和footer区域。其中的container又包含mainBox（主要内容区域）和 sideBox（侧边栏），布局示意图如图6-4所示。
6.2 典型的CSS布局样式
6.2.1 两列布局样式
这里以最经典的三行两列宽度固定布局为例讲解最基础的固定分栏布局。 【演练6-3】三行两列宽度固定布局。
6.2 典型的CSS布局样式
6.2.1 两列布局样式 【演练6-4】使用高度自适应的方法进行三行两列宽度固定布局。
6.2 典型的CSS布局样式
6.2.2 三列布局样式
三列布局与两列布局非常相似，在处理方式上可以利用两列布局结构的 方式处理，如图6-8所示的就是3个独立的列组合而成的三列布局。
6.3 综合案例——制作光影世界最近活动局部页面
6.3.1 页面布局规划
通过成熟的构思与设计，光影世界最近活动局部页面的页面效果如图613所示，页面局部布局示意图如图6-14所示。
6.3 综合案例——制作光影世界最近活动局部页面
6.3.2 页面的制作过程
1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外 部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹css下新建一个名为style.css的样式表文件。 2．制作页面
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
6 实训——什锦果园水果沙拉页面的布局
6.2 页面的制作过程
1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹 images 和 css ，分别用来存放图 像素材和外部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹css下新建一个名为style.css的样式表文件。
2 CSS盒模型
2.2 盒模型的属性
3．内边距 内边距也称内补丁，位于对象边框和对象之间，包括了 4 项属性： padding-top （上内边距）、 padding-right （右 内 边 距 ） 、 padding-bottom （ 下 内 边 距 ） 、 padding-left （左内边距），内边距属性不允许负值。与外边距类似，内 边距也可以用 padding 一次性设置所有的对象间隙，格式也 和margin相似，这里不再一一列举。
2．盒模型的高度
盒模型的高度=上外边距（margin-top）+上边框（border-top）+上 内边距（padding-top）+内容高度（height）+下内边距（paddingbottom）+下边框（border-bottom）+下外边距（margin-bottom）
2 CSS盒模型
2.4 外边距的叠加
外边距合并是指当两个垂直外边距相遇时，它们将形成 一个外边距。合并后的外ห้องสมุดไป่ตู้距高度等于两个发生合并的外边 距的高度中的较大者。 1．两个元素垂直相遇时叠加 当两个元素垂直相遇时，第一个元素的下外边距与第二 个元素的上外边距会发生叠加合并，合并后的外边距的高度 等于这两个元素的外边距值的较大者。 2．两个元素包含时叠加 假设两个元素没有内边距和边框，且一个元素包含另一 个元素，它们的上外边距或下外边距也会发生叠加合并。
2 CSS盒模型
2.2 盒模型的属性
1．外边距 外边距也称为外补丁。外边距设置属性有： margin-top、 margin-right 、 margin-bottom 、 margin-left ，可分别设置， 也可以用margin属性，一次设置所有边距。 2．边框 常用的边框属性有 7 项： border-top 、 border-right 、 border-bottom 、 border-left 、 border-width 、 bordercolor 、 border-style 。其中 border-width 可以一次性设置 所有的边框宽度，border-color同时设置四面边框的颜色时， 可以连续写上4种颜色，并用空格分隔。上述连续设置的边框 都 是 按 border-top 、 border-right 、 border-bottom 、 border-left的顺序（顺时针）。
块级元素宽度不够时的状态
块级元素宽度不够且不同高度的浮动元素
4 盒子的浮动
4.2 清除浮动
在页面布局时，当容器的高度设置为 auto 且容器的内容 中有浮动元素时，容器的高度不能自动伸长以适应内容的高 度，使得内容溢出到容器外面导致页面出现错位，这个现象 称为浮动溢出。为了防止这个现象的出现而进行的CSS处理， 就叫清除浮动。
3 盒子的定位
3.4 相对定位与绝对定位的混合使用
相对定位与绝对定位的混合使用。 编写相应的 CSS 样式，生成的文件在浏览
器中显示的效果如图所示。
3 盒子的定位
3.5 固定定位
固定定位（position:fixed;）其实是绝对定位的子类别。
固定定位。为了对固定定位演示得更加清楚，将id="box1"的块级元素进行固定 定位，将id="box2"的块级元素的高度设置得尽量大，以便能看到固定定位的效 果。
3 盒子的定位
3.3 绝对定位
用“ position:absolute;”表示绝对定位，使用绝对定 位的对象可以被放置在文档中任何位置，位置将依据浏览器 左上角的0点开始计算。
绝对定位。继续使用上面的示例深入讨论，将id="box-1"的块级元素进行绝对 定位，向下移动 50px，向右移动 200px。编写相应的 CSS样式，生成的文件在 浏览器中显示的效果如图所示。
网页设计与制作教程
Div+CSS布局技术
1 Div布局理念 2 CSS盒模型 3 盒子的定位 4 盒子的浮动 5 CSS常用布局样式 6 实训——什锦果园水果沙拉页面的布局
1 Div布局理念
1.1 Div布局页面的优点
传统的HTML标签中，既有控制结构的标签（如<title> 标签和<p>标签），又有控制表现的标签（如<font>标签 和<b>标签），还有本意用于结构后来被滥用于控制表现的 标签（如<h1>标签和<table>标签）。页面的整个结构标 签与表现标签混合在一起。 相对于其他HTML继承而来的元素，Div标签的特性就是 它是一种块级元素，更容易被CSS代码控制样式。
4 盒子的浮动
4.1 浮动
向左浮动的元素。使用上面的示例继续讨论，本例页面的页 面布局如图左所示，所有元素向左浮动后的结果如图右所示。
4 盒子的浮动
4.1 浮动
空间不够时的元素浮动。使用上面的示例继续讨论，如果id=“box”的块级元 素宽度不够，无法容纳3个浮动元素box-1、box-2和box-3并排放置，那么部分浮 动元素将会向下移动，直到有足够的空间放置它们，本例页面的显示效果如图左 所示。如果浮动元素的高度彼此不同，那么当它们向下移动时可能会被其他浮动 元素“挡住”，如图右所示。
5.2 三列布局样式
三列布局在网页设计时 更为常用，如图所示。 对于这种类型的布局， 浏览者的注意力最容易 集中在中栏的信息区域， 其次才是左右两侧的信 息。
6 实训——什锦果园水果沙拉页面的布局
6.1 页面布局规划
页面布局的首要任务是弄清网页的布局方式，分析版式 结构，待整体页面搭建有明确规划后，再根据成熟的规划切 图。通过成熟的构思与设计，什锦果园水果沙拉局部内容的 页面效果如图左所示，页面局部布局示意图如图右所示。
2 CSS盒模型
2.5 案例——制作网络鞋城关于页的局部信息
使用盒模型技术修饰网络鞋城关于页的局部信息，通过设置 边框和边距美化页面，本例文件5-6.html在浏览器中显示的 效果如图下图所示。
2 CSS盒模型
网络鞋城页面顶部的布局，显示效果如图下图所示。
3 盒子的定位
3.2 静态定位
静态定位是 position 属性的默认值，即该元素出现在文 档的常规位置，不会重新定位。通常此属性可以不设置，除 非是要覆盖以前的定义。
6 实训——什锦果园水果沙拉页面的布局
6.2 页面的制作过程
2．制作页面 （1）style.css （2）sarad.html的网页文件
4 盒子的浮动
4.1 浮动
浮动（float）是使用率较高的一种定位方式。浮动元素 可以向左或向右移动，直到它的外边距边缘碰到包含块内边 距边缘或另一个浮动元素的外边距边缘为止。
语法：float : none | left |right
向右浮动的元素。本例页面的布局的初始状态如图左所示，元素box-1向右浮动 后的结果如图右所示。
1 Div布局理念
1.2 使用嵌套的Div实现页面排版
Div标签是可以被嵌套的，这种嵌套的Div 主要用于实现 更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的 关系。
2 CSS盒模型
2.1 盒模型的概念
盒模型将页面中的每个元素看做一个矩形框，这个框由 元素的内容、内边距（ padding ）、边框（ border ）和外边 距（margin ）组成，如图下图所示。对象的尺寸与边框等样 式表属性的关系，如图下图所示。
2 CSS盒模型
2.3 盒模型的宽度与高度
盒模型的宽度与高度是元素内容、内边距、边框和外边 距这4部分的属性值之和。 1．盒模型的宽度
盒模型的宽度=左外边距（margin-left）+左边框（border-left） +左内边距（padding-left）+内容宽度（width）+右内边距（paddingright）+右边框（border-right）+右外边距（margin-right）
静态定位。编写相应的CSS样式，生成的文件在浏览器中显示的效果如图 下图所示。
3 盒子的定位
3.2 相对定位 相对定位（ position:relative; ）指的是通过设置水平 或垂直位置的值，让这个元素“相对于”它原始的起点进行 移动。
相对定位 。使用上面的示例深入讨论，将 id=“box”的块级元素向下移动 50px， 向右移动50px。编写相应的CSS样式，生成的文件的显示效果如图下图所示。
语法：clear : none | left |right | both
清除浮动。
5 CSS常用布局样式
5.1 两列布局样式
许多网站都有一些共同的特点，即顶部放置一个大的导 航或广告条，右侧是链接或图片，左侧放置主要内容，页面 底部放置版权信息等，如图所示的布局就是经典的两列布局。
5 CSS常用布局样式