CSSDIV布局.ppt

相关回顾
有哪3种引入css样式表的方式?
1)外部样式表
<link rel="stylesheet" type="text/css" href="" />
2)内嵌样式表
<style type="text/css">
3)内联样式表
<p style="color:red" >
相关回顾
样式表中有哪些选择器?
元素选择器
ID选择器
类选择器
……
预习检查
1、?
2、DIV中的定位方式有哪几种?
3、设置和清除DIV浮动分别使用什么属性?
结构标准、表现标准、行为标准
绝对定位(position=“absolute”)、相对定位(position=“relative”)、
固定定位(position=“fixed”)
float:设置DIV浮动方式 clear:清除DIV浮动
预习检查
4、盒子模型的有那些属性?
5、常见的网页布局有哪些?
内容(content)、填充(padding)、边框(border)
和边界(margin)这些属性称为盒子模型。
1、一列固定宽度
2、一列宽度自动适应
3、一列固定宽度居中
4、二列固定宽度
5、二列宽度自动适应
6、二列左列固定右列宽度自适应
7、二列固定宽度居中
8、三列浮动中间列宽度自动适应
本章任务
DIV的各种定位方式
DIV的浮动
绝对定位
相对定位
固定定位
左浮动
本章任务
用CSS+DIV的布局完成如图功能
本章目标
了解什么是Web标准

掌握DIV三种定位方式
掌握DIV浮动的使用
了解什么是盒模型
掌握常见的网页布局方式
8
structure([´strʌktʃə]结构, 构造):________________________
presentation([´prezən´teiʃən]呈现;显示):________________
behavior([bɪ´heɪvjə]行为,举止):__________________________
extensible([ik´stensib(ə)l]可展开的,可扩张的):___________
document([´dɔkjumənt]文档,文件):________________________
object([´ɔbdʒikt]实体,实物):____________________________
model([´mɔdəl]模型):_____________________________________
position([pə´ziʃən]方位, 位置):__________________________
absolute([´æbsəlu:t]绝对的, 完全的):____________________
relative([´relətiv]相对的; 比较的):______________________
fixed([fɪkst]固定的):____________________________________
both([bəuθ]二者):_______________________________________
本章单词
什么是Web标准
Web标准,即网站标准
目前通常所说的Web标准一般指网站建设采用基于XHTML的网站设计语言,Web标准中典型的应用模式是“CSS+DIV”
Web标准不是某一个标准,而是一系列标准的集合

网页的构成
网页人
数据(Data)
结构(Structure)
表现(Presentation)
行为(Behavior)
网页的标准主要分为三个部分
结构标准语言
表现标准语言
行为标准语言
肉
骨架
漂亮的衣服
走路、吃饭、睡觉