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

简介面向网页设计初学者的DIVCSS实战案例以构建个人网站为完整项目系统演示如何用div容器划分页面结构并通过CSS实现头部、主体、侧边栏、页脚等常见模块的布局与视觉样式。资源内含一个可运行的HTML页面、配套的CSS样式表及多张素材图片——HTML负责结构、CSS负责表现、图片用于效果展示合计14个文件压缩包仅154KB轻量便于下载与研读。案例通过外部样式表与HTML分离组织直观体现结构与表现分离思想讲解覆盖类/ID选择器、盒模型中的margin/border/padding、静态/相对/绝对/固定定位、z-index层级控制以及媒体查询与Flexbox响应式布局等核心知识点。完整项目包含可直接运行的页面骨架适合课程作业、前端入门或课程设计参考可自行修改配色与栏目快速产出个人网站。已有306人学习借助该实例可为后续开发更复杂的响应式网站打下扎实基础。1. DIVCSS个人网站案例为什么这个老资源还值得拆一遍DIVCSS做个人网站听起来像是十来年前的词汇但把这份“简单的网页制作案例DIVCSS完成个人网站”解压开你会发现一个干净得有点出乎意料的组合一个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之后按引用路径反查就行。这个包里的核心文件有以下几类整理成表格看比自己挨个试要快文件/目录类型在页面里承担的工作Default.html结构文件页面所有div的嵌套关系个人网站的骨架Default.css样式文件控制字体、颜色、位置、背景图负责“长什么样”images/lan.jpg图片素材一般是栏目头或背景装饰images/top.jpg图片素材通常是页面顶部背景条images/buttom.jpg图片素材通常是页脚背景条images/001.jpg等图片素材内容图展示个人照片或作品截图Thumbs.db系统缓存Windows生成的缩略图缓存和网页无关可以删Thumbs.db是Windows自己生成的不是网页资源。我每次收到这种压缩包都会顺手删掉否则传服务器时多一个没用的文件。这个案例包本身很小真正需要你花时间读的只有Default.html和Default.css两个文件图片只是被引用的素材。2.2 Default.html怎么读把div嵌套当积木看打开Default.html你第一眼看到的应该是大量成对的div标签。div没有任何默认样式它只是一个块级容器作用就是把页面内容划分为逻辑区块。这个案例的整体结构非常规矩常见的写法是外层一个总容器里面依次放头部、主体、底部。主体再分左右两栏左边放主要内容右边放侧边栏。用结构示意可以写成下面这样div classcontainer !-- 头部区logo 导航 -- div classheader div classlogo个人名字/div div classnav首页 | 关于我 | 作品 | 联系/div /div !-- 主体区左右两栏 -- div classmain div classcontent正文区域/div div classsidebar侧边栏/div /div !-- 底部区版权信息 -- div classfooter版权信息/div /div这段结构里container是顶层容器header、main、footer是三大分区。header里又套了logo和nav两个子divmain里套了content和sidebar子div。注意我特意用了class而不是id因为这个案例里同一个class可能被多个元素复用比如后面做图文列表时每个图片块都能用同一个class来定义样式。id在同一个页面里只能出现一次适合用在类似“回到顶部”这种唯一元素上。读代码时顺着这个嵌套关系一层层剥开页面结构自然就清楚了。如果浏览器里直接双击打开然后按F12打开开发者工具在Elements标签页里也能看到同样的嵌套树。我一般会先在开发者工具里点几下某个段落再回代码里找对应div这样阅读效率比从头看HTML高得多。2.3 Default.css怎么挂接外部样式表才是正解案例把样式单独放在Default.css里而不是写成一堆内联style这是个人网站维护里很重要的一步。在Default.html的head区域里你会看到这样一行代码link relstylesheet typetext/css hrefDefault.css /这行代码告诉浏览器去加载Default.css之后页面上所有元素的默认样式都由它来覆盖。rel属性说明这是一个样式表type说明是text/csshref是样式文件路径。因为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约620pxsidebar约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盒模型是每个做DIVCSS布局的人都要过的第一道坎。一个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. 常见问题与避坑四个让人翻车的DIVCSS细节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放在同一目录。 解决先在浏览器里按CtrlF5强制刷新排除缓存。然后按F12打开开发者工具切到Network标签刷新页面找到Default.css这一条看它状态码是不是200。如果显示404就去检查href路径。如果状态码200但样式不对在Elements标签页里点那个标题元素在右侧Styles面板里能看到是哪一条规则盖掉了你的颜色。这个排查顺序能解决八成“改了没反应”的问题剩下的两成是选择器写错比如类名带漏了前面的点。还有一条血泪经验改完样式后不要只刷新页面要在开发者工具里确认CSS文件确实被重新加载了。有些时候浏览器用的是内存里的旧版本网络请求根本没发出去。5.4 浏览器预览和发布后布局不一致现象本地双击打开页面一切正常传到服务器或者换台电脑就错位图片也裂开。 原因文件路径写成了本地绝对路径比如img srcC:/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章的文件清单过一遍直接改起来就行。本文还有配套的精品资源点击获取