效果图：
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color: #f5f5f5;}* {padding: 0px;margin: 0px;text-align: center;margin:0 auto ;}.a {width: 1226px;height: 614px;margin: 0 auto;}.b:hover {box-shadow: 10px 10px 10px -4px rgb(182, 171, 171);margin-top: -5px;}.b {width: 234px;height: 670px;float: left;margin-top: 0px;}.c {width: 992px;height: 700px;float: left;margin-top: 0px;}.li:hover {box-shadow: 10px 10px 10px -4px rgb(182, 171, 171);margin-top: -5px;}.d:hover {box-shadow: 10px 10px 10px -4px rgb(182, 171, 171);margin-top: -5px;}ul>li {width: 234px;height: 300px;margin-left: 14px;margin-bottom: 14px;margin-top: 0px;list-style: none;float: left;background-color: #ffffff;padding: 10px 0;}.p1 {color: #B0B0B0;width: 214px;height: 18px;margin: 0 10px 10px;font: 12px "Helvetica Neue"}.p2 {color: #ff6700;width: 214px;height: 21px;margin: 0 10px 14px;text-align: center;}.p3 {color: #333;font-size: 14px;font-family: Arial, Helvetica, sans-serif;margin: 0 10px 2px;text-align: center;}img {width: 160px;height: 160px;}.hh{width: 234px;height: 670px;}.qq{width: 992px;height: 350px;}</style>
</head><body><div class="a"><div class="b"><img src="mi1.jpg" class="hh" alt=""></div><div class="c"><ul class="qq"><li class="d"><div class="aa"><div><img src="xiaomi.jpg"></div><p class="p3">Xiaomi MIX Fold 2</p><p class="p1">超轻薄折叠机身设计，小米自然微水...</p><p class="p2">8999起</p></div></li><li class="d"> <div class="aa"><div><img src="xiaomi.jpg"></div><p class="p3">Xiaomi MIX Fold 2</p><p class="p1">超轻薄折叠机身设计，小米自然微水...</p><p class="p2">8999起</p></div></li><li class="d"> <div class="aa"><div><img src="xiaomi.jpg"></div><p class="p3">Xiaomi MIX Fold 2</p><p class="p1">超轻薄折叠机身设计，小米自然微水...</p><p class="p2">8999起</p></div></li><li class="d"> <div class="aa"><div><img src="xiaomi.jpg"></div><p class="p3">Xiaomi MIX Fold 2</p><p class="p1">超轻薄折叠机身设计，小米自然微水...</p><p class="p2">8999起</p></div></li></ul><ul class="qq"><li class="d"> <div class="aa"><div><img src="xiaomi.jpg"></div><p class="p3">Xiaomi MIX Fold 2</p><p class="p1">超轻薄折叠机身设计，小米自然微水...</p><p class="p2">8999起</p></div></li><li class="d"> <div class="aa"><div><img src="xiaomi.jpg"></div><p class="p3">Xiaomi MIX Fold 2</p><p class="p1">超轻薄折叠机身设计，小米自然微水...</p><p class="p2">8999起</p></div></li><li class="d"> <div class="aa"><div><img src="xiaomi.jpg"></div><p class="p3">Xiaomi MIX Fold 2</p><p class="p1">超轻薄折叠机身设计，小米自然微水...</p><p class="p2">8999起</p></div></li><li class="d"> <div class="aa"><div><img src="xiaomi.jpg"></div><p class="p3">Xiaomi MIX Fold 2</p><p class="p1">超轻薄折叠机身设计，小米自然微水...</p><p class="p2">8999起</p></div></li></ul></ul></div></div>
</body></html>
