第五节：加入照片
准备素材
图片的素材是可以直接在图片上点右键，然后另存为的，所以我们在此不再提供素材的下载地址。
插入图片
素材准备好后，我们将其起好名字，并与我们的html文件放在一个文件夹中
现在，我们使用img标签，来引入这些图片。
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<title>照片墙</title>
</head>
<body>
<!-- 画一个大框 -->
<div>
<!-- 行1 -->
<div>
<!-- 1.1 -->
<div style="float:left;">
<!-- 1.1.1 -->
<div>
<!-- 1.1.1.1 -->
<div style="float: left;"><img src="1.png" /></div>
<!-- 1.1.1.2 -->
<div style="float: left;"><img src="2.png" /></div>
<!-- clear -->
<div style="clear: left;"></div>
</div>
<!-- 1.1.2 -->
<div><img src="3.png" /></div>
</div>
<!-- 1.2 -->
<div style="float:left;">
<!-- 1.2.1 -->
<div><img src="4.png" /></div>
<!-- 1.2.2 -->
<div><img src="5.png" /></div>
</div>
<!-- 1.3 -->
<div style="float:left;"><img src="6.png" /></div>
<!-- clear -->
<div style="clear: left;"></div>
</div>
<!-- 行2 -->
<div>
<!-- 2.1 -->
<div style="float: left;"><img src="7.png" /></div>
<!-- 2.2 -->
<div style="float: left;"><img src="8.png" /></div>
<!-- 2.3 -->
<div style="float: left;"><img src="9.png" /></div>
<!-- 2.4 -->
<div style="float: left;"><img src="10.png" /></div>
<!-- clear -->
<div style="clear: left;"></div>
</div>
</div>
</body>
</html>效果:
