ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀，每一条都经过真实交付验证。

首页 / 资讯中心 / 正文

【html基本界面】

2026/8/11 15:51:36 拓冰建站 浏览量
【html基本界面】

小米界面布局

  • 效果
  • html
  • css

效果

在这里插入图片描述

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;/* 兼容旧版IE */
}.list {display: grid;grid-template-columns: repeat(5, 1fr);/* 5列均分宽度 */grid-auto-rows: 120px;/* 每行默认高度为120px */gap: 10px;/* li之间的间距 */margin-top: 40px;background-color: #df7b7b;
}.list li {background-color: antiquewhite;color: black;text-align: center;
}/* 第一个 li：占两行高度 */
.list li:nth-child(1) {grid-row: span 2;/* 占据两行 */grid-column: 1 / 2;/* 放在第一列 */}/* 从第 2 个开始”并且“不超过第 9 个”的元素*/
.list li:nth-child(n+2):nth-child(-n+9) {height: 120px;
}