DIV+CSS个人网站案例拆解：从布局到避坑全指南

简介：面向网页设计初学者的DIV+CSS实战案例，以构建个人网站为完整项目，系统演示如何用div容器划分页面结构，并通过CSS实现头部、主体、侧边栏、页脚等常见模块的布局与视觉样式。资源内含一个可运行的HTML页面、配套的CSS样式表及多张素材图片——HTML负责结构、CSS负责表现、图片用于效果展示，合计14个文件，压缩包仅154KB，轻量便于下载与研读。案例通过外部样式表与HTML分离组织，直观体现结构与表现分离思想；讲解覆盖类/ID选择器、盒模型中的margin/border/padding、静态/相对/绝对/固定定位、z-index层级控制，以及媒体查询与Flexbox响应式布局等核心知识点。完整项目包含可直接运行的页面骨架，适合课程作业、前端入门或课程设计参考，可自行修改配色与栏目快速产出个人网站。已有306人学习，借助该实例可为后续开发更复杂的响应式网站打下扎实基础。

1. DIV+CSS个人网站案例：为什么这个老资源还值得拆一遍

DIV+CSS做个人网站，听起来像是十来年前的词汇，但把这份“简单的网页制作案例（DIV+CSS完成）：个人网站”解压开，你会发现一个干净得有点出乎意料的组合：一个Default.html、一个Default.css、一组images图片和一个Thumbs.db缓存文件。它解决的正是个人网站最朴素的四个需求：头部放名字和导航、主体放自我介绍或作品、侧边栏放公告和链接、页脚放版权信息。这套四段式结构现在用Flexbox和Grid也能做，但底层的DIV嵌套和CSS盒模型思路完全一样，所以它适合刚学完选择器、想第一次独立拼出一个完整页面的人，也适合手里有旧网站、想改版但不想碰JavaScript框架的人。案例里几乎没有任何交互特效，真正值钱的是它把“布局骨架”这件事讲得很干净。下载之前，我建议先花十分钟顺着这篇文章把文件结构和样式参数过一遍，后面改起来会少踩很多坑。

2. 案例文件结构：从Default.html到images的对应关系

2.1 案例包里有什么：先过一遍文件再动手

解压rar之后，我一般不会急着双击打开Default.html，而是先把所有文件列个清单，搞清楚哪个文件是干嘛的。这个包的文件不算多，但很多新手一打开看到九个jpg就懵了，不知道哪张是背景、哪张是导航、哪张是内容图。实际上，按这个案例原本的命名习惯，图片文件很多是用拼音缩写做了区分：lan.jpg、jian.jpg这类多半是栏目背景或分割装饰，而001.jpg、002.jpg、003.jpg更有可能是正文或案例展示图片。你不必猜准每一张的用途，把images目录当作素材池，打开Default.html之后按引用路径反查就行。

这个包里的核心文件有以下几类，整理成表格看，比自己挨个试要快：

Thumbs.db是Windows自己生成的，不是网页资源。我每次收到这种压缩包都会顺手删掉，否则传服务器时多一个没用的文件。这个案例包本身很小，真正需要你花时间读的只有Default.html和Default.css两个文件，图片只是被引用的素材。

2.2 Default.html怎么读：把div嵌套当积木看

打开Default.html，你第一眼看到的应该是大量成对的div标签。div没有任何默认样式，它只是一个块级容器，作用就是把页面内容划分为逻辑区块。这个案例的整体结构非常规矩，常见的写法是：外层一个总容器，里面依次放头部、主体、底部。主体再分左右两栏，左边放主要内容，右边放侧边栏。用结构示意可以写成下面这样：

<div class="container"> <!-- 头部区：logo + 导航 --> <div class="header"> <div class="logo">个人名字</div> <div class="nav">首页 | 关于我 | 作品 | 联系</div> </div> <!-- 主体区：左右两栏 --> <div class="main"> <div class="content">正文区域</div> <div class="sidebar">侧边栏</div> </div> <!-- 底部区：版权信息 --> <div class="footer">版权信息</div> </div>

