2018网页设计与制作教程(div+css布局技术)

3 盒子的定位
3.4 相对定位与绝对定位的混合使用
相对定位与绝对定位的混合使用。 编写相应的 CSS 样式，生成的文件在浏览
器中显示的效果如图所示。
3 盒子的定位
3.5 固定定位
固定定位（position:fixed;）其实是绝对定位的子类别。
固定定位。为了对固定定位演示得更加清楚，将id="box1"的块级元素进行固定 定位，将id="box2"的块级元素的高度设置得尽量大，以便能看到固定定位的效 果。
外边距合并是指当两个垂直外边距相遇时，它们将形成 一个外边距。合并后的外边距高度等于两个发生合并的外边 距的高度中的较大者。 1．两个元素垂直相遇时叠加 当两个元素垂直相遇时，第一个元素的下外边距与第二 个元素的上外边距会发生叠加合并，合并后的外边距的高度 等于这两个元素的外边距值的较大者。 2．两个元素包含时叠加 假设两个元素没有内边距和边框，且一个元素包含另一 个元素，它们的上外边距或下外边距也会发生叠加合并。
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）
4 盒子的浮动
4.1 浮动
向左浮动的元素。使用上面的示例继续讨论，本例页面的页 面布局如图左所示，所有元素向左浮动后的结果如图右所示。
4 盒子的浮动
4.1 浮动
空间不够时的元素浮动。使用上面的示例继续讨论，如果id=“box”的块级元 素宽度不够，无法容纳3个浮动元素box-1、box-2和box-3并排放置，那么部分浮 动元素将会向下移动，直到有足够的空间放置它们，本例页面的显示效果如图左 所示。如果浮动元素的高度彼此不同，那么当它们向下移动时可能会被其他浮动 元素“挡住”，如图右所示。
语法：clear : none | left |right | both
清除浮动。
5 CSS常用布局样式
5.1 两列布局样式
许多网站都有一些共同的特点，即顶部放置一个大的导 航或广告条，右侧是链接或图片，左侧放置主要内容，页面 底部放置版权信息等，如图所示的布局就是经典的两列布局。
5 CSS常用布局样式
块级元素宽度不够时的状态
块级元素宽度不够且不同高度的浮动元素
4 盒子的浮动
4.2 清除浮动
在页面布局时，当容器的高度设置为 auto 且容器的内容 中有浮动元素时，容器的高度不能自动伸长以适应内容的高 度，使得内容溢出到容器外面导致页面出现错位，这个现象 称为浮动溢出。为了防止这个现象的出现而进行的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代码控制样式。
2．盒模型的高度
盒模型的高度=上外边距（margin-top）+上边框（border-top）+上 内边距（padding-top）+内容高度（height）+下内边距（paddingbottom）+下边框（border-bottom）+下外边距（margin-bottom）
2 CSS盒模型
2.4 外边距的叠加
2 CSS盒模型
2.5 案例——制作网络鞋城关于页的局部信息
ቤተ መጻሕፍቲ ባይዱ
使用盒模型技术修饰网络鞋城关于页的局部信息，通过设置 边框和边距美化页面，本例文件5-6.html在浏览器中显示的 效果如图下图所示。
2 CSS盒模型
网络鞋城页面顶部的布局，显示效果如图下图所示。
3 盒子的定位
3.2 静态定位
静态定位是 position 属性的默认值，即该元素出现在文 档的常规位置，不会重新定位。通常此属性可以不设置，除 非是要覆盖以前的定义。
6 实训——什锦果园水果沙拉页面的布局
6.2 页面的制作过程
2．制作页面 （1）style.css （2）sarad.html的网页文件
3 盒子的定位
3.3 绝对定位
用“ position:absolute;”表示绝对定位，使用绝对定 位的对象可以被放置在文档中任何位置，位置将依据浏览器 左上角的0点开始计算。
绝对定位。继续使用上面的示例深入讨论，将id="box-1"的块级元素进行绝对 定位，向下移动 50px，向右移动 200px。编写相应的 CSS样式，生成的文件在 浏览器中显示的效果如图所示。
2 CSS盒模型
2.2 盒模型的属性
3．内边距 内边距也称内补丁，位于对象边框和对象之间，包括了 4 项属性： padding-top （上内边距）、 padding-right （右 内 边 距 ） 、 padding-bottom （ 下 内 边 距 ） 、 padding-left （左内边距），内边距属性不允许负值。与外边距类似，内 边距也可以用 padding 一次性设置所有的对象间隙，格式也 和margin相似，这里不再一一列举。
5.2 三列布局样式
三列布局在网页设计时 更为常用，如图所示。 对于这种类型的布局， 浏览者的注意力最容易 集中在中栏的信息区域， 其次才是左右两侧的信 息。
6 实训——什锦果园水果沙拉页面的布局
6.1 页面布局规划
页面布局的首要任务是弄清网页的布局方式，分析版式 结构，待整体页面搭建有明确规划后，再根据成熟的规划切 图。通过成熟的构思与设计，什锦果园水果沙拉局部内容的 页面效果如图左所示，页面局部布局示意图如图右所示。
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的顺序（顺时针）。
6 实训——什锦果园水果沙拉页面的布局
6.2 页面的制作过程
1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹 images 和 css ，分别用来存放图 像素材和外部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹css下新建一个名为style.css的样式表文件。
4 盒子的浮动
4.1 浮动
浮动（float）是使用率较高的一种定位方式。浮动元素 可以向左或向右移动，直到它的外边距边缘碰到包含块内边 距边缘或另一个浮动元素的外边距边缘为止。
语法：float : none | left |right
向右浮动的元素。本例页面的布局的初始状态如图左所示，元素box-1向右浮动 后的结果如图右所示。
静态定位。编写相应的CSS样式，生成的文件在浏览器中显示的效果如图 下图所示。
3 盒子的定位
3.2 相对定位 相对定位（ position:relative; ）指的是通过设置水平 或垂直位置的值，让这个元素“相对于”它原始的起点进行 移动。
相对定位 。使用上面的示例深入讨论，将 id=“box”的块级元素向下移动 50px， 向右移动50px。编写相应的CSS样式，生成的文件的显示效果如图下图所示。