Dreamweaver网页制作初级教程：掌握div缝隙的控制

现如今，网页制作以及建站成为了人人需要掌握的技能。小编从各方面得到需求，大家希望有一个Dreamweaver（DW）的入门教程，就像之前有过PS的入门教程一样。那么，从今天开始，小编将花些时间为大家带来DW的入门教程，相信只要能坚持学习，大家也能成为DW的大神。

1. 网站结构的划分和图像插入

按照之前的课程，我们应该已经知道了建站的具体思路。首先，使用div命令对网站的结构进行划分，然后插入图像，并应用进阶学到的技巧来处理不同的网站需求。这是基本的思路。

2. 控制div缝隙的细节

现在，让我们来看一下如何控制div缝隙，这是一个小细节问题。为了方便说明，我们给每个div输入一些文字性的内容：

lt;div id"header_t_l"gt;logolt;/divgt;
lt;div id"header_t_r"gt;titlelt;/divgt;
lt;div id"header_b"gt;writinglt;/divgt;

在编辑中，我们会发现输入的文字都是顶格显示的，没有间隙也没有对齐的方法，这在编辑过程中是很麻烦的。

3. 使用padding-left代码实现左侧间隙

这次我们需要了解另一个CSS属性：padding-left，它表示元素左侧的间隙。我们在每个div中添加以下代码：

#header_t_l {
  padding-left: 20px;
}
#header_t_r {
  padding-left: 20px;
}
#header_b {
  padding-left: 20px;
}

添加完代码后，预览页面，你会发现出现了问题，文字和div元素全部都被挤到下方了，虽然有了20px的间隙。

4. 调整前方的宽度来解决问题

实际上，由于我们增加了20px的间隙，但前方的宽度没有进行相应调整，导致文字被“挤到下方”。所以，前方的宽度应该减少20px，即从原来的888px调整为868px。

然后，再次预览页面，是不是没有问题了呢？

5. 定义顶部缝隙并更改字体大小

接下来，我们来定义顶部的缝隙。首先，我们改变字体大小，可以使用以下代码：

#header_b {
  font-size: 12px;
  line-height: 30px;
}

通过设置不同的字体大小和行高，你可以根据需要调整缝隙大小。

6. 预览效果

最后，让我们来预览一下效果，确保所有的调整都生效并没有其他问题。

通过以上步骤，你已经学会了如何控制div缝隙，并进行相关样式调整。在网页制作中，这是一个非常基础且重要的技能，希望本教程能够帮助到你。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。