【案例 5-4】 史努比拼图
一、案例描述
1、考核知识点
<div>标签
盒子的宽与高 div width height
边框属性 border-type
复合背景属性 background-type
2、练习目标
➢ 掌握盒子宽与高的使用方法。
➢ 掌握边框的设置方法。
➢ 掌握复合背景属性的使用方法。
3、需求分析
拼图相信大家都不陌生。接下来,通过引入复合背景属性,制作一个拼图效果。
4、案例分析
1) 效果如图 5-7 所示。
图5-1 拼图效果展示
2) 具体实现步骤如下:
a) 在页面主体<body>中添加 3 个<div>标签搭建结构。
b) 定义大盒子的宽、高、外边框等样式。
c) 设置两个小盒子的宽高等样式,并应用背景复合属性添加图片。