这段结构里，container是顶层容器，header、main、footer是三大分区。header里又套了logo和nav两个子div，main里套了content和sidebar子div。注意我特意用了class而不是id，因为这个案例里同一个class可能被多个元素复用，比如后面做图文列表时每个图片块都能用同一个class来定义样式。id在同一个页面里只能出现一次，适合用在类似“回到顶部”这种唯一元素上。读代码时顺着这个嵌套关系一层层剥开，页面结构自然就清楚了。

如果浏览器里直接双击打开，然后按F12打开开发者工具，在Elements标签页里也能看到同样的嵌套树。我一般会先在开发者工具里点几下某个段落，再回代码里找对应div，这样阅读效率比从头看HTML高得多。

2.3 Default.css怎么挂接：外部样式表才是正解

案例把样式单独放在Default.css里，而不是写成一堆内联style，这是个人网站维护里很重要的一步。在Default.html的head区域里，你会看到这样一行代码：

<link rel="stylesheet" type="text/css" href="Default.css" />

这行代码告诉浏览器：去加载Default.css，之后页面上所有元素的默认样式都由它来覆盖。rel属性说明这是一个样式表，type说明是text/css，href是样式文件路径。因为Default.css和Default.html在同一个目录下，所以href直接写文件名就行；如果CSS文件被放进了css子目录，这行就要改成css/Default.css。很多新手改了样式没反应，第一反应是代码写错了，实际上十有六七是link标签的href路径不对。

外部样式表相比内联style的好处是结构和表现分离。Default.html里只需要维护div顺序，Default.css里维护外观。以后你想把整个站点的配色换一遍，不需要去HTML里一个标签一个标签改，只要在Default.css里动几个类名就够了。这个案例里Default.css写的内容不算多，都是一些很基础的选择器规则，适合拆开逐行看。

3. 四段式布局实现：头部、主体、侧边栏与页脚的搭建细节

3.1 头部：logo和导航的浮动写法

个人网站的头部一般有两个元素：左边的logo标识和右边的导航菜单。在这个案例的原始设计里，最直接的做法是用float让logo向左、导航向右。float是布局里很经典的属性，设置之后元素会脱离正常文档流，向左或向右靠齐，后面的块级元素会补到它的旁边。导航菜单如果用ul列表，还需要先把列表默认的项目符号去掉，再让每个li向左浮动，这样菜单项才能横着排开。

.header { width: 100%; /* top.jpg 作为顶部背景条，横向重复铺满 */ background: url(images/top.jpg) repeat-x; } .logo { float: left; margin: 10px 0 0 20px; } .nav { float: right; margin: 15px 20px 0 0; } .nav ul { list-style: none; margin: 0; padding: 0; } .nav li { float: left; margin-left: 15px; }

这段CSS里有两个地方容易理解偏。第一个是margin的简写，10px 0 0 20px代表上、右、下、左四个方向的间距，按顺时针记。第二个是.nav li里的float:left，它让原本竖向排列的li变成横向排列，但代价是li也脱离了文档流，如果导航后面还有元素，很可能被顶上来的内容遮住。所以在头部结束之后，通常需要一个清除浮动的动作，这个放在后面页脚部分一起说。

3.2 主体与侧边栏：两栏布局的三种落地方案

主体区域是这个案例里信息量最大的部分。个人网站最常见的就是两栏：左边宽一点放正文，右边窄一点放个人资料、最新动态或友情链接。老教程里几乎都用浮动来搭两栏，先给两个div各设置float和宽度，然后通过宽度控制比例。这种写法到今天依然能跑，只是要注意总宽度和盒模型的关系。

.main { width: 960px; margin: 0 auto; } .main .content { float: left; width: 680px; padding: 20px; } .main .sidebar { float: right; width: 260px; }

这里有一个典型的翻车点：content设了width 680px，又设了padding 20px，在默认的content-box盒模型下，这个div实际占的宽度是680加左右各20，等于720px。如果右侧的sidebar也是260px，两个宽度的和已经超过了容器960px，页面就会发生换行错位。老代码里经常看到为补偿padding而减少width数值的写法，或者在最外层统一加一句box-sizing:border-box。这个细节到第4章再说，两栏布局能不能并排，很大程度上取决于它对盒模型的判断。

