DIV+CSS从零搭建个人网站：布局、浮动与清除浮动实战

简介：一份面向网页初学者的DIV+CSS个人网站制作案例，以完整项目形式展示了如何利用DIV容器搭建页面骨架、借助CSS定义视觉风格，适合刚接触前端布局的读者对照学习。资源压缩包共包含14个文件，其中有11张JPG图片作为页面素材或效果预览，另有HTML结构文档、CSS样式表及Thumbs.db缩略图缓存文件，整体大小仅154KB。案例围绕个人网站常用的头部、主体、侧边栏和页脚四个区域展开，涉及类选择器、ID选择器、盒模型、浮动与定位、响应式布局等关键知识点；同时遵循HTML与CSS分离的原则，便于理解结构与样式各自的作用。已有307人学习下载，完成基础语法学习后，可借助这个小项目串联零散知识，并参考其中布局方式与图片素材，尝试构建自己的个人主页。整体结构清晰，适合逐步动手实践。

1. 为什么很多“简单网页”只有骨架，缺的是这套DIV+CSS分工

对着教程敲完一串<div>之后，页面还是从上到下一条线：文字连在一起，导航不像导航，图片贴着左边框。这不是标签没敲对，是没把“DIV负责结构、CSS负责样式”这个分工用起来。一个能拿得出手的个人网站，结构上其实只有五六个块：页头、导航、内容区、侧边栏、页脚，剩下全是CSS在调尺寸、颜色、间距和位置。这套做法不依赖任何框架，浏览器打开就能看，适合刚学完HTML标签、想自己独立完成一个整页的人。往下我会按“先分块、再上样式、后排查”的顺序，把个人网站从骨架做到能看、能改、能扩展。

2. 先定结构再写代码：给个人网站搭一套不飘的页面框架

2.1 个人网站最常见的三种布局，我该选哪种

做个人网站之前先想清楚信息怎么摆，因为HTML结构一旦写死，后面改布局比改样式麻烦得多。常见布局无非三种。

单栏结构最简单，整个页面只有一个内容列，宽度固定，从上往下依次是页头、文章区、页脚。适合只放一篇自我介绍、一份简历、几个作品链接的人，代码量最少，几乎不会出布局问题。

两栏结构在单栏基础上加一个侧边栏，左边放头像、个人信息、分类目录，右边放正文。这是个人网站里最经典的DIV+CSS布局，也是练float和清除浮动的好素材，代码量中等，对新手最友好。

三栏结构有两个侧边栏或左右各一个辅助区，通常是博客型站点才需要，个人网站内容不够多时不建议选，会显得页面很空。

个人网站放的是“关于我、作品、博客、联系方式”，两栏最合适：主内容区放长文，侧边栏放档案卡。整个页面宽度我习惯做成1000px左右，margin左右auto，让它在任何屏幕上居中，不会一会儿贴左边一会儿贴右边。宽度太小显得小气，太大在老笔记本上要横向滚动，1000px是这几年做个人站点最稳妥的起步值。

最终结构定成这样，从上到下五层：

• 最外层一个div.wrapper包住整页，统一宽度和居中
• 页头div.header：站名和一句副标题
• 导航div.nav：水平菜单
• 主体div.main：左列div.left（侧边栏）+ 右列div.right（正文）
• 页脚div.footer：版权信息

这套结构多一个少一个都不合适，少了一层，正文和侧边栏的间距就没人管；多了一层，新手写CSS时容易绕晕。下文所有代码都以这个结构为准。

2.2 CSS三种引入方式，为什么外链文件最省心

HTML结构定好之后，样式放哪是个容易埋雷的选择。CSS引入方式有三种：行内样式（写在标签的style属性里）、内嵌样式（写在HTML文件的<style>标签里）、外链样式（单独一个.css文件）。做多页面个人网站，外链是唯一推荐的做法。

常见做法是建一个css/目录，放一个style.css，HTML里用一行<link rel="stylesheet" href="css/style.css">引进来。所有页面的样式都写在这一个文件里，改站名颜色只改一处，全站生效。

