简介：面向网页设计初学者的DIV+CSS个人网站制作案例，完整演示如何利用div容器与层叠样式表搭建包含头部、主体、侧边栏和页脚的静态页面，并涉及选择器、盒模型、浮动定位及响应式布局等核心知识点。压缩包共含14个文件，以11张预览效果图为主，配合一个HTML页面、一份Default.css样式表和数据库缓存文件，整体仅154KB，轻量易用。已有306人学习下载。通过该案例，可以直观对照HTML结构与CSS样式的分离写法，理解类选择器、id选择器在实际布局中的应用，并学习如何用一套样式表控制整站视觉风格，为后续深入Flexbox或Grid布局打下扎实基础。
1. 一个不依赖框架的个人网站：DIV+CSS 案例到底在讲什么
网上搜“简单的网页制作案例（DIV+CSS）个人网站”，能跳出来一堆模板和源码包。我一开始也图省事直接下载，页面确实能开，可当我想改个字号、换张背景图，布局立刻崩掉一半，翻代码才发现里面全是内联样式、id 选择器和一层套一层的 DIV，根本没法维护。后来再带新人做网页制作，我反而定了一条规矩：个人网站这个案例必须手写，不许碰框架。DIV+CSS 看起来简单，实际恰好把盒子模型、浮动清除、选择器优先级这些最基础的东西一次性串了起来，做完之后再看任何项目源码都不慌。
这个案例要解决的事也很具体：用 DIV 标签把页面切成头部、导航、内容、侧栏、页脚几块，再用 CSS 给每块定宽、定高、定排版，最终产出一个能放到任何静态空间直接打开的个人网站。它适合刚学完 HTML 标签、想用完整项目练手的新人，也适合准备交“html css 网页制作成品”作业或作品集的人。
后面的顺序和我的真实工作流一致：先讲骨架怎么搭，再讲样式怎么上，接着给一套能直接改的成品方案，最后单开一章写我踩过的五个坑。中间每段代码都能复现，参数为什么这样设，我也会说清楚。
2. 搭骨架：个人网站的 DIV 结构和盒子模型，先想清楚再动手
2.1 语义化切块：一个个人网站页面该拆成几块
个人网站再简单，也需要让别人一眼知道“你在哪里、你有哪几个入口、你今天写了什么”。常见的 DIV 结构是外面套一个 wrap，里面放 header、nav、main、footer。main 里再分 content 和 aside，一主一辅，信息层级就出来了。
<body> <div class="wrap"> <div class="header"> <h1>我的个人网站</h1> </div> <div class="nav"> <a href="#">首页</a> <a href="#">关于</a> <a href="#">作品</a> <a href="#">联系</a> </div> <div class="main"> <div class="content"> <h2>最近更新</h2> </div> <div class="aside"> <h3>关于我</h3> </div> </div> <div class="footer"> <p>版权信息</p> </div> </div> </body>这段结构里的 class 只是钩子，真正让页面站住的还是 DIV 之间的嵌套关系。wrap 负责统一宽度和居中，main 负责把 content 和 aside 放成两列，footer 独立在最后，不受 main 干扰。如果你之后想在页面里动态增加内容，比如用 JS 在 div 里增加 div，也要先认清这个静态骨架：子 DIV 本来就是父 DIV 内部的一个普通模块，JS 只是往这个位置追加节点而已，两者不冲突。
2.2 盒子模型四个参数：content、padding、border、margin
每个 DIV 在浏览器里都是一个矩形盒子，里面有内容 content，内边距 padding，边框 border，外边距 margin。很多新人把这一层当概念跳过，结果写出来的页面总差一截。经典翻车现场是：想把两个卡片并排，给每个卡片设 width 50%，再加 padding 和 border，两列直接挤到下一行。
原因就在盒子模型默认的计算方式：总宽度 = content 宽度 + padding + border + margin。你设置的 width 只是内容区宽度，不是盒子最终宽度。
* { margin: 0; padding: 0; box-sizing: border-box; }这一段是我写个人网站时的默认开头。margin 和 padding 清零能抹掉浏览器自带样式的差异，box-sizing 改成 border-box 后，width 指的是整个盒子的宽度，padding 和 border 不会额外把盒子撑大。这里尤其要记住 box-sizing，否则后面两列布局会反复出问题。
2.3 最小可运行骨架：第一版 index.html
把上一节的结构补全成真正能打开的 HTML，CSS 暂时还没写，所以页面看起来像没穿衣服，这很正常。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的个人网站</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrap"> <div class="header"> <h1>我的个人网站</h1> <p>技术笔记与生活记录</p> </div> <div class="nav"> <a href="#">首页</a> <a href="#">关于</a> <a href="#">作品</a> <a href="#">联系</a> </div> <div class="main"> <div class="content"> <h2>最近更新</h2> <p>这里放正文内容。</p> </div> <div class="aside"> <h3>关于我</h3> <p>一段自我介绍。</p> </div> </div> <div class="footer"> <p>Copyright 2024 我的个人网站</p> </div> </div> </body> </html>这里有两个参数值得注意。viewport 这个 meta 控制移动端显示宽度，不写的话手机打开页面会按桌面宽度缩放，字小到看不清。link 标签的 href 写成 style.css，指的是和 index.html 同目录下的外部样式表，CSS 文件路径这一块后面避坑章会专门讲。
3. 上样式：CSS 引入方式与五个必调属性，让页面脱离“白盒子”状态
3.1 CSS 样式引入方式：为什么我推荐外部样式表
CSS 进页面常见有三种方式：内联样式、内部样式、外部样式。个人网站这种多页面小站，我建议直接上外部样式表。
| 引入方式 | 写法位置 | 适用场景 | 维护性 |
|---|---|---|---|
| 内联样式 | <div style="color:red"> | 临时调试 | 差 |
| 内部样式 | <style>写在 head 里 | 单页面小案例 | 中 |
| 外部样式 | <link rel="stylesheet" href="style.css"> | 多页面个人网站 | 好 |
内联样式只在测试单个属性时用，进入正式代码前要清掉，否则别人改样式时找不到地方下手。内部样式适合只有一个页面的练习，但个人网站至少会有首页和关于页两个页面，样式抽到外部文件里，两个页面共用一份，改一处全部生效。
外部样式表并不是没有坑，最常见的是 link 标签没有写在 head 里，或者 path 写错，样式直接失效。对应到热搜里的“css样式引入方式”这个问题，核心只有一句：外部样式文件名用英文、放在站点根目录、link 放 head 里，路径按相对路径写。
3.2 CSS 选择器和中心对齐：别只会用 id 和 text-align
选择器优先级是新手最容易混淆的点。内联样式的优先级最高，往下是 id 选择器、class 选择器、元素选择器。个人网站里我基本只用 class，id 留给 JS 获取元素用。
.nav > a { padding: 10px 16px; } .content p { line-height: 1.8; } #logo { font-size: 24px; }第一行是子选择器，只选中 nav 直接子元素里的 a，不会误伤 content 里的链接。第二行是后代选择器，content 下所有层级的 p 都会被命中。第三行是 id 选择器，优先级比 class 高，写起来方便，但页面里只能出现一次，不建议拿它控制通用样式。
中心对齐在 CSS 里有好几套解法，要根据元素类型选。text-align 只能水平居中文本和行内元素；一个宽度固定的块级元素要居中，用的是 margin: 0 auto；单行文本要垂直居中，可以直接让 line-height 等于容器高度；真正要水平和垂直都居中的内容区域，用 flex 最稳。
.content { text-align: center; } .block { width: 400px; margin: 0 auto; } .flex-center { display: flex; align-items: center; justify-content: center; }这里最容易翻车的是 margin: 0 auto。很多人给一个没有设置宽度的 div 加 margin auto，页面纹丝不动，因为块级元素默认占满整行，没有多余空间让它自动分配，自然也就看不出居中效果。记得先给盒子一个明确的宽度，再谈 auto。
3.3 字体、删除线、省略号和鼠标移入，四段直接抄的样式
个人网站不追求花哨，但基础文字样式必须立得住。字体、删除线、省略号、鼠标移入这几段是我每做一个静态页面都会复用的。
body { font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; color: #333; line-height: 1.7; } .done { text-decoration: line-through; color: #999; } .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card:hover { opacity: 0.85; }font-family 里的顺序是回退链，第一优先用苹方，Windows 上没有就切微软雅黑，都没有就用系统默认无衬线字体，这样在不同设备上不会出现字体间盘桓的坑。省略号这个效果，很多新手只写 text-overflow: ellipsis，结果没反应，原因是要三个属性一起才有用：white-space 禁止换行，overflow 隐藏超出的内容，text-overflow 才显示省略号，少一个都不行。
鼠标移入事件在个人网站上最常见的应用是 hover 换色或透明度。这行 .card:hover 里的 opacity 是最保守的写法，不会改变布局。如果你想做更精致的动效，最后一章会说到用 transition 配合 transform 的方式。
4. 拼出成品：导航栏、Banner 背景图、卡片区和页脚的一次性完成方案
骨架和基础样式都有了，这一章直接组装成一个完整成品。先重申一次目标：这是一个不依赖任何框架、纯 DIV+CSS 的个人网站首页，打开就能看，改内容也不费劲。
4.1 导航栏：浮动布局还是 flex，别混用
导航栏有两种实现思路。教程常讲 float: left 加一堆属性控制，这是旧时代的产物，需要配合清除浮动处理，否则后面的容器会被顶上去。我建议直接用 flex，代码短、好理解、不会塌陷。
.nav { display: flex; justify-content: center; background: #2c3e50; } .nav a { display: block; padding: 14px 24px; color: #fff; text-decoration: none; } .nav a:hover { background: #34495e; }这里有两个细节。a 标签默认是行内元素，给它加了 display: block 之后，padding 上下才会撑开，点击区域也更大，不会出现只有文字能点的情况。justify-content 控制的是导航项整体在容器里的排布方向，center 让导航居中，你也可以改成 space-around，让四个链接均匀分布在整条导航栏里。
如果你的课程或作业要求必须用浮动写法，那记住一条准则：谁的孩子浮动了，谁就要清浮动，后面避坑章会专门讲。
4.2 Banner 背景图：background 写法和图片路径，最容易翻车的点
个人网站首页通常需要一个 banner 区，一张背景图加上一句简介，视觉上先撑住。用背景图而不是 img 标签的好处是，图片只负责装饰，不会挤占文档流，文字可以直接压在图上。
.banner { display: flex; align-items: center; justify-content: center; height: 320px; background: url("images/bg.jpg") no-repeat center/cover; background-color: #34495e; color: #fff; }background 这一行里其实压缩了四个参数：图片路径、no-repeat、位置、尺寸。no-repeat 表示背景图不重复平铺；center 是背景定位居中；cover 表示图片等比缩放填满整个 banner，宽高比和 banner 不一致时，图片边缘会被裁掉，但不会拉伸变形。如果你希望整张图完整显示，可以用 contain，那会出现留白，个人网站 banner 一般不要这个效果。
路径是最大变量：url("images/bg.jpg") 里的位置是相对于 style.css 这个文件，不是相对于 index.html。如果你的 style.css 放在 css 文件夹里，图片在 images 文件夹里，就要改成 url("../images/bg.jpg")。这一点我踩过太多次，后面避坑章会再展开。
4.3 卡片列表：DIV 嵌套 DIV，用 flex wrap 做出网格
作品展示区是个人网站的核心内容区。做法是外面一个 cards 容器，里面放若干张 card，每张 card 又是一个独立的 DIV 盒子。
<div class="cards"> <div class="card"> <h3>项目一</h3> <p>一句话介绍项目</p> </div> <div class="card"> <h3>项目二</h3> <p>一句话介绍项目</p> </div> <div class="card"> <h3>项目三</h3> <p>一句话介绍项目</p> </div> </div>.cards { display: flex; flex-wrap: wrap; gap: 20px; } .card { width: 220px; padding: 16px; background: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 8px; }flex-wrap 允许子元素在宽度不够时换行，gap 控制卡片之间的间距，不需要再去算左右 margin。card 的宽度固定 220px，三张卡片在一行排不下时自动换到下一行，浏览器窗口变窄也不会横向溢出。这种写法比 float 布局省心得多。
这里顺带说一句，有人追求原子性 CSS，把每个样式拆成一个类，个人网站这种小项目真没必要。你写一个 .card 类，里面一次性承载宽度、内边距、背景、边框，后续维护直接找到这个类就行，比拆成十几个微类更容易改。
4.4 页脚与版权区：clearfix 收尾，挡住浮动带来的塌陷
页脚一般是一个深色背景的横条，版权信息居中。注意别把页脚包进内容区，它应该是 wrap 下的独立 DIV，结构上不依赖 main。
.footer { margin-top: 48px; padding: 24px 0; text-align: center; background: #2c3e50; color: #fff; } .clearfix::after { content: ""; display: table; clear: both; }如果你的页面里没有使用浮动，clearfix 可以不要。但个人网站做到后面，总有人会在某个局部用 float: left，这张清浮动的方子就应该常备着。clearfix::after 是一个伪元素技巧，content 为空，display: table 让它块级化，clear: both 清掉前面所有浮动的影响。把它放到公共 CSS 里，遇到塌陷的时候给父容器补一个 class 就行。
到这里，一个同时拥有导航栏、banner、卡片区、页脚的个人网站首页已经能打开看了。只要 CSS 文件里的路径没错，这就是一个货真价实的“html css 网页制作成品”。
5. 避坑排查：浮动、外边距合并、IE11 样式失效和本地路径，个人网站最容易翻车的五个点
5.1 父容器高度塌陷：内容明明一堆，背景却只显示一条线
现象：给内容区的子 DIV 加了 float: left 之后，父 DIV 背景色不见了，只剩一条细线，页脚直接顶上来。
原因：浮动元素脱离普通文档流，父容器计算高度时不会把浮动的子元素算进去。
解决：在父容器上加 overflow: hidden，或者挂上 clearfix 类。
.main { overflow: hidden; }overflow: hidden 最省事，但它会把超出容器范围的内容也裁掉。如果子元素里有下拉菜单或者其他需要溢出的部分，建议用 clearfix 而不是 overflow。别给父容器写死一个高度，这是最明显的后悔药，内容一多马上又塌。
5.2 外边距合并：上下 margin 没叠加，而是取了最大值
现象：content 的 margin-bottom 设了 30px，footer 的 margin-top 设了 20px，按常理中间应该是 50px，结果只有 30px。
原因：相邻的块级元素垂直外边距不会相加，取较大的那个值，这是 CSS 盒子模型里的合并规则。
解决：把相邻元素其中一个的间距改成 padding，或者在父容器上开启 flex 布局。个人网站里最典型的位置是 main 和 footer 之间，我一般直接让 footer 负责 margin-top，content 不写 margin-bottom，避免同一个位置出现两套间距。
5.3 IE11 打开样式失效：同一个页面在不同浏览器里像没穿衣服
现象：Chrome 里看着正常的页面，用 IE11 打开后导航栏挤成一团、背景没了、hover 没反应，F12 里也没有明显的 JS 报错。
原因：IE11 不支持一部分现代 CSS 特性，比如 CSS 变量、gap 间距、background-clip: text，对部分 flex 简写的支持也有瑕疵。还有一种隐藏很深的情况：DOCTYPE 漏了，浏览器直接进入怪异模式，盒模型计算方式都变了。
解决：先把文件头写完整，再在 head 里加一行兼容标签，最后把 CSS 里太新的特性换掉。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge">提示：这行兼容标签不是万能钥匙，但它能让 IE 用最新的文档模式去解析页面，很多样式失效会因为这一行直接消失。
5.4 本地双击打不开 CSS：file:// 协议下的样式表被 CORS 拦截
现象：双击 index.html 打开，页面上只有超链接文字，所有样式都没生效。F12 控制台报出类似 “Access to CSS stylesheet at ‘file:///C:/Users/Administrator/Desktop/xxx/style.css’ has been blocked by CORS policy” 的错误。
原因：浏览器出于安全策略，对 file:// 协议下跨目录加载外部资源有限制，本地工程里样式表可能被拦截。路径里如果再有中文目录名或空格，概率更高。
解决：最常用的两个办法，一是把 CSS 文件和 HTML 放同一个目录，用相对路径引用；二是在项目目录起一个本地静态服务，用 http:// 协议访问页面。
python -m http.server 8080然后在浏览器打开 http://localhost:8080，样式就正常了。VS Code 里装 Live Server 也是同样的原理，本质都是绕过 file:// 的限制。这个坑不是 CSS 写错，而是本地打开方式的问题，定位清楚之后就不会再白焦虑。
5.5 背景图路径明明对，图片就是不出来
现象：background 里的 url 没写错，F12 里也没有资源 404，但 banner 区域就是显示默认底色，图片不出现。
原因：CSS 文件里写的 url 是相对于 CSS 文件本身的位置，不是相对于 HTML。如果你的 style.css 放在 css 文件夹，HTML 和图片放在根目录，那正确写法是 ../images/bg.jpg，不是 images/bg.jpg。
解决：先看一眼 console 里资源请求的完整路径，再回到目录结构里算相对路径。
.banner { background: url("../images/bg.jpg") no-repeat center/cover; background-color: #34495e; }background-color 这一行是兜底。即使图片因为路径问题没加载，页面上也能看到一个深色底，文字依然可读，不会出现白底白字的尴尬。
6. 让个人网站有点质感：一个最简单的动效技巧和验证方法
6.1 给卡片加 hover 动效：transition 比 3D 更实用
纯 DIV+CSS 做出来的页面最容易显得“平”。提升质感不用上复杂动画，给卡片一个轻微的悬浮效果就够了。
.card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); }transition 两个参数分别控制 transform 和 box-shadow 的变化时长与缓动方式，0.3s 是视觉上比较舒服的速度，太快显得生硬，太慢显得拖沓。hover 里把卡片向上平移 6px，同时加一层柔和的阴影，立体感就有了。网上常有人问 transform: rotatey(60deg) translatez(300px) 这种 3D 效果出来是什么样，真做出来整块文字会被推到斜后侧，变形明显，个人网站的普通内容区里我劝你别用，卡片轻微上浮和阴影才是性价比最高的做法。
如果还想给标题加点识别度，可以用字体渐变，但要注意兼容性。CSS 里用 background 配合 background-clip: text 再让文字颜色透明，Chrome 和 Edge 没问题，IE11 直接失效，所以渐变字体只适合作为增强效果，不能让核心标题只靠它显示。
6.2 验证一个 DIV+CSS 页面到底算不算完成
页面做完之后，按下面这套习惯过一遍，比反复刷新管用。
| 检查项 | 做法 | 通过标准 |
|---|---|---|
| 结构与样式分离 | 看 HTML 里有没有内联 style | 样式全部在 style.css |
| 盒子模型 | F12 里选中卡片，看 Computed 的宽度 | width 包含 padding 和 border |
| 本地兼容性 | 用 Edge 和 Chrome 各打开一次 | 布局没有明显差异 |
| 移动端宽度 | 把浏览器窗口拖到 375px | 页面不横向滚动 |
| 图片资源 | Ctrl+Shift+R 强刷 | banner 和卡片图都显示 |
最后一步是给整个站加一点 JS 交互，比如点击导航平滑滚动、tab 切换内容，那就是从纯 DIV+CSS 走向“html css js 网页设计”的过程。我的习惯是每次写静态页面前，先在纸上画一张盒子图，标清楚哪些间距用 padding、哪些用 margin，再动代码。这个习惯就是当初做个人网站养出来的。希望帮到你。
本文还有配套的精品资源，点击获取
