实验三DIV+CSS样式应用

2024年2月19日发(作者：)

实验名称 DIV+CSS样式应用

实验3 DIV+CSS样式应用

1 实验目的

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

2) 掌握使用CSS盒子模型浮动与定位的方法

3) 掌握DIV的使用方法；

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

2 实验内容及要求

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

导航区

列表区

页脚区

内容区

3 实验原理

浮动边框可以向左或向右移动，直到外边缘碰到包含框或另一个浮动框的边框为止。

通过float或 margin来让元素产生位置移动。

4 仪器与材料

安装有Windows7或以上操作系统的计算机，Dreamweaver

5 实验内容

5.1 CSS 布局入门

CSS 布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的 GIF 图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的 margin、padding、border 等属性来控制版块的间距。

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

#sample{ margin: 10px 10px 10px 10px; padding:20px 10px 10px 20px; border-top: #ccc 2px

solid; border-right: #ccc 2px solid; border-bottom: #ccc 2px solid; border-left: #ccc 2px solid;

background: url(./images/templatemo_) #FEFEFE no-repeat right bottom; color: #666;

text-align: center; line-height: 150%; width:60%;

}

说明如下：

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

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

间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距，如果都一样，可以缩写成"margin: 10px;"。如果边距为零，要写成"margin:

0px;"；

3) 注意：当值是零时，除了 rgb 颜色值 0%必须跟百分号，其他情况后面可以不跟单位"px"。margin 是透明元素，不能定义颜色；

4) padding 是指层的边框到层的内容之间的空白。和 margin 一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成"padding:0px"。单独指定左边可以写成"padding-left: 0px;"。padding 是透明元素，不能定义颜色；

5) border 是指层的边框，"border-right: #ccc 2px solid;"是定义层的右边框颜色为"#ccc"，宽度为"2px"，样式为"solid"直线。如果要虚线样式可以用"dotted"；

6) background 是定义层的背景。分 2 级定义，先定义图片背景，采用"url(../images/bg_)"来指定背景图片路径；其次定义背景色"#fefefe"。"no-repeat"指背景图片不需要重复，如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的

"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色 background: #fefefe；

7) color 用于定义字体颜色；

8) text-align 用来定义层中的内容排列方式，center 居中，left 居左,right 居右；

9) line-height 定义行高，150%是指高度为标准高度的 150%，也可以写作：

line-height:1.5 或者 line-height:1.5em，都是一样的意思；

10) width 是定义层的宽度，可以采用固定值，例如 500px，也可以采用百分比，象这里的"60%"。要注意的是：这个宽度仅仅指你内容的宽度，不包含 margin,border 和 padding。

下面是这个层的实际表现：

可以看到边框是 2px 的灰色，背景图片在右下没有重复，内容距离上和左边框 20px，内容居中。

5.2 CSS 盒子模型

盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。上面我们讲的 sample 层就是一个典型的盒子模型。要搞清楚 margin，

background-color，background-image， padding，content，border 之间的层次、关系和相互影响。

5.3 第一个 CSS 布局实例

和传统的方法一样，首先要在脑海里有大致的轮廓构想。用传统表格方法实现的布局，用 DIV 也可以实现。

1）

2）

body { margin:

0px; padding:

0px;

确定布局，这里我们采用三列布局方式作为示例。

定义 body 样式，先定义整个页面的 body 的样式,代码如下：

background: url(./images/ templatemo_) #fefefe no-repeat right bottom;

font-family: 'lucida grande','lucida sans unicode','宋体','新宋体',arial,verdana,sans-serif;

color: #666; font-size:12px; line-height:150%;

}

以上代码的作用定义了边框边距为 0；背景颜色为#FEFEFE，背景图片为

bg_，图片位于页面右下角，不重复；定义了字体尺寸为 12px；字体颜色为#666;行高 150%。 3）定义主要的 div 采用固定宽度的三列布局。分别定义左中右的宽度为 200:300:280，在 CSS 中如下定义：

/*定义页面左列样式*/

#left{ width:200px; margin: 0px; padding: 0px; background: #cdcdcd;

}

/*定义页面中列样式*/

#middle{ position: absolute; left:200px; top:0px; width:300px; margin: 0px; padding: 0px; background:

#dadada;

}

/*定义页面右列样式*/

#right{ position: absolute; left:500px; top:0px; width:280px; margin: 0px; padding: 0px; background:

#999999;

}

注意：定义中列和右列 div 都采用了 POSITION: absolute;，然后分别定义了 LEFT:200px;TOP:0px;和 LEFT:500px;TOP:0px;这是这个布局的关键，采用了层的绝对定位。定义中间列距离页面左边框 200px，距离顶部 0px；定义右列距离页面左边框 500px，距离顶部 0px；

这时候整个页面的代码是（替换为你的邮箱和姓名）：

"/TR/xhtml1/DTD/">

页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。如果希望高度是满屏的，需要使用自使用高度。

3）自适应高度

如果想在 3 列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐 3 列底部的问题。在 table 布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用 div 布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套 div，把三列放进一个 DIV 中，就做到了底部对齐。下

面是实现例子：

"/TR/xhtml1/DTD/">

大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？是因为我们在#header、#mainbox、#footer 中使用了以下属性：margin:0px auto;按照前面的说明，可以知道，表示上下边距为 0，左右为自动，因此该层就会自动居中了。如果要让页面居左，则取消掉 auto 值就可以了，因为默认就是居左显示的。通过 margin:auto 我们就可以轻易地使层自动居中了。

重点在于#mainbox 层嵌套了#menu、#sidebar、#content 三个层。当#content

的内容增加，#content 的高度就会增高，同时#mainbox 的高度也会撑开，#footer

层就自动下移。这样就实现了高度的自适应。另外值得注意的是：#menu 和#content 都是浮动在页面右面"FLOAT: right;"，#sidebar 是浮动在#menu 层的左面 "FLOAT: left;"，这是浮动法定位，还可以采用绝对定位来实现这样的效果。这个方法存在另一个问题，就是侧列#sidebar 的背景无法百分之百。一般的解决办法就是用 body 的背景色来填充满(不能使用#mainbox 的背景色，因为在

Mozilla 等浏览器中#mainbox 的背景色失效)。

5.4 动手试一试

1) 新建一个 html 页面；

2) 制作一个简单的如下图框架的首页，不需要填写具体内容，使用背景色标出区域即可。提示：可以借鉴 Dreamweaver 中提供“入门页面”。

导航区

列表区

页脚区

内容区

六、讨论及问题回答

盒子模型的结构是什么？

内容（CONTENT）、填充(PADDING)、边框(BORDER)、边界(MARGIN)。