<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 100%;
height: 800px;
/*background-color: aqua;*/
margin: 0 auto;
}
.d{
width: 47%;
height: 459px;
/*background-color: rosybrown;*/
border: 2px solid gainsboro;
border-radius: 10px;
float: left;
margin: 23px 37px;
margin-right: 10px;
text-align: center;
}
.d img{
width: 90%;
margin: 22px 37px;
margin-bottom: 0px;
}
.d span{
display: block;
font-size: 30px;
padding-top: 20px;
}
.d:hover{
border: 2px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="d">
<img src="imgs/a.jpg">
<span>三折叠</span>
</div>
<div class="d"> <img src="imgs/a.jpg">
<span>三折叠</span> </div>
<div class="d"> <img src="imgs/a.jpg">
<span>三折叠</span> </div>
<div class="d"> <img src="imgs/a.jpg">
<span>三折叠</span> </div>
</div>
####图片需要自己下载，改名为a.jpq
</body>
</html>