HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<link rel="stylesheet" type="text/css" href="image.css">
</head>
<body>
<div class="container">
<div class="cl">
<a href="#" target="_blank">
<img src="2.jpg" alt="萌萌哒德鲁伊" width="250px" height="250px">
<!--alt属性是拖动到图片上面，会出现的名字,在图片没有加载时也显示，提升友善性-->
</a>
<div class="c2">萌萌哒德鲁伊</div>
</div>
<div class="cl">
<a href="#" target="_blank">
<img src="2.jpg" alt="萌萌哒德鲁伊" width="250px" height="250px">
<!--alt属性是拖动到图片上面，会出现的名字,在图片没有加载时也显示，提升友善性-->
</a>
<div class="c2">萌萌哒德鲁伊</div>
</div>
<div class="cl">
<a href="#" target="_blank">
<img src="2.jpg" alt="萌萌哒德鲁伊" width="250px" height="250px">
<!--alt属性是拖动到图片上面，会出现的名字,在图片没有加载时也显示，提升友善性-->
</a>
<div class="c2">萌萌哒德鲁伊</div>
</div>
<div class="cl">
<a href="#" target="_blank">
<img src="2.jpg" alt="萌萌哒德鲁伊" width="250px" height="250px">
<!--alt属性是拖动到图片上面，会出现的名字,在图片没有加载时也显示，提升友善性-->
</a>
<div class="c2">萌萌哒德鲁伊</div>
</div>
<div class="cl">
<a href="#" target="_blank">
<img src="2.jpg" alt="萌萌哒德鲁伊" width="250px" height="250px">
<!--alt属性是拖动到图片上面，会出现的名字,在图片没有加载时也显示，提升友善性-->
</a>
<div class="c2">萌萌哒德鲁伊</div>
</div>
<div class="cl">
<a href="#" target="_blank">
<img src="2.jpg" alt="萌萌哒德鲁伊" width="250px" height="250px">
<!--alt属性是拖动到图片上面，会出现的名字,在图片没有加载时也显示，提升友善性-->
</a>
<div class="c2">萌萌哒德鲁伊</div>
</div>
<div class="cl">
<a href="#" target="_blank">
<img src="2.jpg" alt="萌萌哒德鲁伊" width="250px" height="250px">
<!--alt属性是拖动到图片上面，会出现的名字,在图片没有加载时也显示，提升友善性-->
</a>
<div class="c2">萌萌哒德鲁伊</div>
</div>
<div class="cl">
<a href="#" target="_blank">
<img src="2.jpg" alt="萌萌哒德鲁伊" width="250px" height="250px">
<!--alt属性是拖动到图片上面，会出现的名字,在图片没有加载时也显示，提升友善性-->
</a>
<div class="c2">萌萌哒德鲁伊</div>
</div>
</div>
</body>
</html>CSS代码
.cl{
border: 2px solid cornflowerblue;
width: auto;
height: auto;
float: left;
/*盒子的浮动效果*/
text-align: center;
margin: 10px;
/*设置两幅图像连在一起，中间的距离*/
}
img{
margin: 0px;
opacity: 1;
/*opacity(不透明性)，o为完全透明，1完全不透明*/
}
/*因为这个图像，本身带有空白部分，将外边距设为0，反而会好一些*/
.c2{
font-size: 18px;
margin-bottom: 5px;
}
.container{
margin: 10px auto;
width: 75%;
height: auto;
}
/*盒子的整体，设置外边框的距离为10px，一行图片加在一起横向加在一起不能超过75%*/效果：
