美化我的网页-cssdiv布局页面教案

（2）在#container 块中写入div 的基本结构，将页面层容器文字替换为如下代码，如图3—2所示：

（3）选择“窗口→CSS 样式”命令或按【shift+f11】组合键打开“CSS样式”面板，如图3—3所示，

◆ 图3—3“CSS样式”面板

单击“CSS样式面板右下方”的“新建CSS规则”按钮，打开新建CSS规则对话框。在选择器类型中选择“标签（重新定义html元素）“，在选择器名称“文本框中输入”body”,在”规则定义“项中选择”仅限该文档“，如图3—4所示，单击”确定“按钮，弹出”body的CSS规则定义“对话框，如图3—5 所示

◆ 图3—4 新建CSS规则对话框

◆ 图3—5 新建CSS规则对话框

在body的CSS规则定义对话框的分类列表中选择方框，设置“填充“全部为0，边界全部为0，设置完成后单击确定按钮。视图如图3—6所示。

（4）定义#container 块的样式。单击“CSS样式面板“右下方的“新建CSS规则”按钮，打开“新建CSS规则”对话框。在选择器类型中选择“复合内容（基于选择的内容）”，在选择器名称文本框中输入“#container”，在“规则定义”项中选择“仅限于该文档”，如图3—7所示，单击确定按钮，弹出“#container的CSS规则定义对话框。

◆ 图3—7 新建CSS规则对话框

在“#container的CSS规则定义对话框中的分类列表框中选择方框选项，设置padding全部为0，margin的left为-350ＰＸ，如图３－８所示分类列表框中选择定位选项，设置ｐｏｓｉｔｉｏｎ为ｒｅｌａｔｉｖｅ，ｌｅｆｔ为５０％，如图３－９所示，设置完成后，单击确定按钮，添加＃ｃｏｎｔａｉｎｅｒ样式后的拆分视图如图３－１０所示。

图３――８“＃ｃｏｎｔａｉｎｅｒ的ＣＳＳ规则定义”对话框中的方框选项设置

图３－９“＃ｃｏｎｔａｉｎｅｒ的ＣＳＳ规则定义”对话框中的“定位”选项设置

图３－１０ 添加＃ｃｏｎｔａｉｎｅｒ样式后的拆分视图 4、充实内容

（1） 在banner层中插入图片并编辑CSS样式表。

① 在“设计”视图中将“横幅图片”文字删除。

② 选择“插入→图像”命令或按【ctrl+alt+I】组合键，打开“选择图像源文件”对话框，选择“images”文件夹中的banner.gif,单击“确定”按钮。 ③参照步骤2（4），新建#banner的CSS样式表，在“#banner的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding” 全部值为0，“margin”的全部为0，如图3—11所示。设置完成后，单击“确定”按钮，完善banner层后的“拆分”视图如图3-12所示。

◆ 图3—11 #banner的CSS规则定义对话框