homepage-layoutlisted

# 首页布局自检 > 适用：`lihongwei-cn` GitHub Pages 主页 `index.html` 检查并修复主页布局，确保每项标准都达标。 ## 检查清单 逐项验证，不达标的立即修复： - [ ] **无横向滚动条**：`body { overflow-x: hidden }` 已设置 - [ ] **容器不溢出**：`.container` 使用 `max-width` 而非 `width`，且 `width: 100%` - [ ] **仪表盘自适应**：`.dashboard` 使用 `grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))` - [ ] **卡片不重叠**：每个 `.card` 的 `.card-body { min-width: 0 }`，文本有 `overflow: hidden; text-overflow: ellipsis; white-space: nowrap` - [ ] **分类区块等宽等高**：同一行的 `.cat-section` 高度一致，不会因内容多少而参差 - [ ] **响应式断点合理**：小屏（≤540px）下 `grid-template-columns: 1fr` - [ ] **所有分类都有至少 1 个项目**：空分类应从 HTML 中移除 - [ ] **所有卡片链接可达**：`href` 指向存在的目录，且该目录包含 `index.html` ## 修复流程 1. 读 `index.html`，核对以上清单 2. CSS 问题直接改 `index.html` 3. 链接验证：检查每个 `href` 是否存在对应目录 4. 修改完成后 `git add` + `git commit` + `git push` ## 新增项目时的额外检查 当新增项目页面时，除了以上检查，还需： 1. 确认新项目归类到哪个 `.cat-section` 2. 若现有分类都不合适，新建分类区块 3. 在 `stats.json` 中添加新项目的初始计数 4. 各子页面添加 page counter（使用 `counterapi.dev`，命名空间 `lihongwei-cn/<project-id>`） 5. 子页面 footer 添加 GitHub 链接和 counter 显示 ## 关键 CSS 约束 这些值不可随意改动，否则会造成布局问题： ```css .container { max-width: 1100px; width: 100%; } .dashboard { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } body { overflow-x: hidden; } .card-body { min-width: 0; } @media(max-width: 540px) { .dashboard { grid-template-columns: 1fr; } } ```