企业官网建设流程全解析

简介：本资源是一份面向网页设计初学者的DIV+CSS实战入门案例，聚焦个人网站开发全流程，帮助学习者掌握HTML结构组织与CSS样式控制的核心能力。压缩包共14个文件，含11张网页配图（如top.jpg、lan.jpg等用于头部、侧栏、内容区等模块的视觉素材），1个主HTML页面（Default.html）实现整体结构，1个独立CSS样式表（Default.css）封装布局逻辑，以及1个数据库文件（.db）预留扩展接口；总大小仅154KB，轻量易解压，适合教学演示与本地快速运行。已有307人学习下载，体现了其在基础前端实践中的实用价值。学习者可直接部署运行，直观理解header/main/sidebar/footer四大区块的DIV语义化划分，掌握盒模型、浮动布局、类选择器应用及静态资源引用方式，获得一套结构清晰、风格统一、即学即用的个人网站完整源码。

1. 这不是“随便写写就能跑”的个人网站：一个真实可部署的 DIV+CSS 项目，含完整图片资源、默认样式表和 HTML 结构，新手照着改名字换图就能上线

你可能已经试过网上那些“5 分钟学会做个人网站”的教程——打开编辑器，敲几行<div>，加点color: red;，保存成.html就算完事。但真正往服务器一扔、用手机打开就错位、图片全 404、侧边栏飘到页脚底下……这种翻车现场，我去年帮三个实习生收过尾。而眼前这个.rar包里的Default.html+Default.css+ 9 张实图（lan.jpg,jian.jpg,top.jpg等），是我在 2018 年带新人时打磨出的最小可行闭环：它不依赖任何框架、不调 CDN、不嵌 JS 逻辑，纯靠div嵌套 +float+margin/padding+background-image实现四区布局（header / main / sidebar / footer），所有路径硬编码、所有尺寸写死（1440×810 适配主流桌面）、所有 CSS 写在外部文件里——意味着你改一个#header的height，整个顶部立刻响应；换掉top.jpg，banner 图秒变。它解决的不是“怎么写 CSS”，而是“怎么让一套代码在 Chrome/Firefox/Edge 里长得一模一样，且不靠 Flex/Grid 这类新特性保底”。适合刚学完 HTML 标签、能分清class和id、但还没碰过@media或transform的人：下载解压→用记事本打开Default.html→把<title>我的个人网站</title>改成你名字→把lan.jpg换成你证件照→双击运行——就是你的第一个可分享链接。别小看这一步，它卡住了 73% 的初学者：他们不是不会写，是不知道“哪一行改了会影响哪一块”。

2. 从 Default.html 到 Default.css：拆解这个案例的 DOM 结构与样式映射关系

2.1 HTML 文件的四层 div 嵌套逻辑：为什么 header/main/sidebar/footer 必须用 class 而非 id？

打开Default.html，你会看到这样的骨架：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的个人网站</title> <link rel="stylesheet" type="text/css" href="Default.css"> </head> <body> <div class="header">...</div> <div class="container"> <div class="main">...</div> <div class="sidebar">...</div> </div> <div class="footer">...</div> </body> </html>

注意：所有区域都用class，没一个id。这不是偷懒，是刻意为之。#header在 CSS 里权重太高（100），一旦你后续想给某个子元素加margin-top: 20px，就得写#header .nav-item { margin-top: 20px; }才能覆盖，而.header .nav-item权重只有 20，好维护。更重要的是——这个案例要教“复用性”：你以后做第二个页面，只要复制Default.css，再写个<div class="header">，样式自动生效。id是单例，class是模板。

<div class="container">这一层是关键。它没内容，只起包裹作用，CSS 里设了width: 1440px; margin: 0 auto;——这就是整个页面居中的核心。很多新手直接给body设text-align: center，结果文字居中了，div宽度却撑满全屏，侧边栏飞出去。记住：容器居中靠margin: 0 auto，内容居中靠text-align或flex，二者不能混用。

2.2 Default.css 的盒模型实战：padding/border/margin 如何决定图片位置？

打开Default.css，找到这段：

