本次要完成如图所示的拼图效果：

根据对拼图结构的不同理解，本题将演示两种方法实现如图效果：

方法 一：我们将拼图结构看作一个大的盒子包裹着上下各一个小盒子：

方法一我们采用内嵌式引入CSS样式，并且为了避免受到浏览器默认边距的影响，我们使用通配符将内外边距初始化：

通过分析目标效果图，父盒子（框架中外层的标签）主要是为两个小盒子提供一个显示空间，并且周围设有灰色边框。

首先我们针对父盒子设置一个显示范围（设置宽高，主要是根据素材图片的宽高预估一个值，不合适的话后面再慢慢调整即可），然后设置灰色边框，为了增加效果图的立体感，我为边框设置了右下方的阴影，最后通过margin值复制的原则将父盒子居中显示，我们的父边框样式设置就完成了：

来到上方子盒子的样式设置，根据本次素材的宽高是200*225像素，我们设置一个略大于200*3=600的宽度和一个略大于225的宽度用于留出缝隙，达到拼图显示的效果：

接下来我们为上方的盒子引入图片，然后针对每一个图片设置具体位置，并且不要让图片平铺：

最后为左上角和右上角设置圆角，我们上方盒子的样式就设置完成了：

效果图如下，如果三张图片之间出现合适宽度的间隙就说明我们的宽度设置合理：

 来到下方子盒子的设置，根据上方盒子的设置照葫芦画瓢即可。

首先设置与上方盒子相同的宽高即可：

然后引入各自位置对应的图片，并且针对每一个图片设置具体位置，记得还要让图片不平铺：

最后为左下角和右下角设置圆角，我们下方盒子的样式就设置完成了：

通过按F12键预览我们的效果图，主要是查看我们的宽高设置是否合适，最后我们的方法一的效果图如下： 

方法二：我们将拼图结构看作一个大的盒子包裹着左中右各一个小盒子（CSS主要采用子绝父相原则定位 ）：

方法二采用链入式引入CSS样式，首先我们点击Adobe Dreamweaver左上角的文件-->新建，用于新建文件：

 点击后，界面会弹出如图弹窗，我们将文件类型选中CSS，再点击右下角的创建即可：

 创建完后记得按Ctrl+S键保存文件，最好将CSS文件和html文件放在同一目录，方便查找。

接下来，我们通过如下语句引入CSS文件：

其中，href为我们的CSS文件位置，不同计算机一般各不相同，后面的rel属性和type都是固定的。

当我们的左上角源代码的右侧出现了我们的css文件名，就说明我们的CSS文件引入成功了：

 接下来为了避免受到浏览器默认边距的影响，我们使用通配符将内外边距初始化：

通过分析目标效果图，和方法一类似，父盒子（框架中外层的标签）主要是为三个小盒子提供一个显示空间，并且周围设有灰色边框。

首先我们针对父盒子设置一个显示范围（设置宽高，主要是根据素材图片的宽高预估一个值，不合适的话后面再慢慢调整即可），然后设置灰色边框，为了增加效果图的立体感，我为边框设置了右下方的阴影，然后通过margin值复制的原则将父盒子居中显示，我们的父边框样式设置就基本完成了（该部分与方法一完全相同）：

最后，我们要将父盒子设置为相对定位，这也是我们方法二最重要的一步：

我们来设置左侧子盒子的样式，首先，为左侧盒子设置显示范围和显示位置，最重要的是将其设置为绝对定位：

接下来就是引入素材图片，和方法一 一 样，设置图片的具体位置，不平铺，并且设置左上角的圆角和左下角的圆角，到此为止，我们的左侧子盒子样式就设置完成了：

通过预览，我们发现上下两张图片之间没有间隙（原因：相对定位是将元素相对于它在标准文档流中的位置进行定位，但我们才写完一个盒子，它只能拿父盒子进行粗略定位，所以缩成一团），不用慌，当我们写完中间的盒子后就能看到间隙了：

我们来设置中间子盒子的样式，首先，为中间盒子设置显示范围和显示位置（除距离左侧边框的距离外，其他属性都可照抄），最重要的也是将其设置为绝对定位：

接下来就是引入素材图片，和方法一 一 样，设置图片的具体位置，不平铺，并且设置左上角的圆角和左下角的圆角，到此为止，我们的中间子盒子样式就设置完成了：

通过预览，可以清晰的看到图片之间的间距：

最后，我们来设置右侧子盒子的样式，首先，为右侧盒子设置显示范围和显示位置，最重要的是将其设置为绝对定位 （照葫芦画瓢即可）：

接下来就是引入素材图片，和方法一 一 样，设置图片的具体位置，不平铺，并且设置左上角的圆角和左下角的圆角，到此为止，我们的中间子盒子样式就设置完成了：

通过后期的检查微调（主要是调宽高和距离左侧的距离），我们的演示效果如下：

方法一的完整源码如下 ：

方法二的完整.html源码和.css源码如下：

如果你认为我的分享还不错，欢迎加入我们的大家庭一起学习，无限进步。

（QQ群：937864538  欢迎入群~）