console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=">
<meta http-equiv="X-UA-Compatible" content="">
<title></title>
<style>
.d1 {
width: 900px;
height: 250px;
border: #48486b 2px solid;
background-color: #f1f5f5;
}
img {
width: 200px;
height: 140px;
display: block;
border: solid #e4e8ff 2px;
border-radius: 10px 10px;
}
li {
display: inline;
float: left;
padding: 5px;
margin: 5px 5px 6px -1px;
text-align: center;
border: #48486b solid 2px;
border-radius: 10px 10px 0 0;
background-color: #d33a4a;
}
.cha {
overflow: hidden;
padding-left: 0px;
}
span {
display: block;
padding-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="d1">
<ul class="cha">
<li><img src="//img.alicdn.com/tfs/TB1Cq1HekvoK1RjSZPfXXXPKFXa-502-380.jpg_240x240q90.jpg" alt><span>1</span></li>
<li><img src="//img.alicdn.com/tfs/TB1jq1HekvoK1RjSZPfXXXPKFXa-502-380.jpg_240x240q90.jpg" alt=""><span>2</span></li>
<li><img src="//img.alicdn.com/tfs/TB1NASFejDpK1RjSZFrXXa78VXa-502-380.jpg_240x240q90.jpg"><span>3</span></li>
<li><img src="https://aecpm.alicdn.com/simba/img/TB13xKuLVXXXXcHapXXSutbFXXX.jpg" width="250px" height="155px"><span>4</span></li>
</ul>
</div>
</body>
</html>