1 美化我的网页----------css+div 布局页面（教案）布局页面（教案）
实训目的：实训目的：
1、学会css 样式的创建、编辑和应用样式的创建、编辑和应用
2、学会AP div 的创建和参数的设置的创建和参数的设置
3、学会使用css+div 布局和美化网页。布局和美化网页。
实训步骤：实训步骤：
1、将素材库chaprter3 中的SX7文件夹复制到D ：\根目录下。运行dreamweaver cs5 ，新建站点“网页特效制作”，站点文件夹为D:\SX7。打开站点根目录新建空白文档index.html，修改标题为“CSS+DIV 布局网页”。
2、制作基本结构、制作基本结构
（1）选择文档工具栏中的“拆分”视图下的<body>标签，将所有页面用一个大的<div>，既#container 包裹起来，代码如图3---1所示。所示。
<div id=<div id=””container container””>
页面层容器页面层容器抖音专用特效软件
</div>
（2）在#container 块中写入div 的基本结构，将页面层容器文字替换为如下代码，如图3—2所示：所示：
<div id=<div id=””banner banner””>横幅图片</div> <div id=<div id=””leftbar leftbar””>侧边栏</div>
<div id=<div id=””content content””>页面主体</div>
杭电oj没做出来的题怎么办<div id=<div id=””footer footer””>页面的底部</div>
（3）选择“窗口→CSS 样式”命令或按【shift+f11】组合键打开“CSS 样式”面板，如图3—3所示，
所示，
◆ 图3—3“CSS 样式”面板样式”面板
单击“单击“CSS CSS 样式面板右下方”的“新建CSS 规则”按钮，打开新建CSS 规则对话框。在选择器类型中选择“标签（重新定义html 元素）“，在选择器名称“文本框中输入”body body””，在”规则定义“项中选择”仅限该文档“，如图3—4所示，单击”确定“按钮，弹出”单击”确定“按钮，弹出”body body 的CSS 规则定义“对话框，如图3—5 所示所示
规则对话框
◆ 图3—4 新建CSS规则对话框
规则对话框
◆ 图3—5 新建CSS规则对话框
在body的CSS规则定义对话框的分类列表中选择方框，设置“填充“全部为
0，边界全部为0，设置完成后单击确定按钮。视图如图3—6所示。
所示。
（4）定义#container 块的样式。单击“CSS 样式面板“右下方的“新建CSS 规则”按钮，打开“新建CSS 规则”对话框。在选择器类型中选择“复合内容（基于选择的内容）”，在选择器名称文本框中输入“，在选择器名称文本框中输入“#container #container #container””
个人简历模板免费下载空白可填写，在“规则定义”项中选择“仅限于该文档”，如图3—7所示，单击确定按钮，弹出“#container 的CSS 规则定义对话框。规则定义对话框。
wraptext什么意思
◆ 图3—7 新建CSS 规则对话框规则对话框
在“在“#container #container 的CSS 规则定义对话框中的分类列表框中选择方框选项，设置padding 全部为0，margin 的left 为-350-350ＰＸ，如图３－８所示分类列表ＰＸ，如图３－８所示分类列表框中选择定位选项，设置ｐｏｓｉｔｉｏｎ为ｒｅｌａｔｉｖｅ，设置ｐｏｓｉｔｉｏｎ为ｒｅｌａｔｉｖｅ，ｌｅｆｔ为ｌｅｆｔ为５０％，如图３－９所示，设置完成后，单击确定按钮，添加＃ｃｏｎｔａｉｎｅｒ样式后的拆分视图如图３－１０所示。ｎｅｒ样式后的拆分视图如图３－１０所示。
html个人网页完整代码div+css
图３――８“＃ｃｏｎｔａｉｎｅｒ的ＣＳＳ规则定义”“＃ｃｏｎｔａｉｎｅｒ的ＣＳＳ规则定义”对话框中的方框选项对话框中的方框选项设置设置
图３－９“＃ｃｏｎｔａｉｎｅｒ的ＣＳＳ规则定义”对话框中的“定位”选项设置项设置
图３－１０图３－１０  添加＃ｃｏｎｔａｉｎｅｒ样式后的拆分视图添加＃ｃｏｎｔａｉｎｅｒ样式后的拆分视图
4、充实内容、充实内容
（1） 在banner 层中插入图片并编辑CSS 样式表。样式表。
① 在“设计”视图中将“横幅图片”文字删除。在“设计”视图中将“横幅图片”文字删除。
② 选择“插入→图像”命令或按【选择“插入→图像”命令或按【ctrl+alt+I ctrl+alt+I ctrl+alt+I】组合键，打开“选择图】组合键，打开“选择图
像源文件”对话框，选择“images images””文件夹中的banner.gif,banner.gif，单击单击“确定”按钮。定”按钮。
接口自动化测试是什么③参照步骤2（4），新建，新建#banner #banner 的CSS 样式表，在“样式表，在“#banner #banner 的CSS 规则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding padding”” 全部值为0，“margin ”的全部为0，如图3—11所示。设置完成后，单击“确定”按钮，完善banner 层后的“拆分”视图如图3-12所示。所示。
◆ 图3—11 #banner 的CSS 规则定义对话框规则定义对话框

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。