《网页设计与制作》第7章 .pdfVIP

《网页设计与制作》

主讲人：XXX

邮箱：XXXXXXXXXXX

电话：XXXXXXXXXXXX

每讲一语

Allofthevictory,andconqueroneselfofvictory,

areinsignificant.Allthefailures,andloseyour

failure,arenegligible

.

所有的胜利，与征服自己的胜利比起来，都是微不足道。

所有的失败，与失去自己的失败比起来，更是微不足道

引导

书本内容

解读

第7章CSS网页布局

一、CSS盒子模型

（重点）

学习目标二、CSS定位属性

三、CSS布局实现

7.1CSS盒子模型

（重点）

7.1.1盒子模型概念

CSS盒子模型图1

7.1.1盒子模型概念

CSS盒子模型图2

7.1.1盒子模型概念

CSS盒子模型图3

7.1.1盒子模型概念

7.1.1盒子模型概念

所以说由“盒子”堆出来的网页版面

7.1.2盒子模型属性

1.盒子内外边距属性

7.1.2盒子模型属性

2.盒子边框属性

7.1.2盒子模型属性

2.盒子背景属性

功能语法

背景Background：颜色图片平铺方式固定方式位置

背景颜色background-color:#ccc;

背景图像background-image:url(image/pic.jpg)即就是背景图像的位置或者

全称

背景图像的重复方background-repeat:{repeat、no-repeat、repeat-x、repeat-y}

式

背景图像的位置background-position:top(left、center、right)、center(left、

center、right)，bottom(left、center、right),用像素精确定位横

向与纵向：100px200px

背景图像的依附方background-attachment:[scoll、fixed]，IE6不支持这个效果，但

式是可以在html和body两个元素里面控制

7.1.3元素类型与转换

我们在布局页面的时候，会将HTML标签（元素）分成两

种，块状元素和内联元素。我们平时用到的div和p就是块状

元素，链接标签a是内联元素，可以通过css修改元素的类型。

1、块状元素：{display：block}使宽高起作用，加在内联里面

一般是其他元素的容器，可容纳内联元素和其他块状元素，

块状元素排斥其他元素与其位于同一行，宽度（width）和高

度（height）起作用，常见块状元素为div，p，body，h1-h6等。

（很霸道，能设置宽和高，