尧图网页设计 
简介这套包含36个网站实例的前端源码包面向前端开发者和初学者旨在解决“想学习不同类型网页布局却缺少完整实例”的问题。通过研究示例可以掌握 HTML/CSS/JavaScript 在单页、多栏、瀑布流、网格等布局中的具体应用方式理解 Flexbox、Grid 的适配手法以及交互模块的搭建思路。压缩包内共2000个文件体积约65.63MB以 png/jpg/gif 图片素材与 js/html/css 源码为主另含 htc、php、xml 及字体文件等覆盖页面结构、样式、行为与部分动态效果适合按真实项目结构对照学习。目前已有5468人学习下载规模可观。这些示例大多包含完整目录和可运行页面部分基于成熟 CSS 框架搭建可借助配套图片与脚本直接预览通过逐一拆解目录组织、标签嵌套和样式命名能快速积累多类型站点的实现经验为自主创作提供直接参考。1. 36 个网站源代码从静态站到后台模板一次拿全前端布局的“后悔药”我最早是从一个几乎被删空的网盘里找到这批资源的。36 个网站源代码全部是 HTML CSS JavaScript 的静态实现没有后端依赖解压后双击 index.html 就能在浏览器里跑起来。对刚入门前端、或者正在做毕设/课设但不想从零调布局的人来说这就是现成的布局参考手册。我拆完这套东西之后最直接的感受是它覆盖了 90% 日常见到的网站类型——企业官网、后台管理、个人主页、电商列表页、博客、登录页都有每个项目的 HTML 结构写得都不含糊CSS 也不是应付式的堆叠。适合人群很明确想短时间对照多种常见布局的人、需要迅速搭起页面骨架的开发者以及带学生的老师。不用配环境、不用装数据库浏览器就是你的运行环境。下面我会先讲清楚这套资源里到底有什么值得抄的再从复现、改源码、上线的完整链路拆一遍最后把我在 Windows 和 macOS 上跑这些 HTML 时踩过的坑全部列出来。2. 资源大盘点36 个项目的分类、选中标准和布局特征2.1 先看全貌这批源码按“类型”分不按“框架”分整包 36 个文件作者是按网站用途来分类的没有按 React/Vue 这种框架切分全是原生前端三件套。我打开文件目录后整理了一份清单方便你对照着找项目类型归类大致数量典型场景核心布局特征企业官网/公司介绍8科技公司、建筑公司、咨询机构大图 Banner 分栏信息 底部导航后台管理面板6数据看板、CMS 管理左侧边栏 顶部状态栏 内容卡片区个人主页/博客6作品集、个人介绍居中版式、大字号标题、时间线布局电商/产品展示6数码产品、服饰商店商品网格 筛选栏 详情页弹窗登录/注册页3各类系统入口居中表单卡片、左右分屏式登录单页小工具7计算器、图片画廊、404 页面单页集中布局、局部 JS 交互这里要说明一下这个分类是我自己按页面结构归的源码包里没有这样的文件夹组织方式。我强烈建议你拿到手后先按这个维度整理一遍目录因为太多人习惯直接全部解压到桌面然后花一个小时找“到底哪个项目对应哪个页面”——这是这套资源利用率低的最大原因。选项目时我的标准很简单优先看 CSS 文件的命名是否规范、布局是否用的是 Flexbox 而不是纯 float。这套代码里有几个项目的 CSS 文件的命名不统一但也正因如此你反而能同时看到不同年代的写法和边界。2.2 挑两个项目拆布局企业官网和后台面板的骨架长什么样我以典型的“某科技公司官网”项目目录名类似于company_blue为例它的首页结构非常典型适合作为第一个拆解对象。打开index.html核心骨架代码大致如下body header classsite-header div classcontainer header-flex div classlogoLOGO/div nav classmain-nav ul lia href#home首页/a/li lia href#about关于/a/li lia href#service服务/a/li lia href#contact联系/a/li /ul /nav /div /header section idhome classbanner div classbanner-text h1专业解决方案/h1 p为中小型企业提供数字化服务/p a href#service classbtn-primary了解更多/a /div /section section idabout classabout-section div classcontainer div classabout-grid two-columns div classabout-img图片占位/div div classabout-content h2关于我们/h2 p公司介绍文字.../p /div /div /div /section /body这一段值得注意的地方有两点。header-flex和two-columns都是典型的 Flex 容器布局思路就是“一排摆不下就换行、间距交给 gap 控制”这是现代浏览器布局的主流做法比 float 好调得多。另一个细节是锚点导航href#service对应section idservice这意味着页面是单页滚动定位不是多页跳转。如果你想把这种单页结构改成多页只需要把a标签的href改成另一个 HTML 文件路径即可。再看后台管理面板项目目录名类似admin_dashboard_dark它的侧边栏逻辑是这样写的aside classsidebar div classsidebar-headerAdmin Panel/div ul classsidebar-menu li classmenu-item active仪表盘/li li classmenu-item订单管理/li li classmenu-item用户列表/li li classmenu-item设置/li /ul /aside main classmain-content div classtopbar搜索 / 用户头像 / 通知/div div classcontent-grid div classcard stat-card订单数/div div classcard stat-card销售额/div div classcard stat-card访问量/div /div div classcontent-grid wide-chart div classchart-placeholder图表容器/div /div /main这套布局的精髓在于sidebar是固定宽度一般是 240px 或 260pxmain-content用flex: 1自动填满剩余空间。如果你要做自己的后台项目直接把这个骨架拎出来改就行。注意menu-item的那个active类它控制的是当前选中项的左侧高亮条通常会配合::before伪元素实现这也是后台管理页面最常用的交互细节。2.3 为什么原生三件套反而比框架更适合用来学布局可能有人会问现在不都流行 Vue 和 React 吗我花了一个下午把这 36 个项目的 HTML 和 CSS 代码全部看了一遍发现纯原生的好处比我想象的明显。框架会把布局拆成组件但组件之间的通信和样式作用域会分散注意力反而不利于聚焦“这行 CSS 到底生成了什么效果”。在资源包里你能直接看到 CSS 文件的完整内容没有经过scoped或CSS Modules的处理每一条规则都是全局的出问题找起来很快。另一个好处是兼容性好——这套源码里没有用到任何需要编译的语法link标签引的 CSS 文件路径是相对路径拿到任何环境都能跑。3. 本地复现与代码分析从解压到读懂每个细节3.1 本地运行的三个步骤与文件结构检查这套资源在本地跑起来的门槛非常低但正因为太低很多人反而跳过了“先验证文件完整性”这步直接去改代码最后不知道错在哪。我强烈建议你按下面这个流程来操作。第一步解压后先看目录结构是否完整。正常情况应该是每个项目一个文件夹里面至少有一个index.html和一个css子目录部分项目带js目录。可以用下面的命令快速确认find . -type d -name index.html 2/dev/null || dir /s /b index.html上面这条命令在 Windows 上用dir /s /b在 macOS/Linux 上用find目的是把所有含index.html的目录找出来。如果你发现某个目录里没有index.html那说明文件包可能不完整后面排查时会很麻烦。第二步双击index.html在浏览器打开。此时地址栏是file:///开头的本地路径。第三步右键查看页面源代码快捷键是 CtrlU 或 CmdU然后确认link标签的href路径和实际 CSS 文件路径是否对得上link relstylesheet hrefcss/style.css如果是上面这种写法说明css/style.css必须和index.html同级。如果你调整了目录层级比如把index.html挪到了子目录那么css/style.css这个相对路径就会断裂样式会全部丢失只剩裸的 HTML 标签。3.2 用浏览器开发者工具定位布局样式从什么地方开始读代码打开任意一个项目的页面按 F12 进入开发者工具选到 Elements 面板点击左上角的箭头图标选中页面上的任意元素右侧 Styles 面板会列出所有的匹配规则。我一般会做三件事逻辑很直接查body上面有没有font-family预设查外层容器有没有设max-width查用了多少 Flex 容器。body { font-family: PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }这段代码里的font-family特意把中文和英文字体都列出来了max-width加margin: 0 auto是水平居中最标准的写法。padding: 0 15px的作用是防止内容在窄屏下直接贴住浏览器边缘这也是判断一个布局用没用响应式思路的关键线索。接下来我要说一个排查页面渲染问题的核心断点在开发者工具的 Console 面板执行下面这段 JavaScript可以直接把性能数据拉出来不用手动点几十次const entries performance.getEntriesByType(resource); const slowResources entries .filter(item item.duration 100) .map(item ({ name: item.name.split(/).pop(), duration: Math.round(item.duration) })); console.table(slowResources);这段脚本会遍历页面加载的所有资源图片、CSS、JS把加载耗时超过 100ms 的资源列成表格。如果你发现某个图片资源耗时特别长大概率是 JPG/PNG 体积过大而没有压缩此时优先做图片压缩。注意脚本里的duration是后端返回耗时不包含从硬盘读取的时间所以本地file://协议下数字会偏小但依然能看出“哪些资源更重”。3.3 读懂 CSS 布局三大属性position / flex / grid 的使用边界36 个项目中绝大多数使用 Flex 居中方案只有少数几个项目用了grid。我先说结论栅格布局适合“二维对齐”的场景比如商品列表、图片画廊Flex 适合“一维排列”的场景比如导航栏、纵向卡片流。position则是最后的选择它用来做元素覆盖。如果要在这套资源里玩一遍 Grid电商项目product_showcase_grid里的核心代码是.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding: 20px 0; }repeat(auto-fit, minmax(240px, 1fr))的意思是让浏览器自动计算每行能放几个商品卡片每一列最少 240px剩余的宽度由1fr均分。这套写法的效果是窗口缩窄时商品卡片会从一行 5 个变成 4 个、3 个自动换行。如果你项目里的布局是固定 4 列不许变形的那建议改成grid-template-columns: repeat(4, 1fr);但这样在窄屏上就会横向溢出——取舍取决于你到底要跟随视口自适应还是保持固定设计。3.4 修改导航栏和配色把这套源码变成自己的作品的思路这个环节我建议从最小改动开始。第一步改导航文字第二步改 CSS 变量配色第三步替换图片素材。这里有一个前置检查先看项目的 CSS 里有没有定义:root变量。:root { --primary-color: #2e6df6; --sidebar-width: 240px; --content-padding: 16px; }如果找到了:root变量说明作者有意识地做了主题化设计你只需要修改--primary-color就能全局换色。但如果你的项目里没有这些变量而许多页面文件把颜色硬编码在多个地方那你会被逼着到处查找替换。此时我通常直接用编辑器全文搜索十六进制颜色值像#2e6df6、#333、#fff注意要在.html和.css两个文件类型里都搜一遍因为这些项目里有的颜色直接写在标签的style属性上有的写在 CSS 类里。如果你用 VS Code 打开整个资源包目录全文件夹搜索快捷键是 CtrlShiftFmacOS 上是 CmdShiftF把所有匹配项批量替换掉即可。4. 常见问题与避坑记录这 5 个坑我反复遇到提前说清楚4.1 页面打开后只有文字没有样式所有 CSS 全丢现象双击index.html后页面呈现丑陋的纯 HTML所有颜色、布局、背景图全部消失控制台里全是红色报错Failed to load resource: net::ERR_FILE_NOT_FOUND。原因相对路径断裂。最常见的情形是用户把index.html单独复制到了桌面而css/和js/文件夹还在原目录。因为 HTML 里的hrefcss/style.css是相对的浏览器从 HTML 所在目录找css文件夹找不到就报错。还有一种情况是在编辑器里只打开了index.html而没有打开整个项目文件夹。解决回到原始文件结构用 VS Code 的 File → Open Folder 打开整个项目目录确保index.html、css、js都在同一个根目录下然后右键index.html选择“Open with Live Server”。如果还是丢样式按 F12 看 Network 面板里的 CSS 请求路径请求路径会直接告诉你浏览器去哪里找文件。4.2 页面中文全部变成乱码标题和段落都是“鏂囨寜”现象HTML 里的中文内容显示为方块或乱码但浏览器地址栏显示文件编码正常。原因HTML 文件本身的编码和浏览器解码方式不匹配。这批源码里不少文件是 GBK/GB2312 编码保存的或者是没有声明meta charsetUTF-8。浏览器默认用 UTF-8 解码遇到 GBK 的中文就乱了。解决打开index.html文件头部检查有没有这一行meta charsetUTF-8如果没有手动补上。如果补完仍然乱码说明文件物理编码是 GBK需要转换。在 VS Code 里点击右下角编码显示区通常显示“UTF-8”选“通过编码重新打开”再选“简体中文GBK”就能恢复。然后选择“通过编码保存”为 UTF-8一劳永逸地统一编码。4.3 背景图或头像图片加载不出来显示空白的占位图标现象页面结构正常文字能显示但所有img标签的图片位置是破图图标或空白。原因图片路径大小写不一致。比如 HTML 里写的是srcimages/banner.jpg但实际文件夹里文件名是Banner.jpg。这些源码在 Windows 上测试时文件系统大小写不敏感所以能跑到了 macOS 或 Linux 上路径一点都不能差直接 404。解决在终端跑一遍下面的命令把目录里的所有图片文件列出来仔细核对名称是否与 HTML 里的引用完全一致find . -type f \( -name *.jpg -o -name *.png -o -name *.gif \) | sort在 Windows 上用 PowerShell 可以这样Get-ChildItem -Recurse -Include *.jpg,*.png,*.gif | Select-Object FullName另外建议优先使用英文文件名避免空格和中文路径。有些项目里把广告图命名为“轮播图 1.jpg”这类带空格的文件名在 URL 解析时会被转义成%20有些浏览器能容忍有些不能所以直接重命名是最根治的方案。4.4 页面在手机端打开后右侧多出一大块空白可以左右滑动现象用手机或浏览器开发者工具切换移动模式后页面出现横向滚动条右侧是一片空白。原因某个元素固定宽度超过视口宽度。多数情况是width: 1200px直接写死在某个轮播图或表格上或者是未设置viewportmeta 标签导致浏览器按桌面宽度渲染。解决先把head中的 viewport 补上这是移动端适配的地基meta nameviewport contentwidthdevice-width, initial-scale1.0在 CSS 中加一个全局兜底规则快速定位是哪个元素超出宽度* { max-width: 100%; box-sizing: border-box; }上面的规则先用*选择器把所有元素的box-sizing改成border-box避免 padding 把元素撑大然后max-width: 100%限制元素最大宽度。注意这条兜底规则只是“临时止住血”加上它之后右侧空白消失说明问题确实是某个元素宽度溢出。再逐个元素排查即可常见的大宽元素包括table、固定宽度图片、pre代码块。4.5 某些页面在 Chrome 里正常在 Safari 里布局变乱现象同一个页面 Chrome 下完全正常Safari 下 Flex 子项溢出、间距错乱。原因Safari 对部分 Flex 属性的自动伸缩取值支持有差异主要是flex: 1的默认行为。Chrome 里写flex: 1等价于flex: 1 1 0%Safari 的旧版本可能解析为flex: 1 1 auto导致子项的min-width自动取内容宽度撑破了容器。解决不要只写flex: 1写上完整的三段式写法并加上min-width: 0.flex-item { flex: 1 1 0%; min-width: 0; }我自己在这套源码上测试时发现了最少 4 个项目的侧边栏布局在 Safari 里会出现菜单被压缩的情况加完min-width: 0后全部正常了。建议你改完 CSS 后顺手用 macOS 的 Safari 或者提供 WebKit 内核的浏览器过一遍别只盯着 Chrome 一个内核。5. 改造与上线从本地file://到网络访问的完整落地上线链路5.1 用 VS Code Live Server 把静态站改成开发服务器模式本地双击 HTML 是一种方式但它无法模拟真实的网络环境AJAX 请求、模块加载都会受限。所以我拿到这套源码后的第一步永远是先把项目放进 VS Code并启动 Live Server。安装扩展很简单在 VS Code 扩展面板搜 “Live Server”安装后右键index.html选择“Open with Live Server”。这会启动一个本地服务默认地址是http://127.0.0.1:5500浏览器自动打开。{ liveServer.settings.port: 5500, liveServer.settings.root: ./ }我在.vscode/settings.json里固定端口为 5500因为频繁变化端口会导致浏览器缓存旧页面调试起来非常影响效率。设置好之后每次改动index.html或 CSS 文件保存的瞬间页面自动刷新效率比双击 HTML 高很多。这步的唯一坑是如果你打开的文件夹是整个 36 个项目的大根目录Live Server 会把根目录暴露为站点根路径。此时访问http://127.0.0.1:5500显示的是整个目录列表需要手动进到对应子文件夹。我建议对单一项目开 Live Server不要在大目录上跑不然每次都要多点几层路径。5.2 用 Nginx 或 Caddy 部署成一个可访问的静态站点如果你想把这套源码正式部署到服务器上用 Nginx 是最稳的方式。以 Ubuntu 服务器为例先安装 Nginxsudo apt update sudo apt install nginx -y然后把项目文件上传到/var/www/html/目录下你可以直接把某个项目的内容复制过去sudo cp -r ./company_blue/* /var/www/html/ sudo chown -R www-data:www-data /var/www/html/ sudo chmod -R 755 /var/www/html/上面的chown和chmod的目的是让 Nginx 的工作进程有权限读取文件。这里要注意如果目录权限不对Nginx 会返回403 Forbidden看到这个错误先排查目录权限。接着修改 Nginx 配置server { listen 80; server_name your_domain.com; root /var/www/html; index index.html; location / { try_files $uri $uri/ 404; } }try_files $uri $uri/ 404;的作用是先尝试直接访问路径对应的文件不行再尝试对应的目录最后都找不到就返回 404。这避免了某些静态文件路径带不带结尾斜杠的干扰。如果你只是想临时给同事看效果不想买服务器用 Caddy 更省事。在安装了 Caddy 的机器上只需要两个文件Caddyfile内容为your_domain.com \n root * /path/to/project。Caddy 自动申请 HTTPS 证书免去手动配证书的麻烦。需要提醒一句Caddy 的自动 HTTPS 只在公网域名下生效如果是局域网 IP 访问它不会自动签发证书直接 HTTP 访问即可。5.3 用 GitHub Pages 免费托管并解决资源引用路径问题GitHub Pages 是最适合前端静态网站的免费托管方式。它有一个著名的路径坑如果你的项目放在https://username.github.io/repo-name/这个子路径下那么 HTML 里原来的相对路径hrefcss/style.css会解析成https://username.github.io/repo-name/css/style.css此时依然正常但如果 HTML 里写的是以/开头的绝对路径/css/style.css它会被解析成https://username.github.io/css/style.css直接 404。所以在上传到 GitHub 之前全项目搜索一下有没有以/开头的资源引用grep -r href\/ . --include*.html grep -r src\/ . --include*.html如果搜索结果是空的说明全部是相对路径直接推到 GitHub Pages 就可运行。如果搜出了不少以/开头的引用要么改成相对路径要么在仓库的根目录加一个_config.yml配置baseurl: /repo-name相对路径方案更省事不用每处引用改两次。我把自己改好的一套company_blue推上了 Pages完全没动代码填好仓库名后访问正常能出来的效果基本和本地一模一样。6. 进阶玩法把 36 个项目变成你自己的前端参考索引库6.1 读书源码的优先级HTML → CSS → JS → 动效拆完这套资源后我对“怎么从一堆 HTML 文件里快速学到东西”有了一套固定的流程。第一次打开一个陌生项目我不会按从上到下的顺序读 HTML而是先搜script判断 JS 文件是否有实际逻辑再打开 CSS 文件查看变量定义和布局属性最后回到 HTML 看结构嵌套关系。核心原因在于许多纯静态页面项目里JS 只是做了简单的交互——比如点击按钮弹出模态框、滚动到某个位置显示导航栏阴影。先把 JS 的体量摸清了你就知道这个项目的复杂等级了。另外我注意到这套资源里有几个项目使用了老式的position: absolute配合百分比实现居中写法和现代 Flex/Grid 完全不同。遇到这种写法值得拿来练手尝试用 Flex 重写一遍同样的布局对比两种写法的代码量和页面表现。我个人更推荐 Flex/Grid 的现代方案理由只有一个不需要手动计算偏移量。6.2 用本地脚本批量整理出这 36 个项目的信息表有 36 个目录全部靠手动记录它们的主题、配色、布局类型确实麻烦。我写了下面这段 Python 脚本直接批量读取每个目录里的 HTML 文件抓取title然后输出一个信息表import os import re from pathlib import Path root Path(./) for folder in sorted(root.iterdir()): if not folder.is_dir(): continue index_file folder / index.html if not index_file.exists(): print(f{folder.name}: no index.html) continue html_text index_file.read_text(encodingutf-8, errorsignore) title_match re.search(rtitle(.*?)/title, html_text, re.IGNORECASE) title title_match.group(1).strip() if title_match else untitled meta_desc re.search(rnamedescription\scontent(.*?), html_text, re.IGNORECASE) desc meta_desc.group(1)[:50] if meta_desc else print(f{folder.name} | {title} | {desc})脚本的作用是从每个项目目录的index.html里提取title和description的meta标签一次性输出全目录的项目索引。注意Path.iterdir()是按字典序排列的所以输出顺序不一定是原来的01、02顺序但文件名足够辨认。errorsignore用来跳过编码报错因为我们已经知道部分文件是 GBK 编码直接忽略编码错误提取 ASCII 部分更容易跑通。6.3 判断一个前端资源值不值得看的三个时间节点拆完这套一共 36 个项目的资源后我形成了一套自己的判断方法比看“还有多少个 G”实用得多。第一个节点是打开 HTML 后看它有没有使用原生模块化或者目录分层有css/js/images三个并行的子目录、命名规律的项目说明作者有工程化习惯你可以直接往里面拖新页面所有文件平铺在一层、名字叫1.html2.html的说明作者的维护成本高改造之前最好先花 30 分钟重构目录结构。第二个节点是看 CSS 文件的体量。如果项目里单个 CSS 文件超过 1500 行且全文搜不到注释分隔线说明这是一个“一次性堆砌”的项目临场可用但不适合当长期维护的基底。如果 CSS 有变量定义段、组件注释段说明是可以用进正式项目的。第三个节点是检查 HTML 里是否使用了语义化标签。项目里有header、nav、main、footer页面结构会清楚很多全是div套div的话这个页面适合直接当“最终效果参考”但不值得花时间拆结构。我通常会把一个项目文件夹强制走一遍这三个判断节点再决定要不要放进“可复用的组件库”里。6.4 把这套资源沉淀成自己的“组件剪贴板”最终我在本地建立了一个snippets/文件夹把 36 个项目中值得重复用的几类代码块单独抽出来导航栏组件、卡片网格、分栏布局、按钮样式、后台侧边栏。抽的时候我用一个简单规则只抽那些我改过参数后仍然好用的片段不抽那些和原项目强耦合的代码。举个例子“卡片式团队成员”这段代码原作者用了固定宽度300px。我抽取后改成minmax(240px, 1fr)放进自己的片段库从此以后只要是做团队介绍页直接用这段宽度自适应加上间距由gap控制省掉大量重复的调margin的时间。复盘整个拆解过程我想起当初第一次使用这批源码时走的一段弯路因为没看清楚文件编码就直接改了内容结果项目里所有中文全部变为乱码。后面我养成了一个习惯不管打开任何 HTML 资源先用file命令确认编码再动手改内容。如果你当前也在做前端学习或者亟需一个拿来即用的页面可以按上面的方法把这套资源用好。希望这份笔记能帮你少走一点弯路。本文还有配套的精品资源点击获取 36个网站源代码全解析：前端布局参考与实战避坑指南
简介这套包含36个网站实例的前端源码包面向前端开发者和初学者旨在解决“想学习不同类型网页布局却缺少完整实例”的问题。通过研究示例可以掌握 HTML/CSS/JavaScript 在单页、多栏、瀑布流、网格等布局中的具体应用方式理解 Flexbox、Grid 的适配手法以及交互模块的搭建思路。压缩包内共2000个文件体积约65.63MB以 png/jpg/gif 图片素材与 js/html/css 源码为主另含 htc、php、xml 及字体文件等覆盖页面结构、样式、行为与部分动态效果适合按真实项目结构对照学习。目前已有5468人学习下载规模可观。这些示例大多包含完整目录和可运行页面部分基于成熟 CSS 框架搭建可借助配套图片与脚本直接预览通过逐一拆解目录组织、标签嵌套和样式命名能快速积累多类型站点的实现经验为自主创作提供直接参考。1. 36 个网站源代码从静态站到后台模板一次拿全前端布局的“后悔药”我最早是从一个几乎被删空的网盘里找到这批资源的。36 个网站源代码全部是 HTML CSS JavaScript 的静态实现没有后端依赖解压后双击 index.html 就能在浏览器里跑起来。对刚入门前端、或者正在做毕设/课设但不想从零调布局的人来说这就是现成的布局参考手册。我拆完这套东西之后最直接的感受是它覆盖了 90% 日常见到的网站类型——企业官网、后台管理、个人主页、电商列表页、博客、登录页都有每个项目的 HTML 结构写得都不含糊CSS 也不是应付式的堆叠。适合人群很明确想短时间对照多种常见布局的人、需要迅速搭起页面骨架的开发者以及带学生的老师。不用配环境、不用装数据库浏览器就是你的运行环境。下面我会先讲清楚这套资源里到底有什么值得抄的再从复现、改源码、上线的完整链路拆一遍最后把我在 Windows 和 macOS 上跑这些 HTML 时踩过的坑全部列出来。2. 资源大盘点36 个项目的分类、选中标准和布局特征2.1 先看全貌这批源码按“类型”分不按“框架”分整包 36 个文件作者是按网站用途来分类的没有按 React/Vue 这种框架切分全是原生前端三件套。我打开文件目录后整理了一份清单方便你对照着找项目类型归类大致数量典型场景核心布局特征企业官网/公司介绍8科技公司、建筑公司、咨询机构大图 Banner 分栏信息 底部导航后台管理面板6数据看板、CMS 管理左侧边栏 顶部状态栏 内容卡片区个人主页/博客6作品集、个人介绍居中版式、大字号标题、时间线布局电商/产品展示6数码产品、服饰商店商品网格 筛选栏 详情页弹窗登录/注册页3各类系统入口居中表单卡片、左右分屏式登录单页小工具7计算器、图片画廊、404 页面单页集中布局、局部 JS 交互这里要说明一下这个分类是我自己按页面结构归的源码包里没有这样的文件夹组织方式。我强烈建议你拿到手后先按这个维度整理一遍目录因为太多人习惯直接全部解压到桌面然后花一个小时找“到底哪个项目对应哪个页面”——这是这套资源利用率低的最大原因。选项目时我的标准很简单优先看 CSS 文件的命名是否规范、布局是否用的是 Flexbox 而不是纯 float。这套代码里有几个项目的 CSS 文件的命名不统一但也正因如此你反而能同时看到不同年代的写法和边界。2.2 挑两个项目拆布局企业官网和后台面板的骨架长什么样我以典型的“某科技公司官网”项目目录名类似于company_blue为例它的首页结构非常典型适合作为第一个拆解对象。打开index.html核心骨架代码大致如下body header classsite-header div classcontainer header-flex div classlogoLOGO/div nav classmain-nav ul lia href#home首页/a/li lia href#about关于/a/li lia href#service服务/a/li lia href#contact联系/a/li /ul /nav /div /header section idhome classbanner div classbanner-text h1专业解决方案/h1 p为中小型企业提供数字化服务/p a href#service classbtn-primary了解更多/a /div /section section idabout classabout-section div classcontainer div classabout-grid two-columns div classabout-img图片占位/div div classabout-content h2关于我们/h2 p公司介绍文字.../p /div /div /div /section /body这一段值得注意的地方有两点。header-flex和two-columns都是典型的 Flex 容器布局思路就是“一排摆不下就换行、间距交给 gap 控制”这是现代浏览器布局的主流做法比 float 好调得多。另一个细节是锚点导航href#service对应section idservice这意味着页面是单页滚动定位不是多页跳转。如果你想把这种单页结构改成多页只需要把a标签的href改成另一个 HTML 文件路径即可。再看后台管理面板项目目录名类似admin_dashboard_dark它的侧边栏逻辑是这样写的aside classsidebar div classsidebar-headerAdmin Panel/div ul classsidebar-menu li classmenu-item active仪表盘/li li classmenu-item订单管理/li li classmenu-item用户列表/li li classmenu-item设置/li /ul /aside main classmain-content div classtopbar搜索 / 用户头像 / 通知/div div classcontent-grid div classcard stat-card订单数/div div classcard stat-card销售额/div div classcard stat-card访问量/div /div div classcontent-grid wide-chart div classchart-placeholder图表容器/div /div /main这套布局的精髓在于sidebar是固定宽度一般是 240px 或 260pxmain-content用flex: 1自动填满剩余空间。如果你要做自己的后台项目直接把这个骨架拎出来改就行。注意menu-item的那个active类它控制的是当前选中项的左侧高亮条通常会配合::before伪元素实现这也是后台管理页面最常用的交互细节。2.3 为什么原生三件套反而比框架更适合用来学布局可能有人会问现在不都流行 Vue 和 React 吗我花了一个下午把这 36 个项目的 HTML 和 CSS 代码全部看了一遍发现纯原生的好处比我想象的明显。框架会把布局拆成组件但组件之间的通信和样式作用域会分散注意力反而不利于聚焦“这行 CSS 到底生成了什么效果”。在资源包里你能直接看到 CSS 文件的完整内容没有经过scoped或CSS Modules的处理每一条规则都是全局的出问题找起来很快。另一个好处是兼容性好——这套源码里没有用到任何需要编译的语法link标签引的 CSS 文件路径是相对路径拿到任何环境都能跑。3. 本地复现与代码分析从解压到读懂每个细节3.1 本地运行的三个步骤与文件结构检查这套资源在本地跑起来的门槛非常低但正因为太低很多人反而跳过了“先验证文件完整性”这步直接去改代码最后不知道错在哪。我强烈建议你按下面这个流程来操作。第一步解压后先看目录结构是否完整。正常情况应该是每个项目一个文件夹里面至少有一个index.html和一个css子目录部分项目带js目录。可以用下面的命令快速确认find . -type d -name index.html 2/dev/null || dir /s /b index.html上面这条命令在 Windows 上用dir /s /b在 macOS/Linux 上用find目的是把所有含index.html的目录找出来。如果你发现某个目录里没有index.html那说明文件包可能不完整后面排查时会很麻烦。第二步双击index.html在浏览器打开。此时地址栏是file:///开头的本地路径。第三步右键查看页面源代码快捷键是 CtrlU 或 CmdU然后确认link标签的href路径和实际 CSS 文件路径是否对得上link relstylesheet hrefcss/style.css如果是上面这种写法说明css/style.css必须和index.html同级。如果你调整了目录层级比如把index.html挪到了子目录那么css/style.css这个相对路径就会断裂样式会全部丢失只剩裸的 HTML 标签。3.2 用浏览器开发者工具定位布局样式从什么地方开始读代码打开任意一个项目的页面按 F12 进入开发者工具选到 Elements 面板点击左上角的箭头图标选中页面上的任意元素右侧 Styles 面板会列出所有的匹配规则。我一般会做三件事逻辑很直接查body上面有没有font-family预设查外层容器有没有设max-width查用了多少 Flex 容器。body { font-family: PingFang SC, Microsoft YaHei, sans-serif; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }这段代码里的font-family特意把中文和英文字体都列出来了max-width加margin: 0 auto是水平居中最标准的写法。padding: 0 15px的作用是防止内容在窄屏下直接贴住浏览器边缘这也是判断一个布局用没用响应式思路的关键线索。接下来我要说一个排查页面渲染问题的核心断点在开发者工具的 Console 面板执行下面这段 JavaScript可以直接把性能数据拉出来不用手动点几十次const entries performance.getEntriesByType(resource); const slowResources entries .filter(item item.duration 100) .map(item ({ name: item.name.split(/).pop(), duration: Math.round(item.duration) })); console.table(slowResources);这段脚本会遍历页面加载的所有资源图片、CSS、JS把加载耗时超过 100ms 的资源列成表格。如果你发现某个图片资源耗时特别长大概率是 JPG/PNG 体积过大而没有压缩此时优先做图片压缩。注意脚本里的duration是后端返回耗时不包含从硬盘读取的时间所以本地file://协议下数字会偏小但依然能看出“哪些资源更重”。3.3 读懂 CSS 布局三大属性position / flex / grid 的使用边界36 个项目中绝大多数使用 Flex 居中方案只有少数几个项目用了grid。我先说结论栅格布局适合“二维对齐”的场景比如商品列表、图片画廊Flex 适合“一维排列”的场景比如导航栏、纵向卡片流。position则是最后的选择它用来做元素覆盖。如果要在这套资源里玩一遍 Grid电商项目product_showcase_grid里的核心代码是.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding: 20px 0; }repeat(auto-fit, minmax(240px, 1fr))的意思是让浏览器自动计算每行能放几个商品卡片每一列最少 240px剩余的宽度由1fr均分。这套写法的效果是窗口缩窄时商品卡片会从一行 5 个变成 4 个、3 个自动换行。如果你项目里的布局是固定 4 列不许变形的那建议改成grid-template-columns: repeat(4, 1fr);但这样在窄屏上就会横向溢出——取舍取决于你到底要跟随视口自适应还是保持固定设计。3.4 修改导航栏和配色把这套源码变成自己的作品的思路这个环节我建议从最小改动开始。第一步改导航文字第二步改 CSS 变量配色第三步替换图片素材。这里有一个前置检查先看项目的 CSS 里有没有定义:root变量。:root { --primary-color: #2e6df6; --sidebar-width: 240px; --content-padding: 16px; }如果找到了:root变量说明作者有意识地做了主题化设计你只需要修改--primary-color就能全局换色。但如果你的项目里没有这些变量而许多页面文件把颜色硬编码在多个地方那你会被逼着到处查找替换。此时我通常直接用编辑器全文搜索十六进制颜色值像#2e6df6、#333、#fff注意要在.html和.css两个文件类型里都搜一遍因为这些项目里有的颜色直接写在标签的style属性上有的写在 CSS 类里。如果你用 VS Code 打开整个资源包目录全文件夹搜索快捷键是 CtrlShiftFmacOS 上是 CmdShiftF把所有匹配项批量替换掉即可。4. 常见问题与避坑记录这 5 个坑我反复遇到提前说清楚4.1 页面打开后只有文字没有样式所有 CSS 全丢现象双击index.html后页面呈现丑陋的纯 HTML所有颜色、布局、背景图全部消失控制台里全是红色报错Failed to load resource: net::ERR_FILE_NOT_FOUND。原因相对路径断裂。最常见的情形是用户把index.html单独复制到了桌面而css/和js/文件夹还在原目录。因为 HTML 里的hrefcss/style.css是相对的浏览器从 HTML 所在目录找css文件夹找不到就报错。还有一种情况是在编辑器里只打开了index.html而没有打开整个项目文件夹。解决回到原始文件结构用 VS Code 的 File → Open Folder 打开整个项目目录确保index.html、css、js都在同一个根目录下然后右键index.html选择“Open with Live Server”。如果还是丢样式按 F12 看 Network 面板里的 CSS 请求路径请求路径会直接告诉你浏览器去哪里找文件。4.2 页面中文全部变成乱码标题和段落都是“鏂囨寜”现象HTML 里的中文内容显示为方块或乱码但浏览器地址栏显示文件编码正常。原因HTML 文件本身的编码和浏览器解码方式不匹配。这批源码里不少文件是 GBK/GB2312 编码保存的或者是没有声明meta charsetUTF-8。浏览器默认用 UTF-8 解码遇到 GBK 的中文就乱了。解决打开index.html文件头部检查有没有这一行meta charsetUTF-8如果没有手动补上。如果补完仍然乱码说明文件物理编码是 GBK需要转换。在 VS Code 里点击右下角编码显示区通常显示“UTF-8”选“通过编码重新打开”再选“简体中文GBK”就能恢复。然后选择“通过编码保存”为 UTF-8一劳永逸地统一编码。4.3 背景图或头像图片加载不出来显示空白的占位图标现象页面结构正常文字能显示但所有img标签的图片位置是破图图标或空白。原因图片路径大小写不一致。比如 HTML 里写的是srcimages/banner.jpg但实际文件夹里文件名是Banner.jpg。这些源码在 Windows 上测试时文件系统大小写不敏感所以能跑到了 macOS 或 Linux 上路径一点都不能差直接 404。解决在终端跑一遍下面的命令把目录里的所有图片文件列出来仔细核对名称是否与 HTML 里的引用完全一致find . -type f \( -name *.jpg -o -name *.png -o -name *.gif \) | sort在 Windows 上用 PowerShell 可以这样Get-ChildItem -Recurse -Include *.jpg,*.png,*.gif | Select-Object FullName另外建议优先使用英文文件名避免空格和中文路径。有些项目里把广告图命名为“轮播图 1.jpg”这类带空格的文件名在 URL 解析时会被转义成%20有些浏览器能容忍有些不能所以直接重命名是最根治的方案。4.4 页面在手机端打开后右侧多出一大块空白可以左右滑动现象用手机或浏览器开发者工具切换移动模式后页面出现横向滚动条右侧是一片空白。原因某个元素固定宽度超过视口宽度。多数情况是width: 1200px直接写死在某个轮播图或表格上或者是未设置viewportmeta 标签导致浏览器按桌面宽度渲染。解决先把head中的 viewport 补上这是移动端适配的地基meta nameviewport contentwidthdevice-width, initial-scale1.0在 CSS 中加一个全局兜底规则快速定位是哪个元素超出宽度* { max-width: 100%; box-sizing: border-box; }上面的规则先用*选择器把所有元素的box-sizing改成border-box避免 padding 把元素撑大然后max-width: 100%限制元素最大宽度。注意这条兜底规则只是“临时止住血”加上它之后右侧空白消失说明问题确实是某个元素宽度溢出。再逐个元素排查即可常见的大宽元素包括table、固定宽度图片、pre代码块。4.5 某些页面在 Chrome 里正常在 Safari 里布局变乱现象同一个页面 Chrome 下完全正常Safari 下 Flex 子项溢出、间距错乱。原因Safari 对部分 Flex 属性的自动伸缩取值支持有差异主要是flex: 1的默认行为。Chrome 里写flex: 1等价于flex: 1 1 0%Safari 的旧版本可能解析为flex: 1 1 auto导致子项的min-width自动取内容宽度撑破了容器。解决不要只写flex: 1写上完整的三段式写法并加上min-width: 0.flex-item { flex: 1 1 0%; min-width: 0; }我自己在这套源码上测试时发现了最少 4 个项目的侧边栏布局在 Safari 里会出现菜单被压缩的情况加完min-width: 0后全部正常了。建议你改完 CSS 后顺手用 macOS 的 Safari 或者提供 WebKit 内核的浏览器过一遍别只盯着 Chrome 一个内核。5. 改造与上线从本地file://到网络访问的完整落地上线链路5.1 用 VS Code Live Server 把静态站改成开发服务器模式本地双击 HTML 是一种方式但它无法模拟真实的网络环境AJAX 请求、模块加载都会受限。所以我拿到这套源码后的第一步永远是先把项目放进 VS Code并启动 Live Server。安装扩展很简单在 VS Code 扩展面板搜 “Live Server”安装后右键index.html选择“Open with Live Server”。这会启动一个本地服务默认地址是http://127.0.0.1:5500浏览器自动打开。{ liveServer.settings.port: 5500, liveServer.settings.root: ./ }我在.vscode/settings.json里固定端口为 5500因为频繁变化端口会导致浏览器缓存旧页面调试起来非常影响效率。设置好之后每次改动index.html或 CSS 文件保存的瞬间页面自动刷新效率比双击 HTML 高很多。这步的唯一坑是如果你打开的文件夹是整个 36 个项目的大根目录Live Server 会把根目录暴露为站点根路径。此时访问http://127.0.0.1:5500显示的是整个目录列表需要手动进到对应子文件夹。我建议对单一项目开 Live Server不要在大目录上跑不然每次都要多点几层路径。5.2 用 Nginx 或 Caddy 部署成一个可访问的静态站点如果你想把这套源码正式部署到服务器上用 Nginx 是最稳的方式。以 Ubuntu 服务器为例先安装 Nginxsudo apt update sudo apt install nginx -y然后把项目文件上传到/var/www/html/目录下你可以直接把某个项目的内容复制过去sudo cp -r ./company_blue/* /var/www/html/ sudo chown -R www-data:www-data /var/www/html/ sudo chmod -R 755 /var/www/html/上面的chown和chmod的目的是让 Nginx 的工作进程有权限读取文件。这里要注意如果目录权限不对Nginx 会返回403 Forbidden看到这个错误先排查目录权限。接着修改 Nginx 配置server { listen 80; server_name your_domain.com; root /var/www/html; index index.html; location / { try_files $uri $uri/ 404; } }try_files $uri $uri/ 404;的作用是先尝试直接访问路径对应的文件不行再尝试对应的目录最后都找不到就返回 404。这避免了某些静态文件路径带不带结尾斜杠的干扰。如果你只是想临时给同事看效果不想买服务器用 Caddy 更省事。在安装了 Caddy 的机器上只需要两个文件Caddyfile内容为your_domain.com \n root * /path/to/project。Caddy 自动申请 HTTPS 证书免去手动配证书的麻烦。需要提醒一句Caddy 的自动 HTTPS 只在公网域名下生效如果是局域网 IP 访问它不会自动签发证书直接 HTTP 访问即可。5.3 用 GitHub Pages 免费托管并解决资源引用路径问题GitHub Pages 是最适合前端静态网站的免费托管方式。它有一个著名的路径坑如果你的项目放在https://username.github.io/repo-name/这个子路径下那么 HTML 里原来的相对路径hrefcss/style.css会解析成https://username.github.io/repo-name/css/style.css此时依然正常但如果 HTML 里写的是以/开头的绝对路径/css/style.css它会被解析成https://username.github.io/css/style.css直接 404。所以在上传到 GitHub 之前全项目搜索一下有没有以/开头的资源引用grep -r href\/ . --include*.html grep -r src\/ . --include*.html如果搜索结果是空的说明全部是相对路径直接推到 GitHub Pages 就可运行。如果搜出了不少以/开头的引用要么改成相对路径要么在仓库的根目录加一个_config.yml配置baseurl: /repo-name相对路径方案更省事不用每处引用改两次。我把自己改好的一套company_blue推上了 Pages完全没动代码填好仓库名后访问正常能出来的效果基本和本地一模一样。6. 进阶玩法把 36 个项目变成你自己的前端参考索引库6.1 读书源码的优先级HTML → CSS → JS → 动效拆完这套资源后我对“怎么从一堆 HTML 文件里快速学到东西”有了一套固定的流程。第一次打开一个陌生项目我不会按从上到下的顺序读 HTML而是先搜script判断 JS 文件是否有实际逻辑再打开 CSS 文件查看变量定义和布局属性最后回到 HTML 看结构嵌套关系。核心原因在于许多纯静态页面项目里JS 只是做了简单的交互——比如点击按钮弹出模态框、滚动到某个位置显示导航栏阴影。先把 JS 的体量摸清了你就知道这个项目的复杂等级了。另外我注意到这套资源里有几个项目使用了老式的position: absolute配合百分比实现居中写法和现代 Flex/Grid 完全不同。遇到这种写法值得拿来练手尝试用 Flex 重写一遍同样的布局对比两种写法的代码量和页面表现。我个人更推荐 Flex/Grid 的现代方案理由只有一个不需要手动计算偏移量。6.2 用本地脚本批量整理出这 36 个项目的信息表有 36 个目录全部靠手动记录它们的主题、配色、布局类型确实麻烦。我写了下面这段 Python 脚本直接批量读取每个目录里的 HTML 文件抓取title然后输出一个信息表import os import re from pathlib import Path root Path(./) for folder in sorted(root.iterdir()): if not folder.is_dir(): continue index_file folder / index.html if not index_file.exists(): print(f{folder.name}: no index.html) continue html_text index_file.read_text(encodingutf-8, errorsignore) title_match re.search(rtitle(.*?)/title, html_text, re.IGNORECASE) title title_match.group(1).strip() if title_match else untitled meta_desc re.search(rnamedescription\scontent(.*?), html_text, re.IGNORECASE) desc meta_desc.group(1)[:50] if meta_desc else print(f{folder.name} | {title} | {desc})脚本的作用是从每个项目目录的index.html里提取title和description的meta标签一次性输出全目录的项目索引。注意Path.iterdir()是按字典序排列的所以输出顺序不一定是原来的01、02顺序但文件名足够辨认。errorsignore用来跳过编码报错因为我们已经知道部分文件是 GBK 编码直接忽略编码错误提取 ASCII 部分更容易跑通。6.3 判断一个前端资源值不值得看的三个时间节点拆完这套一共 36 个项目的资源后我形成了一套自己的判断方法比看“还有多少个 G”实用得多。第一个节点是打开 HTML 后看它有没有使用原生模块化或者目录分层有css/js/images三个并行的子目录、命名规律的项目说明作者有工程化习惯你可以直接往里面拖新页面所有文件平铺在一层、名字叫1.html2.html的说明作者的维护成本高改造之前最好先花 30 分钟重构目录结构。第二个节点是看 CSS 文件的体量。如果项目里单个 CSS 文件超过 1500 行且全文搜不到注释分隔线说明这是一个“一次性堆砌”的项目临场可用但不适合当长期维护的基底。如果 CSS 有变量定义段、组件注释段说明是可以用进正式项目的。第三个节点是检查 HTML 里是否使用了语义化标签。项目里有header、nav、main、footer页面结构会清楚很多全是div套div的话这个页面适合直接当“最终效果参考”但不值得花时间拆结构。我通常会把一个项目文件夹强制走一遍这三个判断节点再决定要不要放进“可复用的组件库”里。6.4 把这套资源沉淀成自己的“组件剪贴板”最终我在本地建立了一个snippets/文件夹把 36 个项目中值得重复用的几类代码块单独抽出来导航栏组件、卡片网格、分栏布局、按钮样式、后台侧边栏。抽的时候我用一个简单规则只抽那些我改过参数后仍然好用的片段不抽那些和原项目强耦合的代码。举个例子“卡片式团队成员”这段代码原作者用了固定宽度300px。我抽取后改成minmax(240px, 1fr)放进自己的片段库从此以后只要是做团队介绍页直接用这段宽度自适应加上间距由gap控制省掉大量重复的调margin的时间。复盘整个拆解过程我想起当初第一次使用这批源码时走的一段弯路因为没看清楚文件编码就直接改了内容结果项目里所有中文全部变为乱码。后面我养成了一个习惯不管打开任何 HTML 资源先用file命令确认编码再动手改内容。如果你当前也在做前端学习或者亟需一个拿来即用的页面可以按上面的方法把这套资源用好。希望这份笔记能帮你少走一点弯路。本文还有配套的精品资源点击获取