如果不想沿用浮动，现在做个人网站我更推荐用Flexbox。给容器设display:flex，左右两个子div就自动横向排列，左边的宽度用flex:2控制，右边用flex:1，比手写百分比更省心：

.main { display: flex; max-width: 960px; margin: 0 auto; } .main .content { flex: 2; margin-right: 20px; } .main .sidebar { flex: 1; }

flex:2和flex:1不是固定像素，而是按剩余空间的比例分配宽度。容器是960px时，content约620px，sidebar约310px，中间还有20px间距。这种方案的优点是内部元素再多，flex容器也会根据内容弹性伸缩。缺点是如果非要兼容IE10以下的浏览器，还是得退回float方案。这个案例本身用的就是float，你改版时不必把架子全推翻，保留原本的div嵌套，只把CSS换成flex也可以。

3.3 页脚：清除浮动和版权信息的处理

页脚是整个页面最后一个大div，承担版权声明和简单的联系信息。在这个案例里，如果头部和主体区大量使用了float，那么页脚一定要处理清楚浮动，否则浮动元素会跑到页脚上面，或者页脚背景只显示到一半。最简单的清除浮动方式，是给页脚这个本身就靠后的元素加上clear:both。

.footer { clear: both; padding: 20px 0; text-align: center; /* buttom.jpg 作为页脚背景条 */ background: url(images/buttom.jpg) repeat-x; }

clear:both的意思是：检测这个元素左右两侧都不能存在浮动元素，如果有就把它往下推到新的行。这样页脚就老老实实待在主体下面了。版权信息写在页面里时，注意HTML里版权符号需要写成©，比如© 2024 某某的个人网站，浏览器才会正确显示©符号。

除了clear:both，清除浮动还有另外两种常见写法：给父容器加overflow:hidden，或者在所有浮动子元素后面加一个空div并设置clear:both。我自己的习惯是优先用clear:both放在页脚，因为overflow:hidden在某些情况下会把子级的弹出菜单截断，而空div的方式又得多写一个无意义节点。在这个案例里，页脚用clear:both是最稳妥的。

4. 盒模型、定位与背景：控制网页外观的三个控制点

4.1 盒模型：width到底算哪部分

CSS盒模型是每个做DIV+CSS布局的人都要过的第一道坎。一个div在页面里实际占的宽度，并不只是width这一项，而是由content宽度加padding加border加margin共同决定。默认情况下，width设置的是内容区的宽度，padding和border会往外再加。举例来说，下面这个div：

