《网站建设与管理》课件 项目8 网页布局.pptxVIP

项目8网页布局网站建设与管理

项目概述ontents目录学习目标核心知识任务实施进阶提高C

PART1项目概述

掌握几种常用的CSS+Div网页布局方法，包括浮动布局、定位布局和多列布局，用CSS+DIV实现“导航条”、“家常菜推荐页”和“汽车之家”的布局。8.1项目概述

PART2学习目标知识目标技能目标

8.2成果目标了解常见的几种网页布局方法掌握浮动、定位、多列布局用CSS+DIV实现“导航条”、“家常菜推荐页”和“汽车之家”技能目标知识目标

PART3核心知识

8.3.1浮动布局8.3核心知识 浮动主要是通过float属性实现的。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

8.3.2定位布局8.3核心知识 定位布局包括绝对定位布局、相对定位布局和固定定位布局。定位布局主要由position属性决定，再根据上（top）、右（right）、下（bottom）、左（left）的值来判断元素的位置。position属性值的含义如表属性值描述staticHTML元素的默认值，即没有定位，元素框出现在正常的流中。Relative相对定位，以这个元素的本来应该在的初始位置为参照点，元素框相对参照点加或减一定的距离。Absolute绝对定位，元素框从文档流完全删除，有定位的祖先元素就是距离祖先元素的距离，没有就是距离浏览器的距离。Fixed固定定位，它是相对于整个浏览器视窗本身来定位的。相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。与文档流无关，不占据空间。

8.3.3多列布局8.3核心知识·Columns：column-width设置列的宽度，该宽度为网页缩到最窄时的宽度，column-count设置元素应该被分隔的列数，默认为auto。column-rule：column-rule-color设置列规则的颜色；column-rule-style设置列规则的样式；column-rule-width设置列规则的宽度。column-span:设置元素横跨的列数，默认为1。column-gap:设置列与列之间的间隔。column-fill:设置如何填充列。

PART4项目实施

8.4项目实施

PART5进阶提高

8.5进阶提高

在微信的通信录中直接进入企业号。也可以通过下载微信企业APP加入，一起体验课后延伸学习的过程进入“微加云学院”，选择课件内容再次学习、在线做练习题、考试。进入“企微云任务”，查看并完成本章学习任务，查看任务，领取任务，登记任务进展情况，方便教师随时查看学生任务的完成进度。进入“投票调研”“问卷星”，参与调查问卷互动，反馈教学效果。进入“教学论坛”，下载本章素材或对相关知识点发贴、回帖互动。进入“腾讯乐享”，通过知识库、问答、课堂、考试、活动、投票和论坛等核心应用，培训学习等多元化需求进入“快课学堂”，通过主页型企业培训应用进行在线学习交流。8.6课后延伸

谢谢再见