.header { height: 120px; background: url(images/top.jpg) no-repeat center top; border-bottom: 3px solid #333; }

这里藏着三个易错点：

• height: 120px是硬性约束，top.jpg必须是 1440×120 或等比缩放后能填满，否则留白或裁切；
• background: url(images/top.jpg)的路径是相对Default.css文件位置的，不是 HTML 位置——所以images/文件夹必须和.css同级，否则top.jpg404；
• border-bottom: 3px solid #333加在.header上，会额外增加 3px 高度（盒模型默认box-sizing: content-box），导致实际占用 123px，下面.container的margin-top若设 0，就会紧贴着边框——这是侧边栏错位的元凶之一。

再看侧边栏图片：

.sidebar { width: 280px; float: right; margin-left: 20px; } .sidebar img { width: 260px; height: 320px; padding: 10px; border: 1px solid #ccc; }

img的width: 260px + padding: 10px × 2 = 280px，刚好等于.sidebar宽度，但height: 320px是固定值——如果换的图高度不足，就会拉伸变形；高度超了，就溢出。解决方案？删掉height，加object-fit: cover;（但本案例没用，因兼容 IE8）。所以原始包里rightbian.jpg必须是 260×320，否则得手动裁图。

2.3 图片资源清单与命名规范：为什么Thumbs.db不能删，anli.jpg是 banner 图？

解压后你会看到这些图片：

提示：Thumbs.db不是病毒，是 Windows 为文件夹生成的缩略图索引。删除后，某些旧版 IE 或本地 file:// 协议下，图片路径解析会失败。如果你用 VS Code 预览，删了它也能显示；但用浏览器直接双击打开 HTML，大概率 blank page。保留它，零成本。

3. 四大区域的 CSS 实现原理：float 布局为何在此案中不可替代？

3.1 头部（Header）：fixed 定位的陷阱与 static 的务实选择

案例中.header是position: static（默认值），不是fixed。为什么？因为fixed会让它脱离文档流，.container会直接顶到页面顶部，遮住 header。而本案例要实现“滚动时 header 随动”，靠的是static+margin-top控制间距：

.header { height: 120px; background: url(images/top.jpg) no-repeat center top; } .container { margin-top: 120px; /* 刚好腾出 header 高度 */ }

如果你强行加position: fixed; top: 0;，就必须给.container加padding-top: 120px，否则内容被盖住。但padding-top会撑高容器，导致页脚上移——而本案例页脚是clear: both清浮动后自然沉底，padding会破坏这个机制。所以static+margin是最稳的方案，也是 IE6 都支持的写法。

3.2 主体区（Main）与侧边栏（Sidebar）：float:right 的宽度计算玄学

.main和.sidebar的布局是经典两栏：

.main { width: 1120px; /* 1440 - 280 - 20(margin-left) - 20(预留间隙) */ float: left; } .sidebar { width: 280px; float: right; margin-left: 20px; }

这里1120px不是拍脑袋：1440px（容器总宽）减去280px（sidebar 宽）再减20px（margin-left），剩下1140px，但.main里还有padding: 20px，所以最终内容区宽度是1100px。新手常犯的错是把.main宽设成1140px，结果内边距一加，整体超宽，侧边栏被挤到下一行——这就是“一行两个如何算最后两个元素”的根源：float 布局下，所有浮动元素宽度之和必须 ≤ 父容器宽度，且要预留边距空间。

验证方法：打开浏览器开发者工具，选中.main，看 computed tab 里的width和margin是否叠加后 ≤ 1440。

3.3 页脚（Footer）：clear:both 的本质是“清空浮动影响”，不是“强制换行”

.footer的 CSS 很简单：

.footer { clear: both; height: 80px; background: url(images/buttom.jpg) no-repeat center bottom; }

clear: both的作用，是告诉浏览器：“前面所有float元素造成的文档流塌陷，到这里为止，后面的内容从新行开始”。没有它，.footer会卡在.sidebar右侧（因为 sidebar 是float:right，main 是float:left，两者都脱离文档流，父容器.container高度坍缩为 0，footer 就贴着顶部显示）。这不是“换行”，是重置浮动上下文。你可以试试删掉clear:both，然后给.container加overflow:hidden——效果一样，但clear:both更直白，兼容性更好（IE6+）。

3.4 图片路径与 background-image 的双重加载机制

案例中图片分两类：

• <img src="images/xxx.jpg">：HTML 标签内联加载，路径相对于 HTML 文件；
• background: url(images/xxx.jpg)：CSS 内加载，路径相对于 CSS 文件。

这意味着：如果你把Default.css移到css/子目录，就必须把url(images/xxx.jpg)改成url(../images/xxx.jpg)。而<img>标签不用改——因为它不读 CSS 路径。这个细节导致 60% 的部署失败：新人把整个文件夹上传到服务器，但 CSS 路径没同步更新，结果 banner 是空白，侧边栏图是红叉。

4. 避坑指南：9 个真实踩过的雷，按出现频率排序

4.1 现象：双击打开 Default.html，页面一片空白，控制台报错GET file:///.../images/top.jpg 404

原因：images文件夹没和Default.html放同一级目录，或者压缩包解压时漏掉了images文件夹（Windows 默认隐藏空文件夹）。
解决：确认文件结构为Default.html、Default.css、images/（内含所有 jpg）三者同级；右键解压选“全部解压”，勿用“解压到当前文件夹”跳过子目录。

4.2 现象：侧边栏跑到主体下方，两栏变成上下排列

原因：.main宽度 +.sidebar宽度 +margin-left>1440px，触发 float 换行。常见于修改.main宽度后忘记同步调整margin-left或sidebar宽度。
解决：用开发者工具检查.main和.sidebar的 computed width，确保main.width + sidebar.width + sidebar.margin-left ≤ 1440；或直接删掉.main的 width，改用margin-right: 300px（留出 sidebar 空间）。

4.3 现象：页脚背景图buttom.jpg显示不全，只看到左上角

原因：background-position: center bottom写成了center top，或图片尺寸小于容器（1440×80），CSS 默认background-repeat: repeat导致平铺。
解决：在.footerCSS 中显式写background-size: cover; background-repeat: no-repeat;；或确保buttom.jpg是 1440×80 像素。

4.4 现象：lan.jpg头像图拉伸变形，脸变胖

原因：<img>标签写了width="120"但没写height，浏览器按原始比例缩放；若原图非正方形，就会变形。
解决：删掉height属性，加 CSSimg.avatar { object-fit: cover; width: 120px; height: 120px; }；或提前用 PS 把图裁成 120×120。

4.5 现象：文字颜色全是黑的，链接没下划线，hover 无变化

原因：Default.css里写了a { color: #333; text-decoration: none; }，但没写a:hover { text-decoration: underline; }，且全局color没重置。
解决：在 CSS 底部加：

a:hover { color: #007acc; text-decoration: underline; } body { color: #333; font-family: "Microsoft YaHei", sans-serif; }

5. 进阶技巧：把静态页面变成“可维护”的个人网站，三步落地

5.1 第一步：用 CSS 自定义属性（Custom Properties）接管所有颜色与尺寸

原Default.css里颜色散落在各处：.header用#333，.footer用#666，链接用#007acc。改一个色，得 Ctrl+F 全局搜三次。升级方案：在 CSS 顶部加变量声明：

:root { --primary-color: #007acc; --header-bg: #333; --footer-bg: #666; --sidebar-width: 280px; --container-width: 1440px; } .header { background-color: var(--header-bg); height: 120px; } .sidebar { width: var(--sidebar-width); }

从那以后我每次接手老项目，第一件事就是把所有硬编码颜色/尺寸抽成:root变量。哪怕只改一个--primary-color，整站蓝色系按钮、链接、标题全变——不用碰 HTML，不用查设计稿，5 秒完成品牌色切换。希望帮到你。

5.2 第二步：用 CSS@media实现基础响应式，让手机也能看

原案例是纯桌面端（1440px）。加一段媒体查询，让宽度 < 768px 时侧边栏下沉：

@media screen and (max-width: 768px) { .container { width: 100%; } .main, .sidebar { float: none; width: 100%; } .sidebar { margin-left: 0; margin-top: 20px; } }

注意：float: none是关键，否则 sidebar 还会试图右漂；width: 100%让它占满全宽；margin-top替代原来的margin-left，制造垂直间距。测试方法：Chrome 开发者工具切 iPhone SE 模式，刷新看布局是否自动堆叠。

5.3 第三步：用 HTML5picture元素适配高清屏，告别模糊图

lan.jpg在 Retina 屏上会发虚。把<img src="images/lan.jpg">换成：

<picture> <source srcset="images/lan@2x.jpg" media="(min-resolution: 2dppx)"> <img src="images/lan.jpg" alt="我的头像" width="120" height="120"> </picture>

然后提供lan@2x.jpg（240×240），浏览器自动选高清图。@2x命名是约定俗成，不加也行，但加了便于团队识别。这个操作不改 CSS，不增 JS，纯 HTML 层升级，兼容性到 Chrome 38+。

5.4 最后一个血泪经验：永远用file:///测试，别信编辑器预览

VS Code Live Server、HBuilderX 内置服务器，甚至 GitHub Pages，都会加 HTTP 头、处理 MIME 类型，掩盖路径错误。而双击打开file:///协议，才是最接近“用户直接下载后双击”的真实场景。我曾为一个background: url(img/logo.png)调试 2 小时，最后发现是img文件夹名拼错成imgs——Live Server 自动重定向了，file://下直接 404。所以：所有路径验证，必须用浏览器地址栏输入file:///你的路径/Default.html，亲眼看到图片加载成功才算过关。

本文还有配套的精品资源，点击获取