前端网页设计 教学课件 杜黎强 第6次课.pdfVIP

第6次课教学内容及实施环节 项目准备：任务4 使用DIV+CSS标准布局网页 子任务3 使用浮动属性布局网页对象 教学导入 第5次课教学回顾 第5次课任务实施结果检查 教学实施 任务实施准备页检查 知识点讲解 任务实施 请大家完成本次课课中页：任务4-子任务3实施记录.doc 分发本次课所用文件 项目准备-任务4–子任务3-任务实施记录.doc 项目准备-任务4–子任务3-任务实施总结.doc 项目1-任务1(1)实施准备页.doc 知识点：1、CSS+DIV 网页布局的常见问题 CSS“容器”属性 left CSS“容器”属性 CSS的容器属性包括边距、边框、填充距和图文混排 (宽度、高度、浮动、清除)等属性。 边距属性 提问：还可以用哪种方 法设置边距？ margin:20 30 30 36; margin 设置四周边距 顺序：上、右、下、左 CSS“容器”属性 边框属性 border复合属性：使四条边框的属性值一样 提问： 有何区别？ CSS“容器”属性 填充距属性：填充距指的是文本边框与文本之间的距离。 Padding 设置四周填充距 顺序：上、右、下、左 填充据使用实例 填充据使用前 填充据使用后 知识点：2、CSS浮动属性补充说明 float 属性值：left | right | none 默认值：none 适用于：所有元素 使用float 元素可以使文字环绕在一个元素的四周。当属 性值是right 或left 时，该元素就会相应地浮动在对象的 右边或左边。 clear 属性值：none | left | right | both 默认值：none 适用于：所有元素 这个属性是与float 有关的，它可以指定在一个元素的某一边是否允 许有环绕的文字（或其它对象）出现。如果指定属性值是“right”， 那么该元素右侧的所有空间都不会放进任何对象。如果属性值是 “none”，那么该元素四周都有对象环绕，即为默认属性值。 任务实施：根据浮动属性用法，做如图所示网页布局的设计 图像、文本素材可自定义 课后作业 1、完成第6次课项目准备-任务4–子任务3-任务实施记录.doc、项目准备-任务4-子 任务3实施总结和第7次课项目1-任务1(1) 实施准备页 2、各小组确定：项目1“班级网站”主题 上传: FTP:///up/ 第3周作业 注意：作业文件夹一定要按命名规则命名