GitHub仓库页采用“顶部导航+左侧文件树+右侧内容区”三栏布局，需用float+margin-left实现272px固定左栏与自适应右栏，配合clear:both防塌陷，并覆盖box-sizing、font-family等关键样式以还原视觉节奏。
用 HTML + CSS 模仿 GitHub 仓库首页布局的关键结构
GitHub 仓库页核心是「顶部导航 + 左侧文件树 + 右侧内容区」三栏式布局，不是靠 flex 或 grid 一招吃遍天下，而是混合使用 float、position: relative 和明确的宽高约束。直接套用现代布局方案容易在细节上错位（比如文件图标对齐、代码块行号偏移、tab 标签宽度不均）。
必须保留的结构层级：
-
<div class="repository-meta">：包含仓库名、描述、star/fork 按钮，需加margin-bottom隔开后续内容 -
<nav class="reponav">：顶部 tab 导航（Code / Issues / Pull requests…），每个<a>要设display: inline-block+padding，否则 hover 状态会塌陷 -
<div class="file-wrap">：包裹文件列表，内部用<ul class="files">，每个<li>含图标 + 文件名 + 修改时间，图标用<svg>内联或伪元素实现更稳 -
<div class="repository-content">：右侧主内容区，注意pre code块默认有上下 margin，要重置为margin: 0
CSS 中必须覆盖的 GitHub 默认样式冲突点
直接复制 GitHub 的 class 名（如 .js-repo-nav）没用——它们依赖大量 JS 注入的动态 class 和内联 style。真正起效的是几个基础规则，但极易被忽略：
-
box-sizing: border-box必须全局声明，否则width: 20%+padding: 10px会导致左侧栏撑出容器 -
font-family要写全栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif，缺任意一项都可能让文字发虚或换行异常 -
a:hover的下划线颜色必须设为rgba(0,0,0,0.2)，GitHub 用的是半透色，纯黑色会显得生硬 -
img标签默认有vertical-align: baseline，导致和文字不对齐，统一加vertical-align: middle
文件图标和语言标识怎么不靠字体图标也能还原
GitHub 实际用的是 SVG sprite（一个大 SVG 文件里多个 <symbol>），但你没必要引入整套。最轻量且准确的做法是：为常见类型（.js、.css、.md、.html）各写一个内联 <svg>，用 class 控制显示/隐藏。
立即学习“前端免费学习笔记（深入）”；
例如 .icon-js 对应 JavaScript 文件：
<svg class="icon-js" viewBox="0 0 16 16" width="16" height="16"> <path fill="#f1e05a" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/> </svg>
关键点：SVG 的 viewBox 和 fill 必须匹配 GitHub 官方值，否则颜色和缩放会偏差。
为什么用 float 而不是 flex 更贴近真实效果
GitHub 仓库页左侧文件树固定宽 272px，右侧内容区占满剩余空间，但顶部 tab 导航栏需要横跨整个容器宽度（包括左侧栏上方）。如果用 display: flex，tab 栏会被限制在 flex 容器内，无法自然延伸到左侧栏正上方；而用 float: left + margin-left 组合，能精确复现这种「视觉上连续但 DOM 上分离」的布局逻辑。
实操时注意：
- 左侧栏加
float: left; width: 272px; - 右侧内容区加
margin-left: 272px;（不是flex: 1） - 顶部 tab 导航放在两个区块外层，用
width: 100%和clear: both确保它独占一行 - 所有浮动元素后必须跟
<div style="clear:both"></div>，否则父容器高度会塌陷
这个细节决定了页面是否在不同分辨率下保持 GitHub 原版的呼吸感——不是像素级一致，而是视觉节奏一致。
