收藏

下载资源 加入VIP,免费下载

第1页 / 共10页

第2页 / 共10页

第3页 / 共10页

第4页 / 共10页

第5页 / 共10页

页面主体

页面的底部

（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ＰＸ，如图３－８所示分类列表框中选择定位选项，设置ｐｏｓｉｔｉｏｎ为ｒｅｌａｔｉｖｅ，ｌｅｆｔ为５０％，如图３－９所示，设置完成后，单击确定按钮，添加＃ｃｏｎｔａｉｎｅｒ样式后的拆分视图如图３－１０所示。

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

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

◆图3—12完善banner层后的拆分视图

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

1在“设计”视图中将“侧边栏”文字删除。

2选择“插入→图像”命令或按【ctrl+alt+I】组合键，打开“选择图像源文件”对话框，插入“图像”，在”选择图像源文件“对话框中选择“images”文件夹中的selfpic.jpg和selfpic2.jpg,单击“确定”按钮。

3分别在插入图像下方输入leftbar.txt中的文字，如图3-13所示

◆图3—13在leftbar层中插入图片和文字后的拆分视图

4参照步骤2（4），新建#leftbar和#leftbarp的CSS样式表。

新建#leftbar的CSS样式表，在#leftbar的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置‘width“为150px,”float”为left，“padding”的值分别为20px,0，30px,0,“margin”的全部为0，在分类列表框中选择“类型”选项，设置“font-size”为12px;在分类列表框中选择”区块”选项，设置”text-align”为center.设置完成后，单击“确定”按钮。

新建#leftbarp的CSS样式表，在#leftbar的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding”的left值为12px,“padding”的right值为30px,设置完成后，单击“确定”按钮。

添加#leftbarp和#leftbar样式后的“拆分”视图如图3-14所示。

◆图3—14添加##leftbar和#leftbarp样式后的拆分视图

（2）在content层中插入文字并编辑CSS样式表

1在“设计”视图中将“页面主体”文字替换成content.txt,并编排格式，如图3-15所示。

◆图3—15在content层中插入文字后的“拆分”视图

2参照步骤2（4），新建#content、#contentp和#contenth4的CSS样式表。

新建#content的CSS样式表，在#content的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置‘width“为550px,”float”为left，“padding”的值分别为20px,0，30px,0,“margin”的全部为0，在分类列表框中选择“类型”选项，设置“font-size”为12px;在分类列表框中选择”区块”选项，设置”text-align”为center.分类列表框中选择背景选项，设置“background-images”为”images/bg1.jpg,”background-repeat”为no-repeat,”background-position（x）”为right，”background-position（y）”为bottom,设置完成后，单击“确定”按钮。

新建#contentp和#contenth4的CSS样式表，在CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding”的left值为20px,“padding”的right值为15px,设置完成后，单击“确定”按钮。

添加#content#contentp和#contenth4样式后的“拆分”视图如图3-16所示。

◆图3—16添加#content、#contentp和#contenth4样式后的“拆分”视图

（3）在#footer层中插入图像并编辑CSS样式表。

1在“设计”视图中将“页面底部”文字删除。

2选择“插入→图像”命令或按【ctrl+alt+I】组合键，打开“选择图像源文件”对话框，插入“图像”，在”选择图像源文件“对话框中选择“images”文件夹中的footer.gif,单击“确定”按钮。

③参照步骤2（4），新建#footer的CSS样式表，在“#footer的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding”

全部值分别为3px,0，3px,0，“margin”的全部为0，”width”为100%，”clear”为both。

设置完成后，单击“确定”按钮，添加#footer样式后的“拆分”视图如图3-17所示。

◆图3—17添加#footer样式后的“拆分”视图

4、div+CSS布局网页效果图

div+CSS布局网页效果图如图3-18所示。

◆图3—18div+CSS布局网页效果图