效果
html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米商城布局</title><link rel="stylesheet" href="common.css">
</head><body><div class="container"><div class="header clear_fix"><div class="header-left"><h3>智能穿戴</h3></div><div class="header-right"><a href="">热门</a><a href="">穿戴</a></div></div><div><ul class="list "><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li></ul></div></div></body></html>
css
body,
ul,
li,
h3 {margin: 0;padding: 0;
}ul,
li {list-style: none;
}a {text-decoration: none;color: #333;
}.container {width: 1226px;margin: auto;background-color: aqua;
}.header {margin-top: 30px;}.header-left {float: left;width: 100px;height: 50px;}.header-right {float: right;width: 100px;height: 50px;text-align: center;
}.clear_fix::after {content: "";display: table;clear: both;}.clear_fix {*zoom: 1;
}.list {display: grid;grid-template-columns: repeat(5, 1fr);grid-auto-rows: 120px;gap: 10px;margin-top: 40px;background-color: #df7b7b;
}.list li {background-color: antiquewhite;color: black;text-align: center;
}
.list li:nth-child(1) {grid-row: span 2;grid-column: 1 / 2;}
.list li:nth-child(n+2):nth-child(-n+9) {height: 120px;
}
 函数)
)
