如果使用浮动定位方式，为Div中的所有列都加上“float：left”属性，那么它们会挨个向左排列。如果让一个元素浮动，它会往右或者往左浮动直至遇到容器的边缘。如果向同一方向再浮动一个元素，它会浮动直至碰到前一个浮动元素的边缘。 （七）插入Div标签 Div标签与表格、图像等网页对象的插入方法类似，所不同的是，在插入Div标签的同时可以为其设置样式。 步骤 1 首先在文档页面上要插入 Div 标签的位置单击，以确定插入点位置。 步骤 2 将“常用”插入栏切换至“布局”插入栏，并单击其中的“插入Div标签”按钮，打开“插入Div标签”对话框。设置各项参数后，单击“确定”按钮，即可在插入点所在位置插入 Div 标签。 【任务实施】 在学习了“Div+CSS”技术的相关知识后，下面通过制作一个使用“Div+CSS”技术制作的茶文化网站来学习其在实际网页制作中的应用。 （一）制作网站首页 1. 制作网页上部 步骤 1 将本项目素材中的“tea”文件夹拷贝至本地磁盘，然后在Dreamweaver中定义站点“tea”。 步骤 2 在站点“tea”中新建文档并重命名为“index.html”。 步骤 3 在“文件”面板中双击打开新建的文档，在文档编辑窗口中定位插入 点，然后将“插入”栏切换至“布局”栏，并单击其中的“插入Div标签”按钮。 步骤4 打开“插入Div标签”对话框，在“ID”编辑框中输入ID名（此处为“top”），然后单击“新建 CSS 样式”按钮。 步骤 5 打开“新建CSS规则”对话框，选择器类型默认为“高级”，选择器名为“#top”，在“定义在”列表区选择“新建样式表文件”，然后单击“确定”按钮。 步骤 6 打开“保存样式表文件为”对话框，在“保存在”下拉列表中选择网站根文件夹，在文件名编辑框中输入文件名（此处为“s1”），然后单击“保存”按钮。 步骤 7 打开“#top的CSS规则定义”对话框，在左侧的“分类”列表中选择“方框”，设置“宽”为“1 000”像素，然后单击“确定”按钮。 步骤 8 回到“插入Div标签”对话框，单击“确定”按钮，插入Div标签。切换至“常用”插入栏，单击“图像”按钮。 步骤 9 打开“选择图像源文件”对话框，在“查找范围”下拉列表中选择图像所在文件夹（此处为网站根文件夹下的“images”文件夹），在文件列表中选择图像文件“main_01.jpg”，然后单击“确定”按钮。 步骤 10 插入图像，并将其上方的文本删除，效果如图所示。 步骤 11 单击图像，然后按向右方向键，将插入点置于图像后，参照前面的方法插入其余图片，效果如图所示。 2. 制作网页中部 步骤 1 接着上面的操作，为确保Div位置的准确性，单击“文档”工具栏中的“拆分”按钮，在文档窗口上方打开代码视图，对照代码进行后面的操作。 步骤 2 首先将插入点定位在前面插入的ID为top的Div内，然后单击“标签选择器”中的“div#top”，选中整个 Div。 步骤 3 按键盘上的向右方向键，将插入点置于Div后，然后单击“布局”插入栏中的“插入 Div 标签”按钮，如图所示。 步骤 4 打开“插入 Div 标签”对话框，在“ID”编辑框中输入 ID 名“content”，然后单击“新建 CSS 样式”按钮。
相关推荐：
loading