行内样式和内嵌样式不是不能用，但行内样式的优先级最高，后面想用CSS覆盖它非常吃力，属于给自己挖坑；内嵌样式看起来省事，但页面一旦超过两个，每个HTML文件都得复制一遍样式，改起来就是灾难。

这里顺带说清楚一个高频问题：单独的CSS文件里不需要再写<style>标签。<style>是HTML里的标签，是用来包内嵌样式的容器；.css文件里直接写选择器和花括号就够了，写进去浏览器反而会把它当普通文本忽略掉。判断标准很简单：打开这个文件，第一眼应该是选择器，不是尖括号。

2.3 先把HTML骨架搭出来：命名规范与五个区块

结构定了，样式引入方式也定了，现在把HTML写出来。类名是我反复调整过的一组，不多不少，语义直白：wrapper控制整页宽度，header、nav、main、footer对应功能区块，left和right对应主体里的左右两列。这样写，哪怕三个月后回来看这个文件，不用翻CSS也知道每个div是干什么的。

<!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="css/style.css"> </head> <body> <!-- 最外层容器：控制整页宽度和居中 --> <div class="wrapper"> <!-- 页头：站名 + 副标题 --> <div class="header"> <h1>我的个人网站</h1> <p>把每一次练习记录下来</p> </div> <!-- 导航：项目列表，待会横向排开 --> <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">博客</a></li> <li><a href="#">作品</a></li> <li><a href="#">关于我</a></li> </ul> </div> <!-- 主体：左侧边栏 + 右侧正文 --> <div class="main"> <div class="left"> <h3>个人信息</h3> <p>昵称：小林</p> <p>方向：前端开发</p> </div> <div class="right"> <h2>欢迎来到我的小站</h2> <p>这里是正文区域，用来放自我介绍、最近动态或者作品说明。</p> </div> </div> <!-- 页脚：版权 --> <div class="footer"> <p>© 2024 我的个人网站</p> </div> </div> </body> </html>

这段代码的逻辑说明：wrapper是最外层，所有区块都在它里面，后面设置宽度时只动它一个，其他区块用默认的块级属性填满整行；header和nav负责页面顶部区域；main是两栏布局的关键，left和right会通过CSS变成左右排列，如果不写任何CSS，它们现在就是上下堆叠的两个块。

几个参数值得注意：lang="zh-CN"告诉浏览器页面语言，对中文排版和屏幕阅读器友好；meta charset="UTF-8"防止中文乱码；href="css/style.css"是相对路径，如果你的CSS文件放在HTML同目录，直接写style.css就行，目录结构不同路径就要改。导航里的href="#"是占位写法，等有真实页面再替换成具体地址，这在新手阶段不算偷懒，是避免链接大面积失效的常见做法。

3. 把DIV和CSS对上号：个人网站的完整样式实现与参数解释

3.1 清浏览器默认样式，否则四个方向都有留白

很多新手写完CSS发现页面总比预期宽一点，或者背景色铺不满整行，第一反应是哪里写错了，其实十有八九是没清默认样式。浏览器会给每个元素施加一套出厂设置：body默认有8px的外边距，ul默认有左内边距，h1到h6自带上下边距。这些值叠在一起，页面就显得又歪又宽。

所以样式文件的第一段永远是“重置”，我一般先把这些默认值归零：

