第4章 使用CSS布局网页.ppt

文档介绍：网站建设技术——第4章使用CSS布局网页
内容概述
01
教学目标
02
实验
04
知识点讲解
03
本章通过具体案例,详细地介绍了CSS语言的基础知识。内容主要包括添加样式表的方法、CSS选择器的设置方法、盒子模型、文字、颜色和背景的设置方法以及多种页面布局的设置方法等。
BACK
NEXT
PREV
掌握添加CSS样式的方法;
掌握设置CSS选择器的方法;
掌握盒子模型的设置方法;
掌握盒子的浮动和定位的设置方法;
掌握文字、颜色和背景的设置方法;
掌握页面布局的方法。
二、教学目标
BACK
NEXT
PREV

使用CSS样式设计“网页设计教学”页面,页面效果如图所示。
三、知识点讲解
BACK
NEXT
PREV
知识解析
CSS基础
一、Web标准
二、XHTML
三、DOCTYPE声明
四、CSS简介
三、知识点讲解
BACK
NEXT
PREV
五、添加CSS的方法
嵌入样式表
内嵌样式表
链接外部CSS样式表(外部样式)
六、CSS选择器
选择器类型
CSS的继承性
注释
三、知识点讲解
BACK
NEXT
PREV
七、div和span
网页元素可以分为行内元素和块级元素两种添加起始标记。示例如下图所示。
三、知识点讲解
BACK
NEXT
PREV
教师演示操作过程
盒子模型
盒子模型(Box Model)是CSS中一个很重要的概念。它是用来描述一个元素是如何组成的。
三、知识点讲解
BACK
NEXT
PREV
浮动属性值
盒子的浮动与定位
盒子的浮动属性float
float 属性可以实现复杂页面的CSS布局。
none:元素在水平方向会自动伸展。
left:元素会向其父元素的左侧靠紧。
right:元素就会向其父元素的右侧靠紧。
BACK
NEXT
PREV