手机模板区块（HTML、CSS）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机模板区块</title>
<style>
.box {
width: 1226px;
height: 615px;
background-color: #ccc;
margin: 200px auto;
}
.left {
float: left;
width: 234px;
height: 615px;
background-color: black;
background: url(mix.jpg);
}
.right {
float: left;
width: 992px;
height: 615px;
background-color: #ccc;
}
.right>div {
float: left;
width: 234px;
height: 300px;
background-color: #fff;
margin-left: 14px;
margin-bottom: 14px;
background-repeat: no-repeat;
}
div:hover {
box-shadow: 10px 10px 10px 1px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<div><img src="https://pic.imgdb.cn/item/61112a345132923bf886efc8.jpg" alt=""></div>
<div><img src="https://pic.imgdb.cn/item/61112a465132923bf8872016.jpg" alt=""></div>
<div><img src="https://pic.imgdb.cn/item/61112a695132923bf88776bd.jpg" alt=""></div>
<div><img src="https://pic.imgdb.cn/item/61112a755132923bf8879698.jpg" alt=""></div>
<div><img src="https://pic.imgdb.cn/item/61112a815132923bf887b129.jpg" alt=""></div>
<div><img src="https://pic.imgdb.cn/item/61112a8b5132923bf887c694.jpg" alt=""></div>
<div><img src="https://pic.imgdb.cn/item/61112a9b5132923bf887f173.jpg" alt=""></div>
<div><img src="https://pic.imgdb.cn/item/61112aa65132923bf8880b47.jpg" alt=""></div>
</div>
</div>
</body>
</html>