/* 重置默认间距，让所有元素从同一起跑线开始 */ * { margin: 0; padding: 0; } body { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background-color: #f5f6f7; color: #333; line-height: 1.6; }

逻辑说明：*是通配选择器，把页面上所有元素的margin和padding都清零，这是最粗暴但最有效的起步方式。清零之后再根据自己的设计逐处加间距，就不会出现“这里多了8px、那里多了5px”的糊涂账。

参数说明：字体栈里写了三个候选字体，按顺序匹配，Windows优先用微软雅黑，macOS优先用苹方，两个都没有就用系统默认无衬线字体；background-color: #f5f6f7是浅灰底色，和后面内容区的白色形成微差，让页面有层次感；line-height: 1.6是行高，1.6倍行距适合中文阅读，太小字挤成一团，太大又显得稀稀拉拉。颜色的十六进制值是个人偏好，换成其他颜色不影响布局。

3.2 容器宽度、页头背景与导航横排的核心写法

重置完成就开始给结构套样式。第一步是wrapper，固定宽度、水平居中，这是整个页面的骨架，改这一个就能控制全页宽窄。第二步是header，深色背景配浅色文字，做出“站点头部”的视觉重量。第三步是nav，把竖向的列表变成横向菜单，这里要用到一个常见的布局技巧。

/* 最外层容器：固定宽度，左右居中 */ .wrapper { width: 1000px; margin: 0 auto; } /* 页头：深色底，白字，内边距撑出高度 */ .header { background-color: #2c3e50; color: #ffffff; padding: 30px 40px; } .header h1 { font-size: 28px; margin-bottom: 4px; } .header p { font-size: 14px; opacity: 0.8; } /* 导航：清掉圆点，让li横向排列 */ .nav { background-color: #34495e; } .nav ul { list-style: none; } .nav li { display: inline-block; } .nav a { display: block; color: #ffffff; text-decoration: none; padding: 12px 24px; } /* 导航链接悬停时换颜色，反馈鼠标位置 */ .nav a:hover { background-color: #2c3e50; }

逻辑说明：margin: 0 auto是水平居中的固定写法，0控制上下外边距，auto让浏览器自动分配左右剩余空间，但前提是元素必须有明确宽度，否则auto没有参照物；header的padding: 30px 40px是简写属性，上30px、右40px、下30px、左40px，按顺时针记，写成四个值就分别是上、右、下、左；nav li用display: inline-block把竖排的li变成横向，nav a再设display: block让整个文字块可以点击，点击区域比单纯的文字大一圈，这是导航手感的关键。

参数说明：导航项padding: 12px 24px决定菜单的高度和左右间距；文字颜色用#ffffff，悬停背景色用了和页头一样的#2c3e50，通过背景变化给出反馈。这里用的是传统inline-block方案，比float少踩一个清除浮动的坑，先跑通再优化。还有一个细节：a:hover的悬停样式必须写在a的默认样式之后，CSS后面的同名规则会覆盖前面的，顺序反了 hover 就不生效。

3.3 两栏布局：浮动、宽度和清除浮动的标准动作

主体部分是最容易出问题的地方。左右两栏要并排，但div默认是块级元素，块级元素会占满整行，两个div只能上下堆着。解决办法是给它们分别设置宽度，再用float让它们浮起来并排。浮起来之后父容器main会失去高度，因为浮动的子元素不再参与父元素的高度计算，这个现象就叫浮动塌陷，解决办法是给父容器加一个清除浮动的样式。

/* 主体：用浮动让左栏和右栏并排 */ .main { margin-top: 20px; overflow: hidden; } .left { float: left; width: 260px; background-color: #ffffff; border-radius: 8px; padding: 20px; box-sizing: border-box; } .right { float: right; width: 720px; background-color: #ffffff; border-radius: 8px; padding: 30px; box-sizing: border-box; } /* 页脚：灰底，文字居中 */ .footer { background-color: #e9eaeb; text-align: center; padding: 20px 0; margin-top: 20px; font-size: 14px; color: #666; }

逻辑说明：.left浮动向左，.right浮动向右，宽度 260px 加 720px 正好等于容器 1000px 减去左右外边距，没有留缝也不会重叠。overflow: hidden加在父元素main上，是清除浮动最简单的做法——它让父元素重新包裹住浮动的子元素，高度恢复正常。这个技巧写起来只有一行，但这行的背后是浮动布局最经典的坑。

参数说明：box-sizing: border-box是本段最重要的参数。默认情况下CSS的width只包含内容区，padding和border会额外撑宽元素。以.right为例，设width: 720px再加padding: 30px，实际占用的宽度会变成 780px，两栏加起来就会超出容器出现横向滚动。加上border-box之后，720px就是内容、内边距、边框三者的总宽度，数值才真正稳定。新手阶段不理解这个概念没关系，先记住：设了宽度还带padding的块，都加一句box-sizing: border-box准没错。border-radius: 8px是圆角，个人网站内容区用6到10px比较自然，太大显得玩具感。页脚单独设了margin-top: 20px，避免紧贴在main下面，给页面底部留一口气。

3.4 头像、昵称和简介的一行对齐处理

很多个人网站的侧边栏会放一张头像、旁边是昵称，这个场景用户通过热词“图片和文字一行css”搜到，刚好是侧边栏里的高频需求。做法是用一个小容器把img和文本包起来，再把图片的垂直对齐方式从默认的基线改成居中。

.profile { text-align: center; padding-bottom: 20px; border-bottom: 1px solid #eee; } .profile img { width: 90px; height: 90px; border-radius: 50%; vertical-align: middle; } .profile .name { font-size: 18px; font-weight: bold; vertical-align: middle; margin-left: 10px; }

逻辑说明：img默认是行内元素，行内元素的默认对齐方式是基线对齐（baseline）。图片的基线在底部，文字的基线在文字中下部，两个标准放一起，图片就会比文字高出一截，视觉上像“吊”在上面。vertical-align: middle是相对父元素基线做中线对齐，能让图片和文字的中心线重合。

参数说明：图片设width: 90px; height: 90px是为了统一头像尺寸，配合border-radius: 50%切成圆形；.profile底部用border-bottom: 1px solid #eee做一道极浅的分割线，把侧边栏头部分开，这条线的颜色要非常浅，深了会抢内容风头。border-bottom: 1px solid #eee这种简写，也可以拆成border-bottom-width、border-bottom-style、border-bottom-color三个属性，简写时顺序固定：粗细、线型、颜色。这段CSS前面HTML里还没写对应结构，在.left的h3之前插入这段HTML即可：

<div class="profile"> <img src="images/avatar.jpg" alt="头像"> <span class="name">小林</span> </div>

src路径按实际目录调整，图片不存在时alt文本会显示出来，不会出现裂图。

3.5 链接状态顺序和文字装饰的细节设置

正文和导航里都有链接，链接的默认样式是蓝色加下划线，在浅色背景下还能看，但放在深色导航里就很难看。前面导航已经用了text-decoration: none，正文里的链接需要单独处理。链接有四个状态：未访问、已访问、悬停、点击瞬间，CSS用伪类分别控制。

/* 正文链接：区分已访问和悬停状态 */ .right a { color: #2980b9; text-decoration: none; } .right a:visited { color: #7f8c8d; } .right a:hover { color: #e74c3c; text-decoration: underline; }

逻辑说明：:visited表示用户点过的链接，把它变成灰色，用户扫一眼就知道哪些看过；:hover是鼠标移入状态，变颜色加下划线做二次确认。这四个伪类的书写顺序有讲究，常用缩写“LVHA”：:link、:visited、:hover、:active。顺序乱了，比如把:hover写在:visited前面，已经访问过的链接会忽略悬停样式，因为:visited的优先级把:hover盖住了，新手排查半天往往就栽在这个顺序上。

参数说明：链接颜色选#2980b9这类中等明度蓝色，在白色背景上辨识度高又不刺眼；悬停色#e74c3c是偏暖的红，跟主色形成对比。如果侧边栏想放一个“旧文章归档”区，可以用text-decoration: line-through给过时内容加删除线，这是CSS内置的文本装饰，直接写在对应类名下即可，比如.old-post { text-decoration: line-through; }。这类小技巧不用刻意背，用到时查一下属性名就行。

4. 个人网站DIV+CSS常见问题排查：五个把页面改乱的坑

4.1 页面比屏幕宽一截，右侧出现空白横条

这是一个极其普遍的现象。明明设置了容器宽度，打开页面还是可以左右拖动，背景色也从右侧缺一块。检查Elements面板，往往发现某个元素的实际宽度超过了容器。

原因出在盒子模型上。默认box-sizing: content-box情况下，width只算内容区，padding和border都会往外加。假设你给.right设置了width: 720px，又写了padding: 30px，那.right实际占满780px，和旁边的260px + 40px内边距加一起超过1000px，横向滚动条就被撑出来了。

解决方法是给所有设置宽度的块统一加上box-sizing: border-box，或者在CSS最前面给通配符设置这个值——让所有元素的宽度都按“总宽”来算，这是最一劳永逸的做法：

* { box-sizing: border-box; }

加上这一句之后，设置width: 720px就真的是720px，padding从宽度里内部消化，不会再撑破容器。注意这一行要放在重置样式区域，让全局生效。

4.2 父容器高度塌了，背景色只包住一半内容

给.left和.right加了float之后，父容器.main的背景色或下边框只显示到内容顶部，后面的内容挂在了容器外面。这不是浏览器有问题，而是浮动元素的特性：浮动的子元素脱离文档流，父元素觉得“我没事了”，高度就统计不到子元素。

常见错误做法是在.main末尾加一个空div并设置clear: both，这确实能解决，但要为每个浮动容器多写一个无意义的标签，污染结构。我在第3章里用了overflow: hidden，一行解决，但它的副作用是会把溢出的内容裁掉；更专业的做法是给浮动容器写一个清除浮动的工具类，用CSS伪元素完成：

.clearfix::after { content: ""; display: table; clear: both; }

把clearfix加到.main的class里，比如<div class="main clearfix">，.clearfix::after会在.main内容末尾生成一个看不见的块，这个块可以清除左右的浮动，父容器重新把子元素包起来。display: table是为了生成干净的块级上下文，不会影响布局。这套写法兼容性最好，我个人的习惯是：浮动布局出现塌陷，第一反应上.clearfix::after，不要先怀疑CSS写错。

4.3 改了CSS文件，页面一点变化都没有

改完样式刷新浏览器，页面纹丝不动。这时候先别翻代码，按两步走：第一步在浏览器里按F12打开开发者工具，切到Network标签，刷新页面，看style.css是否出现了且状态是200；第二步切到Elements标签，选中某个元素，看右侧Styles面板里有没有对应规则。如果文件没加载，检查link标签的href路径。HTML在根目录、CSS在css/子目录时，路径是css/style.css；HTML和CSS同目录时，直接写style.css。路径问题是最常见的黑匣子。

还有一类情况是文件加载了，但规则被其他规则覆盖。比如你在文件末尾给.right写了background-color: #fff，结果前面某个更具体的选择器也设置了背景色，优先级高的赢了。排查方法是在开发者工具里看Styles面板，被划掉的属性就是被覆盖的那条，浏览器还会告诉你来源是哪个文件哪一行，照着改就行。

最后确认一遍：你的.css文件里有没有误写<style>标签。.css文件是纯样式文本，里面出现尖括号会被当成无效内容跳过。这个问题在学生练习里几乎每周都出现，写得越少越容易漏检查。

4.4 图片和文字摆在一行，看起来高高低低

头像旁边放昵称，图片总是比文字高出一截，调整了好几次margin都没用。原因是行内元素的垂直对齐规则，img和文本默认按基线对齐，图片基线在自身底部，文字基线在字符底部，两者的位置基准不一样。

解决方式非常直接，给图片（或者文字的容器）加上vertical-align: middle，让两者中心线对齐。还有一个备选方案：把图片的display设为block，再用float: left让文字围过来，这样图片不再参与行内对齐。两种做法在不同场景里各有用途：只对齐一行就用vertical-align，做图文混排就用浮动。

千万别用margin-top的负值去硬顶图片位置，我这里吃过亏。不同浏览器、不同字体渲染下，这套微调出来的“精确值”会漂移，今天看了对齐，明天换台电脑又错位。用CSS提供的对齐属性，不要跟基线较劲。

4.5 单位混用导致字体忽大忽小

页面上部分字号写的px，部分写的rem，在桌面浏览器看还行，换台设备字号比例就乱了。根源在于rem是相对单位，它以<html>根元素的字号为基准。桌面端根字号默认是16px，所以1rem = 16px；但在某些移动端环境或用户改了浏览器默认字号，根字号变化，整页rem字体都会跟着缩放。

并非rem不能用，而是要定一个统一策略：个人网站以桌面端为主时，全部用px，结果最可预期；要做响应式页面时，统一用rem，且在一开始就重新定好根字号基准。我见过同学的项目里混用两个体系，改字体大小时算半天也算不准——比基层级一个简写能用默认值糊弄过去，这个真的糊弄不了。

/* 统一切换到 rem 体系时，先固定根字号 */ html { font-size: 16px; }

这段代码放在CSS最上方，之后所有字号都用1.25rem、1.5rem这类写法，换算以16px为基准。正文段落用16px或1rem，标题用1.5rem到2rem，层级分明又不至于缩放失控。

这五条里每一条我都踩过，前两条几乎覆盖了新手阶段80%的布局翻车现场，后三条属于“症状容易识别但原因藏得深”的疑难杂症。排查顺序建议按“先盒模型、再浮动、后检查网络请求”来走，比漫无目的地改样式效率高得多。

5. 从能看得过去到能拿出手：主题切换、检查与验证技巧

页面基本成型后，下一步不是加更多区块，而是让整个站点具备可维护性。个人网站最常做的进阶操作是换主题色。现在页头、导航、链接的蓝色系颜色散落在多个规则里，换色要改四五处，容易漏。CSS变量可以解决这个问题：在:root里定义主色、辅色、背景色，所有用到的地方引用变量，换主题只改一处。

:root { --primary-color: #2c3e50; --accent-color: #2980b9; --bg-color: #f5f6f7; --text-color: #333; } .header { background-color: var(--primary-color); } .nav { background-color: var(--primary-color); } .right a { color: var(--accent-color); } body { background-color: var(--bg-color); color: var(--text-color); }

这套变量写法在更新一点的浏览器里都支持，没有任何依赖，是纯CSS方案。换主题时只需要把--primary-color从深蓝改成墨绿，整个站点的页头和导航跟着变，链接色单独走--accent-color，两套色互相独立。

做完代码层面的优化，还要做一次浏览器端的验证。打开开发者工具的Device Toolbar（快捷键Ctrl+Shift+M），把宽度从1000px逐步拖到375px，观察是否出现横向滚动条。个人网站如果只面向桌面端，这个测试通过即可；如果你想让它在手机上不破版，可以顺手加一句最轻量的响应式规则：

@media (max-width: 768px) { .wrapper { width: 100%; padding: 0 10px; } .left, .right { float: none; width: 100%; margin-bottom: 20px; } }

这段CSS的意思是：屏幕宽度小于768px时，容器不再固定1000px，而是自适应屏幕宽度；左右两栏取消浮动，变回上下排列。它改动很小，却能让这个纯DIV+CSS页面在手机上也能正常阅读，不需要引入任何框架。

验证时还要习惯用Elements面板看盒模型图。选中任意元素，面板右侧会出现一个方块图，蓝色部分是内容区，橙色是内边距，黄色是外边距。鼠标放上去，页面上会同步高亮对应区域。检查一个元素实际占宽多少、间距从哪来，这不靠猜，看这张图比改几十次CSS都管用。

做个人网站这件事，代码量不大，但它逼着人把“结构”和“样式”两个概念彻底分开。我最初自己做这类页面时，总爱把样式直接写进标签里，觉得省事，直到项目变成五六个页面才狠心重构。如果你只打算写一个静态页，行内样式确实能用；但只要设想一下下个月要加个作品集页面，今天多花两分钟建个style.css就是最便宜的后悔药。这个方向值得多花些时间，它是后面理解浮动的替代方案、响应式布局、甚至一类现代CSS框架的思维底子。希望帮到你。

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