3、S规则对话框。在选择器类型中选择“标签(重新定义html元素)“,在选择器名称“文本框中输入”body”,在”规则定义“项中选择”仅限该文档“,如图3—4所示,单击”确定“按钮,弹出”body的CSS规则定义“对话框,如图3—5所示10◆图3—4新建CSS规则对话框◆图3—5新建CSS规则对话框在body的CSS规则定义对话框的分类列表中选择方框,设置“填充“全部为0,边界全部为0,设置完成后单击确定按钮。视图如图3—6所示。10(4)定义#container块的样式。单击“CSS样式面板“右下方的“新建CSS规则”按钮,打开“新建CSS规则”对话框。在选择器类型中选择“复合内容
4、(基于选择的内容)”,在选择器名称文本框中输入“#container”,在“规则定义”项中选择“仅限于该文档”,如图3—7所示,单击确定按钮,弹出“#container的CSS规则定义对话框。◆图3—7新建CSS规则对话框在“#container的CSS规则定义对话框中的分类列表框中选择方框选项,设置padding全部为0,margin的left为-350PX,如图3-8所示分类列表框中选择定位选项,设置position为relative,left为50%,如图3-9所示,设置完成后,单击确定按钮,添加#container样式后的拆分视图如图3-10所示。10图3――8“#con
5、tainer的CSS规则定义”对话框中的方框选项设置图3-9“#container的CSS规则定义”对话框中的“定位”选项设置10图3-10 添加#container样式后的拆分视图1、充实内容(1)在banner层中插入图片并编辑CSS样式表。①在“设计”视图中将“横幅图片”文字删除。②选择“插入→图像”命令或按【ctrl+alt+I】组合键,打开“选择图像源文件”对话框,选择“images”文件夹中的banner.gif,单击“确定”按钮。③参照步骤2(4),新建#banner的CSS样式表,在“#banner的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项,设置
6、“padding”全部值为0,“margin”的全部为0,如图3—11所示。设置完成后,单击“确定”按钮,完善banner层后的“拆分”视图如图3-12所示。◆图3—11#banner的CSS规则定义对话框10◆图3—12完善banner层后的拆分视图(1)在leftbar层中插入图片文字并编辑CSS样式表。①在“设计”视图中将“侧边栏”文字删除。②选择“插入→图像”命令或按【ctrl+alt+I】组合键,打开“选择图像源文件”对话框,插入“图像”,在”选择图像源文件“对话框中选择“images”文件夹中的selfpic.jpg和selfpic2.jpg,单击“确定”按钮。③分别
7、在插入图像下方输入leftbar.txt中的文字,如图3-13所示◆图3—13在leftbar层中插入图片和文字后的拆分视图④参照步骤2(4),新建#leftbar和#leftbarp的CSS样式表。10新建#leftbar的CSS样式表,在#leftbar的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项,设置‘width“为150px,”float”为left,“padding”的值分别为20px,0,30px,0,“margin”的全部为0,在分类列表框中选择“类
此文档下载收益归作者所有