《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块9 使用DIV+CSS布局页面.pptx

模块九使用DIV+CSS布局页面《HTML5+CSS3任务驱动教程》

目录任务一任务二任务三网页中的图文混排网页中的全图排版多行多列式布局本模块任务安排：

任务描述任务1网页中的图文混排在现代网页中，纯文字的网页显得过于单调，为吸引用户浏览，通常在文字中会插入适当的相关图片，以更好地展现要表达的意思。在传统的表格式布局中，往往通过插入一个表格，再在表格中插入图片，并对表格应用align属性来控制图片居中、居左还是居右来显示。而本任务中利用块状元素的盒子模型特性，应用CSS块状元素的更多属性，实现更多图文混排效果。任务1浏览效果如图9-1所示。

引入知识点任务1网页中的图文混排9.1CSS盒子模型9.2CSS浮动与定位

任务1网页中的图文混排9.1CSS盒模型

任务1网页中的图文混排9.1CSS盒模型1．外边框margin可以单独改变元素的上、下、左、右边距（顺时针）。也可以一次改变所有的属性。外边距设置属性有margin、margin-top、margin-bottom、margin-right、margin-left。2．边框元素外边距内就是元素的边框（border）,每个边框有3个方面：宽度、样式，以及颜色。常用的边框属性有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的顺序（顺时针）。

任务1网页中的图文混排9.1CSS盒模型3．内边距元素的内边距在边框和内容区之间为paddingpadding属性与外边距类似，格式也大致相同，可以单独设置四内边距，也可使用padding一次性设置4．CSS3圆角在CSS3之前，要实现圆角的效果主要通过图片辅助实现，实现起来不是很方便，使用CSS3的border-radius很方便实现圆角边框，但要注意部分旧版本的浏览器不直接CSS3的属性border-radius和前面介绍的border的参数个数和用法基本相同

任务1网页中的图文混排9.2CSS浮动与定位float是CSS样式中的布局属性，float属性的left和right值分别能够让元素向左和向右浮动。比如当元素向左浮动之后，对象的右侧将清空出一块区域，以便让剩下的文档元素能够贴在右侧。利用这个特性可以方便地设计出需要的块状元素排版布局效果。元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性。clear属性指定元素两侧不能出现浮动元素，主要有三个属性值：both、left、right，分别表示清除两边的浮动、清除元素左边的浮动、清除元素右边的浮动。采用position:absolute;之后，对象便开始进行绝对定位，绝对定位主要通过设置对象的top、right、bottom和left四个方向的边距值来实现。一旦对象被设置绝对定位，它就完全脱离了文档流与浮动模型，独立于其他对象而存在使用position:relative;进行相对定位，通过left和top来设置偏离原来位置左侧和上侧的距离。

任务1网页中的图文混排任务实现（1）创建一个HTML5页面，使用合适的标记对网站内容进行结构定义；（2）根据CSS盒子模型原理对网页进行布局设置，对图片进行合适的定位，在编写CSS代码之前先将需要用到的图片保存于网站目录中的images文件文件夹中，本项目主要采用类选择器、后代选择器（也可使用子元素选择器）编写出CSS代码；（3）使用内部样式表的形式将所写CSS应用于该网页。

任务描述任务2网页中的全图排版网页中全是图片的排版布局也不少见，图片排版常被用在相册类、产品展示类的网页中，这类页面往往有大量的图片在同一页中进行展示，使用CSS布局进行全图排版的核心在于，对浮动定位的控制，并且具有较好的灵活性。对于具有相同尺寸的图片进行排版，用CSS进行浮动定位是比较好控制的，若对于各个图片的尺寸规格不相同的图片进行直接排版，也可以采用流式布局，使图片错落排列。网站的图片新闻，采用了相同大小的图片，此时只需要设置好一张图片的样式，其他图片用相同的元素进行设置并产生浮动即可，外层元素的整体宽度也很容易通过盒模型计算得知。

引入知识点任务2网页中的全图排版9.3