中职 网页设计与制作案例教程第10章 .pptx

中职 网页设计与制作案例教程第10 章 工信版第10 章 CSS 标准流布局WEB310.1 基础项目：制作“谷穗儿机构”网页10.2 知识库：标准流的概念及注意事项10.3 提高项目：制作“创优翼UI 设计学院”网页10.4 拓展项目：制作“简历工厂”网页目录WEB10.1 基础项目：制作“谷穗儿机构”网页4WEB10.1 基础项目：制作“谷穗儿机构”网页5（1）掌握标准流的基本概念。（2）能够对整个页面进行HTML结构设计。（3）能 够 让 页 面 整 体 居 中 显 示，并 对 页 面 整 体 及 各 局 部 的 大 小进行控制。知识技能目标WEB10.1.1 对页面进行整体布局6 页头部分nav 正文部分content页脚部分footerWEB10.1.2 制作页头部分7WEB10.1.3 制作内容部分8WEB10.1.4 制作页脚部分9WEB1010.2 知识库：标准流的概念及注意事项什么是标准流布局网页结构元素都没有被添加CSS定位（position）或浮动（float）属性，而像流水一样自上而下或自左而右分布的网页布局模式就称为标准流或文档流。!WEB1110.2 知识库：标准流的概念及注意事项标准流布局中垂直外边距的合并问题外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。!12情况（一）标准流布局中垂直外边距的合并问题对上面的结构定义如下样式divwidth:100p x;height:100p x;.t opmar gin-bott om:50p x;b ack gr ound:purple;.bott ommar gin-t op:20p x;b ack gr ound:pink;在标准流中上下两个盒子的外边距合并，即上盒子的mar gin-bott om 会与下盒子的mar gin-t op合并为两者之间的最大值。代 码网 页 效 果13情况（二）标准流布局中垂直外边距的合并问题一个父盒子包含一个子盒子，当父盒子没有设置bor der 和p adding 时，子盒子设置的上边距不会起作用。代 码网 页 效 果.fatherwidth:200p x;height:200p x;b ack gr ound:pink;.sonwidth:100p x;height:100p x;b ack gr ound:purple;mar gin-lef t:50p x;mar gin-t op:25p x;14情况（二）标准流布局中垂直外边距的合并问题一个父盒子包含一个子盒子，当父盒子没有设置bor der 和p adding 时，子盒子设置的上边距不会起作用。代 码网 页 效 果为.father 添加下面代码p adding:10p x;标准流布局中垂直外边距的合并问题标准流布局中垂直外边距的合并问题!注意只有标准文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。10.3 提高项目：制作“创优翼UI 设计学院”网页WEB10.4 拓展项目：制作“简历工厂”网页18如WEB