在素材页面中采用流动布局并结合盒子浮动的设置来实现两栏布局 采用冻结布局把页面布局锁定 采用凝结物布局来解决。这种设计锁定了页面中内容区的宽度，但它
把内容区放到浏览器的中间
教师演示操作过程
完成效果
PREV
BACK
NEXT
16
4.4 综合案例
——制作网上购物网站首页
使用Div+CSS，布局“手机电子商城”网上购物网站首页。
PREV
BACK
NEXT
4.4 布局与排版
冻结布局
凝结物布局
css布局
相对布局
绝对布局
PREV
BACK
NEXT
流动布局
CSS布局安庆美食网页面
页面需求
在素材页面中实现两栏布局 页面布局锁定 设置页面内容区显在浏览器的中间。
素材页面
PREV
BACK
NEXT
15
CSS布局安庆美食网页面
页面分析
PREV
BACK
NEXT
4.1使用CSS样式设计页面
使用CSS样式设计“网页设计教学”页面，页面效果如图所示。
PREV
BACK
NEXT
4.2 知识解析
4.2.1 CSS基础
一、Web标准 二、XHTML 三、DOCTYPE声明 四、CSS简介
PREV
BACK
NEXT
五、添加CSS的方法
嵌入样式表 内嵌样式表 链接外部CSS样式表（外部样式）
position 属性
可以实现页面元素的
1
定位。它规定了四种
定位方式，分别对应
2
于position属性的值。 3
static:标准流布局 absolute:绝对定位 relative:相对定位
4 fixed:固定定位
PREV
BACK
NEXT
4.2.4 文字、颜色和背景
一、文字 在CSS 中常见的字体(font) 属性有以下几种： font-family font-size font-weight font-style font-variant
PREVBACK源自NEXT4.2.3 盒子的浮动与定位
盒子的浮动属性float
float 属性可以实现复杂页面的CSS布局。
none：元素在水平方向会自动伸展。
浮
动
属
left:元素会向其父元素的左侧靠紧。
性
值
right:元素就会向其父元素的右侧靠紧。
PREV
BACK
NEXT
盒子的定位属性position
六、CSS选择器
选择器类型 CSS的继承性 注释
PREV
BACK
NEXT
七、div和span
网页元素可以分为行内元素和块级元素两种添加起始标记。示例 如下图所示。
教师演示操作过程
PREV
BACK
NEXT
4.2.2 盒子模型
盒子模型(Box Model)是CSS中一个很重要的概念。它是用来描 述一个元素是如何组成的。
教师演示操作过程
PREV
BACK
NEXT
实验四 布局企业网站首页
▪ 实验目的与要求 掌握运用CSS样式表进行页面布
局的技术。
▪ 实验内容 运用CSS样式表布局为企业网站
设计一个首页。
PREV
BACK
NEXT
18
PREV
BACK
NEXT
二、颜色 color (颜色)属性值的设置方式有三种： 十六进制值 RGB 码 颜色名称 三、背景 在CSS 中常见的背景(background) 属性有以下几种： background-color background d-image background-repeat background-attachment background-position
网站建设技术 ——第4章 使用CSS布局网页
内容概述 教学目标 知识点讲解
实验
本章通过具体案例，详细地介
绍了CSS语言的基础知识。内容 主要包括添加样式表的方法、 CSS选择器的设置方法、盒子模 型、文字、颜色和背景的设置 方法以及多种页面布局的设置 方法等。
PREV
BACK
NEXT
▪ 掌握添加CSS样式的方法； ▪ 掌握设置CSS选择器的方法； ▪ 掌握盒子模型的设置方法； ▪ 掌握盒子的浮动和定位的设置方法； ▪ 掌握文字、颜色和背景的设置方法； ▪ 掌握页面布局的方法。