CSS+DIV网页布局实验：上中下与左中右布局实践.pdfVIP

实验七CSS+DIV

学号：112208206112：

【实验目的】

掌握网页中CSS+DIV布局技术。

【实验要求】

1、掌握CSS+DIV”上中下”布局操作；

2、掌握CSS+DIV”左中右”布局操作。

【实验内容与步骤】

用素材“练习案例-电子产品”进练习CSS+DIV“上中下”布局的方法,最终效果参考“练习案例-

最终效果电子产品”。

1、为“练习案例-电子产品”创建相应站点。

2、根据buju.html布局要求创建index.html。

3、在ID名称为header，banner和footer的3个div中，直接相应图像。

4、在ID名称为menu的div中，嵌入名称为navi的div，menu中的图像，通过在

#menu样式中添加背景图像。

5、在navi的div中，输入文字“公司介绍产品展示客户服务人员招募互动社区”，并

设置#navi样式的属性，宽度：450px，高度：34px，左外边距450px，字体大小14px，行高度：

30，颜色：#FFF。

6、在ID名称为info的div中，3个图像，中间用空格隔开，设置#info样式添加黑色

背景。

利用素材“练习案例-装修公司”练习CSS+DIV”左中右”布局的方法，最终效果参考“练习案例

-最终效果装修公司”。

1、为“练习案例-装修公司”创建相应站点。

2、在ID名称为menu和footer的2个div中，直接相应图像。

3、设置页面属性body背景为#CCC，边距为0，字体大小12px，文字颜色#999。#container样式背

景为白色。

4、#info1样式属性的左右内边距分别为85px；#info2样式属性的内边距为10；#info3样式属性

的左右内边距分别为10px，上部内边距为70px。

5、标题样式.text1属性，文本大小30px，颜色为#451B08，居中；副标题样式.text2属性，文本

大小18px；info1中文本样式.text3属性，文本大小14px，区块显示block，下部内边距5px，

下部边框为实线，宽度1px，颜色#999，上下外边距为20px。

【实验心得与体会】

在本次实验学会了CSS+DIV的布局操作。