长春工业大学：《网页设计与制作》课程教学资源（PPT课件）第5章 Div+CSS布局技术

BUSINESS 个 第5章Div+CSS布局技术 主讲人：刘秦然 長春工堂大学 CCUT 经济管理学院 CHANGCHUN UNIVERSITY OF TECHNOLOGY

内容概览 iD布局理念 2CSS盒模型 3盒子的定位 盒子的浮动 5CSS常用布局样式 長春王主大孝ccUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

内 容 概 览 Div布局理念 CSS盒模型 盒子的定位 盒子的浮动 CSS常用布局样式

51DV布局理念 5.1.1Div布局页面的优点 传统的HM标签中,既有控制结构的标签(如标 签和标签),又有控制表现的标签(如标签和标签和< table标签)。页面的整个结构标签与表现 标签混合在一起。 相对于其他HTM继承而来的元素,Div标签的特性就是它 是一种块级元素,更容易被CSS代码控制样式, 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

5.1.1 Div布局页面的优点 传统的HTML标签中，既有控制结构的标签（如标 签和标签），又有控制表现的标签（如标签和 标签），还有本意用于结构后来被滥用于控制表现的标签 （如标签和标签）。页面的整个结构标签与表现 标签混合在一起。 相对于其他HTML继承而来的元素，Div标签的特性就是它 是一种块级元素，更容易被CSS代码控制样式。 5.1 Div布局理念

51Dv布局理念 5.1.2使用嵌套的Div实现页面排版 Diⅴ标签是可以被嵌套的,这种嵌套的Div主要用于实现 更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的 关系。 【演练5-1】未嵌套的Div容器 【演练5-2】嵌套的Div容器。 top container mailbox sidebox footer footer 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

5.1.2 使用嵌套的Div实现页面排版 Div标签是可以被嵌套的，这种嵌套的Div主要用于实现 更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的 关系。 【演练 5-1】未嵌套的Div容器。 【演练 5-2】嵌套的Div容器 。 5.1 Div布局理念

51Dv布局理念 演练5-1】未嵌套的Div容器。 此处显示id"tp"的内容 此处显示id"nain”的内容 此处显示id" footer"的内容 演练5-2】嵌套的Div容器。 此处显示id"top”的内容 此处显示id" mailbox”的内容 此处显示id" sideroκ"的内容 此处显示id" footer"的内容 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

【演练 5-1】未嵌套的Div容器。 5.1 Div布局理念 【演练 5-2】嵌套的Div容器

52css盒模型 5.2.1盒模型的概念 盒模型将页面中的每个元素看做一个矩形框,这个框由 元素的内容、内边距( padding)、边框( border)和外边距 ( margin)组成,如图5-3所示。对象的尺寸与边框等样式表 属性的关系,如图5-4所示。 T border边框 margin-top margin外边距 padding内边距 border-top Left:559 Content EAE:Right 元素 margin-botto Bottom Internet Explorer width 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

5.2.1 盒模型的概念 盒模型将页面中的每个元素看做一个矩形框，这个框由 元素的内容、内边距（padding）、边框（border）和外边距 （margin）组成，如图5-3所示。对象的尺寸与边框等样式表 属性的关系，如图5-4所示。 5.2 CSS盒模型

52css盒模型 5.2.2盒模型的属性 外边距 外边距也称为外补丁。外边距设置属性有: margin-top、 margin- right、 margin- bot tom、 margin-left,可分别设置, 也可以用 margin属性,一次设置所有边距。 2.边框 常用的边框属性有7项: border-top、 border-right、 border- bottom、 border-left、 border- width、 border color、 border- style。其中 border-width可以一次性设置所 有的边框宽度, border- color同时设置四面边框的颜色时, 可以连续写上4种颜色,并用空格分隔。上述连续设置的边框 都是按 border-top、 border- right、 border-bot tom border-left的顺序(顺时针)。 長春王主大孝ccUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

5.2.2 盒模型的属性 1．外边距 外边距也称为外补丁。外边距设置属性有：margin-top、 margin-right、margin-bottom、margin-left，可分别设置， 也可以用margin属性，一次设置所有边距。 2．边框 常用的边框属性有7项：border-top、border-right、 border-bottom 、 border-left 、 border-width 、 border￾color、border-style。其中border-width可以一次性设置所 有的边框宽度，border-color同时设置四面边框的颜色时， 可以连续写上4种颜色，并用空格分隔。上述连续设置的边框 都是按 border-top 、 border-right 、 border-bottom 、 border-left的顺序（顺时针）。 5.2 CSS盒模型

52css盒模型 5.2.2盒模型的属性 3.内边距 内边距也称内补丁,位于对象边框和对象之间,包括了4 项属性: padding-top(上内边距)、 padding-right(右内 边距)、 padding- bottom(下内边距)、 padding-left(左 内边距),内边距属性不允许负值。与外边距类似,内边距 也可以用 padding一次性设置所有的对象间隙,格式也和 margin相似,这里不再一一列举 長春工主大CCUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

5.2.2 盒模型的属性 3．内边距 内边距也称内补丁，位于对象边框和对象之间，包括了4 项属性：padding-top（上内边距）、padding-right（右内 边距）、padding-bottom（下内边距）、padding-left（左 内边距），内边距属性不允许负值。与外边距类似，内边距 也可以用padding一次性设置所有的对象间隙，格式也和 margin相似，这里不再一一列举。 5.2 CSS盒模型

52css盒模型 〔演练53】使用外边距( margIn)属性实现某个分区的缩进 及位置的居中。 ! DOCTYPE htm1外边距- WindoWs Internet Explorer "http://www.w3 无外边距的分区div。 设置外边距的分区div按上-右-下-左顺时针方向的外边距分别为 Opx 20px 20px 60 设置位置水平居中的分区div,是该div在块级元素中的水平居中

【演练5-3】使用外边距（margin）属性实现某个分区的缩进 及位置的居中。 5.2 CSS盒模型

52css盒模型 演练5-4】文字垂直居中效果。 文字垂直居中- Tindows Internet Explorer-o x tit1e>文字垂直居中 数学21+x 文件)编辑)查看Q收藏夹)工具〔)帮》 ☆收藏夹⑥6文字垂直居中 div( background-color: #ff6; width: 300pxi /*容器的宽度为300px*/ height: 200px; /大容器(文字所在行)的文字垂直居中 /大文字行高为 border:1pxso1id#999;/*边框为1px灰色实 文字垂直居中 長春王主大孝ccUT CHANGOHUN UNIVERSITY OF TECHNOLOGY

【演练5-4】文字垂直居中效果。 5.2 CSS盒模型