实验2：DIV+CSS布局实验 - 副本.pdfVIP

实验2DIV+CSS布局

1实验目的

1)了解页面常用布局结构；

2)掌握DIV的使用方法；

3)掌握DIV+CSS布局的基本方法；

2实验内容

1)制作一个简单的如下图框架的首页，不需要填写具体内容，使用背景色标

出区域即可；

导航区

列内容区

表

区

页脚区

3实验要求

1)了解页面常用布局结构；

2)掌握DIV的使用方法；

3)掌握CSS布局的基本方法；

1

4实验步骤

4.1CSS布局入门

CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，

通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则

采用层(div)来定位，通过层的margin、padding、border等属性来控制版块的间距。

定义DIV，分析一个典型的定义div例子：

#sample{

margin:10px10px10px10px;

padding:20px10px10px20px;

border-top:#ccc2pxsolid;

border-right:#ccc2pxsolid;

border-bottom:#ccc2pxsolid;

border-left:#ccc2pxsolid;

background:url(./images/templatemo_ads.jpg)#FEFEFEno-repeatrightbottom;

color:#666;

text-align:center;

line-height:150%;

width:60%;

}

说明如下：

1)层的名称为sample，在页面中用就可以调用这个样式；

2)margin是指层的边框以外留的空白，用于页边距或者与其它层制造一个

间距。间距。分别代表分别代表上右下左上右下左顺时针方向)四个边距，

如果都一样，可以缩写成可以缩写成。如果边距为零，要写成要写成要写成

；

3)注意：当值是零时，除了rgb颜色值0%必须跟百分号，其他情况后面可

以不跟单位以不跟单位。margin是透明元素，不能定义颜色；

4)padding是指层的边框到层的内容之间的空白。和margin一样，分别指定

上右下左边框上右下左边框到内容到内容的距的距离离。如果都一样，可以缩写成。如果都一样，可以缩写成。单

独独指定左边可以写成指定左边可以写成。padding是透明元素，不能定义

颜色；

5)border是指层的边框，是指层的边框，是定义层的右边框颜

2

色为色为，宽度为，宽度为，样式为，样式为直线。如果要虚线样式可以用直线。如果要虚线样式可以用

；

6)background是定义层的背景。分2级定义，先定义图片背景，采用级定义，先定义图片背景，采用

来指定背景图片路径；其次定义背景色来指定背景图片路径；其次定义背景色

。。