.sidebar { width: 260px; padding: 20px; border: 1px solid #ddd; }

在默认的content-box模式下，它实际占的横向空间是260加左右padding共40px加左右border共2px，等于302px。如果你把sidebar放在一个宽度960px的容器里，旁边还有一个680px的div，两边加起来早就超过容器宽度了，结果就是第二栏被挤到下面去。这个案例里如果发现有几张图本来并排却突然换行，优先怀疑盒模型计算。

解决的办法有两种。一种是手动把width减掉padding和border的宽度，比如上面这个260px改成220px才能实际占260px。另一种是一开始就统一用border-box模式，让width直接包含padding和border：

/* 全局重置：让宽度计算方式统一 */ * { margin: 0; padding: 0; box-sizing: border-box; }

我接手别人的网页时，第一眼就看CSS开头有没有这个重置规则。没有的话，我会先补上这一行，再把原来基于content-box调出来的width稍微调整。border-box对个人网站这种面积不大、区块很多的页面特别实用，因为它能让布局预测性好很多。这个案例的Default.css如果用的是老写法，很可能没有这个重置，你要在改版时自己加。

4.2 定位：relative和absolute怎么配合

个人网站里常遇到一个场景：想让一行文字压在图片底部，做成类似封面题注的效果。如果只靠普通文档流，文字会在图片下面，压不上去。这里要用定位属性，规则是先给图片所在的外层div设置position:relative，再给要压上去的文字div设置position:absolute。

.figure { position: relative; width: 300px; } .figure .caption { position: absolute; bottom: 10px; left: 10px; color: #fff; background: rgba(0, 0, 0, 0.6); padding: 4px 8px; }

这段代码里，figure是父容器，relative让它成为内部absolute元素的定位参照物。caption里的bottom:10px和left:10px，意思是相对figure的右下角向上10px、向左10px。此时caption完全脱离文档流，不会影响图片下方其他元素的位置。background用了rgba(0,0,0,0.6)，黑色半透明底让文字在图片上可读性更好，这个写法比opacity之类更精准，因为它只影响背景不影响文字。

新手最容易犯的错是给子元素设了absolute，却忘了给父元素设relative，结果文字不是压在图片上，而是跑到页面左上角或者其他位置去了。想理解为什么，只需要记住一条规则：absolute定位找的是最近的一个position不为static的祖先元素。如果往上找一圈都没有，就相对body定位。所以看到错位先检查父级链上的position。

4.3 背景与图片：img和background怎么选

图片在个人网站里分两种用法：内容性的用img标签，装饰性的用CSS背景。判断标准很简单：这张图是页面真正要展示的信息吗？如果是，比如个人照片、作品截图、博客封面，就用img，因为img标签里可以写alt属性，对浏览器和屏幕阅读器友好。如果只是背景装饰、分割线、按钮纹理，比如这个案例里的top.jpg、buttom.jpg，就写进CSS的background属性。

.header { /* no-repeat: 不重复；center top: 水平居中、垂直靠顶 */ background: url(images/top.jpg) no-repeat center top; height: 120px; }

background后面的三部分分别控制背景图、是否重复、位置。no-repeat表示不重复，center top让图片在容器内水平居中垂直靠顶。如果你想要图片铺满整个头部，可以改成repeat-x或者用background-size:cover。但是要注意，背景图不会自己撑开容器高度，所以上面我特意写了height:120px。很多人设置了背景图却看不到，原因往往是容器高度为0。

img和background的另一个区别是尺寸控制。img可以单独设置width和height，不会影响它周围的内容流；background则完全依附在容器上。这个案例里001.jpg、002.jpg、003.jpg更像内容图，如果页面想统一它们的大小，直接在CSS里写img的宽度百分比会更方便：

.content img { width: 100%; height: auto; }

这样不管原图多大，图都会撑满content区域，高度按比例缩放，不会因为拉伸变形。需要注意别给img同时设width和height两个固定值，否则宽高比会失真，这在做个人作品集时很容易踩。

5. 常见问题与避坑：四个让人翻车的DIV+CSS细节

5.1 父div高度塌了，背景铺不满

现象：明明子div里有文字和图片，外层div的高度却是0，背景色只显示一条细细的线，整个页面看起来像没底色。 原因：子div使用了float或absolute，脱离了文档流，父div里没有能撑起高度的普通元素，于是高度塌缩成0。 解决：在父div末尾加一个清除浮动的空div并设置clear:both，或者给父div设置overflow:hidden。案例里头部和主体用了浮动时，这个现象最容易发生。我个人的习惯是给不需要弹出层的页面用overflow:hidden：

/* 让父级把浮动子元素的高度也算进来 */ .main { overflow: hidden; }

overflow:hidden做清除浮动比较省事，但副作用是它会把超出容器范围的内容剪掉，比如下拉菜单被截断。所以遇到需要弹出层的区块，我会老老实实写clear:both。还有一个现代做法是给父容器加display:flow-root，不过案例里的老结构不太需要，知道有这回事就行。

5.2 图片下方莫名多出3px空隙

现象：图片和下方文字或边框之间总有一道缝隙，删掉margin和padding也去不掉。 原因：img默认是inline元素，inline元素在排版时以文本基线对齐，而基线在行框底部上方留有一定下行空间，所以视觉上就有了一条空隙。 解决：给img设置display:block，让图片变成块级元素，不再参与文本基线对齐：

.content img { display: block; max-width: 100%; }

这个改动对布局没有破坏性，因为图片本来也很少需要和文字并排在同一个行内。max-width:100%是顺手加的保护，防止大图把容器撑破。如果你发现图片下方空隙还是存在，再检查一下外层div有没有line-height，给容器设line-height:0也能消除，但会连累里面的文字，一般不推荐。

5.3 改完CSS刷新没变化

现象：明明在Default.css里把标题颜色改成红色了，浏览器打开还是原来的黑色。 原因：最常见的是浏览器缓存了旧的CSS文件；其次是link标签的路径写错，比如文件名大小写不对；还有可能是CSS文件压根没有和HTML放在同一目录。 解决：先在浏览器里按Ctrl+F5强制刷新，排除缓存。然后按F12打开开发者工具，切到Network标签，刷新页面，找到Default.css这一条，看它状态码是不是200。如果显示404，就去检查href路径。如果状态码200但样式不对，在Elements标签页里点那个标题元素，在右侧Styles面板里能看到是哪一条规则盖掉了你的颜色。这个排查顺序能解决八成“改了没反应”的问题，剩下的两成是选择器写错，比如类名带漏了前面的点。

还有一条血泪经验：改完样式后不要只刷新页面，要在开发者工具里确认CSS文件确实被重新加载了。有些时候浏览器用的是内存里的旧版本，网络请求根本没发出去。

5.4 浏览器预览和发布后布局不一致

现象：本地双击打开页面一切正常，传到服务器或者换台电脑就错位，图片也裂开。 原因：文件路径写成了本地绝对路径，比如img src="C:/Users/xxx/images/001.jpg"，或者link href里带了file协议。网页一离开本地环境，这些路径就失效。 解决：统一用相对路径，像images/001.jpg、Default.css这种，不写盘符、不写完整域名。图片裂开时要先看开发者工具控制台里报的404错误，对照路径去修。另外Thumbs.db删掉再打包，避免把Windows透明缓存文件传到服务器上。

最后一个坑不算CSS本身，但我见过太多次因为文件名大小写导致样式在Linux服务器上失效的情况：本地Windows不区分大小写，服务器Linux区分。所以Default.css写成default.css后，本地没问题，上线就坏。养成习惯：从下载到上传，所有文件名保持和压缩包里完全一致。发布之后如果还错位，打开Network面板看CSS和图片的实际请求路径，排查效率最高。

6. 改造与验证：把这个案例换成你的个人网站

6.1 换内容时的三个注意点

第一步是替换图片和文字。图片尽量保持原尺寸或接近原尺寸，避免在CSS里写死宽度造成拉伸。文字直接改Default.html里的内容即可，但记得同步修改alt属性，让图片在加载失败时也能显示一段文字。div结构不要因为内容变多就随便加新div，先试试原结构能不能装下。

6.2 用CSS变量做一键换皮

这个案例的老样式是写死的颜色，不适合二次改版。我一般会先把主色和背景色抽成CSS变量：

:root { --main-bg: #f7f7f7; --main-color: #333; --link-color: #0066cc; } body { background: var(--main-bg); color: var(--main-color); } a { color: var(--link-color); }

这样以后想改风格，只需要改:root里的三个变量，不用去页面里翻颜色值。CSS变量在现代浏览器里全部支持，个人网站足够用了。

6.3 验证清单

改完以后，不要只在自己电脑上打开一次就算完。我至少过这三项：第一，Chrome和Edge各打开一次，看布局是否一致；第二，把浏览器窗口从960px缩到375px，观察侧边栏会不会挤到主体下面、图片有没有溢出；第三，把Default.html和Default.css拖到一个空白文件夹里，连同images目录一起拷过去，双击确认还能正常显示，排除绝对路径问题。

这份案例包我从解压到跑通几乎没花什么时间，因为它的结构比现在很多带Vue和React的模板干净太多，适合一遍遍拆着练。从那以后我每次接手旧网页，都会先看一眼CSS里有没有box-sizing重置，再决定要不要补。希望这份案例在你能拿到手的个人网站作业或作品集改版里，也当一次顺手的起步模板。资源就是标题对应那个rar包，解压后按第2章的文件清单过一遍，直接改起来就行。

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