HTML练习之路14（制作拼图效果）
本次要完成如图所⽰的拼图效果：
根据对拼图结构的不同理解，本题将演⽰两种⽅法实现如图效果：
⽅法 ⼀：我们将拼图结构看作⼀个⼤的盒⼦包裹着上下各⼀个⼩盒⼦：
<div class="all">
<div class="on"></div>
<div class="off"></div>
文档边框素材</div>
⽅法⼀我们采⽤内嵌式引⼊CSS样式，并且为了避免受到浏览器默认边距的影响，我们使⽤通配符将内外边距初始化：
*{
padding: 0px;
margin: 0px;
}
通过分析⽬标效果图，⽗盒⼦（框架中外层的<div>标签）主要是为两个⼩盒⼦提供⼀个显⽰空间，并且周围设有灰⾊边框。
⾸先我们针对⽗盒⼦设置⼀个显⽰范围（设置宽⾼，主要是根据素材图⽚的宽⾼预估⼀个值，不合适的话后⾯再慢慢调整即可），然后设置灰⾊边框，为了增加效果图的⽴体感，我为边框设置了右下⽅的阴影，最后通过margin值复制的原则将⽗盒⼦居中显⽰，我们的⽗边框样式设置就完成了：
.all{
width:604px;
height:454px;
border: 5px solid  #878585;
border-radius: 40px;
box-shadow: 3px 4px #5E5555;
margin: 30px auto;
}
来到上⽅⼦盒⼦的样式设置，根据本次素材的宽⾼是200*225像素，我们设置⼀个略⼤于200*3=600的
宽度和⼀个略⼤于225的宽度⽤于留出缝隙，达到拼图显⽰的效果：
width: 604px;
height: 227px;
接下来我们为上⽅的盒⼦引⼊图⽚，然后针对每⼀个图⽚设置具体位置，并且不要让图⽚平铺：
background-image: url("../../../Documents/muxishiye/01.jpg"),
url("../../../Documents/muxishiye/02.jpg"),
url("../../../Documents/muxishiye/03.jpg");
background-position: left,center,right;
background-repeat: no-repeat;
最后为左上⾓和右上⾓设置圆⾓，我们上⽅盒⼦的样式就设置完成了：
border-radius: 35px 35px 0 0;
效果图如下，如果三张图⽚之间出现合适宽度的间隙就说明我们的宽度设置合理：
来到下⽅⼦盒⼦的设置，根据上⽅盒⼦的设置照葫芦画瓢即可。
⾸先设置与上⽅盒⼦相同的宽⾼即可：
width: 604px;
height: 227px;
然后引⼊各⾃位置对应的图⽚，并且针对每⼀个图⽚设置具体位置，记得还要让图⽚不平铺：
background-image:url("../../../Documents/muxishiye/04.jpg"),
url("../../../Documents/muxishiye/05.jpg"),
url("../../../Documents/muxishiye/06.jpg");
background-position: left,center,right;
background-repeat: no-repeat;
最后为左下⾓和右下⾓设置圆⾓，我们下⽅盒⼦的样式就设置完成了：
border-radius:0px 0px 35px 35px;
通过按F12键预览我们的效果图，主要是查看我们的宽⾼设置是否合适，最后我们的⽅法⼀的效果图如下：
⽅法⼆：我们将拼图结构看作⼀个⼤的盒⼦包裹着左中右各⼀个⼩盒⼦（CSS主要采⽤⼦绝⽗相原则定位 ）：
<div class="all">
<div class="photo_left"></div>
<div class="photo_center"></div>
<div class="photo_right"></div>
</div>
⽅法⼆采⽤链⼊式引⼊CSS样式，⾸先我们点击Adobe Dreamweaver左上⾓的⽂件-->新建，⽤于新建⽂件：
点击后，界⾯会弹出如图弹窗，我们将⽂件类型选中CSS，再点击右下⾓的创建即可：
创建完后记得按Ctrl+S键保存⽂件，最好将CSS⽂件和html⽂件放在同⼀⽬录，⽅便查。
接下来，我们通过如下语句引⼊CSS⽂件：
<link href="test_pintuxiaoguo.css" rel="stylesheet" type="text/css">
其中，href为我们的CSS⽂件位置，不同计算机⼀般各不相同，后⾯的rel属性和type都是固定的。
当我们的左上⾓源代码的右侧出现了我们的css⽂件名，就说明我们的CSS⽂件引⼊成功了：
接下来为了避免受到浏览器默认边距的影响，我们使⽤通配符将内外边距初始化：
*{
padding: 0px;
margin: 0px;
}
通过分析⽬标效果图，和⽅法⼀类似，⽗盒⼦（框架中外层的<div>标签）主要是为三个⼩盒⼦提供⼀个显⽰空间，并且周围设有灰⾊边框。
⾸先我们针对⽗盒⼦设置⼀个显⽰范围（设置宽⾼，主要是根据素材图⽚的宽⾼预估⼀个值，不合适
的话后⾯再慢慢调整即可），然后设置灰⾊边框，为了增加效果图的⽴体感，我为边框设置了右下⽅的阴影，然后通过margin值复制的原则将⽗盒⼦居中显⽰，我们的⽗边框样式设置就基本完成了（该部分与⽅法⼀完全相同）：
.all{
width:609px;
height:455px;
border: 3px solid #F7B3B4;
border-radius: 40px;
box-shadow: 3px 4px #999443;
margin: 30px auto;
}
最后，我们要将⽗盒⼦设置为相对定位，这也是我们⽅法⼆最重要的⼀步：
position: relative;
我们来设置左侧⼦盒⼦的样式，⾸先，为左侧盒⼦设置显⽰范围和显⽰位置，最重要的是将其设置为绝对定位：
width:200px;
height:455px;
position: absolute;
left: 0px;
接下来就是引⼊素材图⽚，和⽅法⼀ ⼀ 样，设置图⽚的具体位置，不平铺，并且设置左上⾓的圆⾓和左下⾓的圆⾓，到此为⽌，我们的左侧⼦盒⼦样式就设置完成了：
background-image: url("../../Documents/muxishiye/01.jpg"), url("../../Documents/muxishiye/04.jpg");
background-repeat: no-repeat;
background-position: top, bottom;
border-radius: 35px 0 0 35px;
通过预览，我们发现上下两张图⽚之间没有间隙（原因：相对定位是将元素相对于它在标准⽂档流中的位置进⾏定位，但我们才写完⼀个盒⼦，它只能拿⽗盒⼦进⾏粗略定位，所以缩成⼀团），不⽤慌，当我们写完中间的盒⼦后就能看到间隙了：
我们来设置中间⼦盒⼦的样式，⾸先，为中间盒⼦设置显⽰范围和显⽰位置（除距离左侧边框的距离外，其他属性都可照抄），最重要的也是将其设置为绝对定位：

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