简介面向网页设计初学者的DIVCSS个人网站制作案例完整演示如何利用div容器与层叠样式表搭建包含头部、主体、侧边栏和页脚的静态页面并涉及选择器、盒模型、浮动定位及响应式布局等核心知识点。压缩包共含14个文件以11张预览效果图为主配合一个HTML页面、一份Default.css样式表和数据库缓存文件整体仅154KB轻量易用。已有306人学习下载。通过该案例可以直观对照HTML结构与CSS样式的分离写法理解类选择器、id选择器在实际布局中的应用并学习如何用一套样式表控制整站视觉风格为后续深入Flexbox或Grid布局打下扎实基础。1. 一个不依赖框架的个人网站DIVCSS 案例到底在讲什么网上搜“简单的网页制作案例DIVCSS个人网站”能跳出来一堆模板和源码包。我一开始也图省事直接下载页面确实能开可当我想改个字号、换张背景图布局立刻崩掉一半翻代码才发现里面全是内联样式、id 选择器和一层套一层的 DIV根本没法维护。后来再带新人做网页制作我反而定了一条规矩个人网站这个案例必须手写不许碰框架。DIVCSS 看起来简单实际恰好把盒子模型、浮动清除、选择器优先级这些最基础的东西一次性串了起来做完之后再看任何项目源码都不慌。这个案例要解决的事也很具体用 DIV 标签把页面切成头部、导航、内容、侧栏、页脚几块再用 CSS 给每块定宽、定高、定排版最终产出一个能放到任何静态空间直接打开的个人网站。它适合刚学完 HTML 标签、想用完整项目练手的新人也适合准备交“html css 网页制作成品”作业或作品集的人。后面的顺序和我的真实工作流一致先讲骨架怎么搭再讲样式怎么上接着给一套能直接改的成品方案最后单开一章写我踩过的五个坑。中间每段代码都能复现参数为什么这样设我也会说清楚。2. 搭骨架个人网站的 DIV 结构和盒子模型先想清楚再动手2.1 语义化切块一个个人网站页面该拆成几块个人网站再简单也需要让别人一眼知道“你在哪里、你有哪几个入口、你今天写了什么”。常见的 DIV 结构是外面套一个 wrap里面放 header、nav、main、footer。main 里再分 content 和 aside一主一辅信息层级就出来了。body div classwrap div classheader h1我的个人网站/h1 /div div classnav a href#首页/a a href#关于/a a href#作品/a a href#联系/a /div div classmain div classcontent h2最近更新/h2 /div div classaside h3关于我/h3 /div /div div classfooter 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把上一节的结构补全成真正能打开的 HTMLCSS 暂时还没写所以页面看起来像没穿衣服这很正常。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人网站/title link relstylesheet hrefstyle.css /head body div classwrap div classheader h1我的个人网站/h1 p技术笔记与生活记录/p /div div classnav a href#首页/a a href#关于/a a href#作品/a a href#联系/a /div div classmain div classcontent h2最近更新/h2 p这里放正文内容。/p /div div classaside h3关于我/h3 p一段自我介绍。/p /div /div div classfooter pCopyright 2024 我的个人网站/p /div /div /body /html这里有两个参数值得注意。viewport 这个 meta 控制移动端显示宽度不写的话手机打开页面会按桌面宽度缩放字小到看不清。link 标签的 href 写成 style.css指的是和 index.html 同目录下的外部样式表CSS 文件路径这一块后面避坑章会专门讲。3. 上样式CSS 引入方式与五个必调属性让页面脱离“白盒子”状态3.1 CSS 样式引入方式为什么我推荐外部样式表CSS 进页面常见有三种方式内联样式、内部样式、外部样式。个人网站这种多页面小站我建议直接上外部样式表。引入方式写法位置适用场景维护性内联样式div stylecolor:red临时调试差内部样式style写在 head 里单页面小案例中外部样式link relstylesheet hrefstyle.css多页面个人网站好内联样式只在测试单个属性时用进入正式代码前要清掉否则别人改样式时找不到地方下手。内部样式适合只有一个页面的练习但个人网站至少会有首页和关于页两个页面样式抽到外部文件里两个页面共用一份改一处全部生效。外部样式表并不是没有坑最常见的是 link 标签没有写在 head 里或者 path 写错样式直接失效。对应到热搜里的“css样式引入方式”这个问题核心只有一句外部样式文件名用英文、放在站点根目录、link 放 head 里路径按相对路径写。3.2 CSS 选择器和中心对齐别只会用 id 和 text-align选择器优先级是新手最容易混淆的点。内联样式的优先级最高往下是 id 选择器、class 选择器、元素选择器。个人网站里我基本只用 classid 留给 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 背景图、卡片区和页脚的一次性完成方案骨架和基础样式都有了这一章直接组装成一个完整成品。先重申一次目标这是一个不依赖任何框架、纯 DIVCSS 的个人网站首页打开就能看改内容也不费劲。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 classcards div classcard h3项目一/h3 p一句话介绍项目/p /div div classcard h3项目二/h3 p一句话介绍项目/p /div div classcard 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 设了 30pxfooter 的 margin-top 设了 20px按常理中间应该是 50px结果只有 30px。原因相邻的块级元素垂直外边距不会相加取较大的那个值这是 CSS 盒子模型里的合并规则。解决把相邻元素其中一个的间距改成 padding或者在父容器上开启 flex 布局。个人网站里最典型的位置是 main 和 footer 之间我一般直接让 footer 负责 margin-topcontent 不写 margin-bottom避免同一个位置出现两套间距。5.3 IE11 打开样式失效同一个页面在不同浏览器里像没穿衣服现象Chrome 里看着正常的页面用 IE11 打开后导航栏挤成一团、背景没了、hover 没反应F12 里也没有明显的 JS 报错。原因IE11 不支持一部分现代 CSS 特性比如 CSS 变量、gap 间距、background-clip: text对部分 flex 简写的支持也有瑕疵。还有一种隐藏很深的情况DOCTYPE 漏了浏览器直接进入怪异模式盒模型计算方式都变了。解决先把文件头写完整再在 head 里加一行兼容标签最后把 CSS 里太新的特性换掉。!DOCTYPE html html langzh-CN head meta http-equivX-UA-Compatible contentIEedge提示这行兼容标签不是万能钥匙但它能让 IE 用最新的文档模式去解析页面很多样式失效会因为这一行直接消失。5.4 本地双击打不开 CSSfile:// 协议下的样式表被 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 更实用纯 DIVCSS 做出来的页面最容易显得“平”。提升质感不用上复杂动画给卡片一个轻微的悬浮效果就够了。.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 验证一个 DIVCSS 页面到底算不算完成页面做完之后按下面这套习惯过一遍比反复刷新管用。检查项做法通过标准结构与样式分离看 HTML 里有没有内联 style样式全部在 style.css盒子模型F12 里选中卡片看 Computed 的宽度width 包含 padding 和 border本地兼容性用 Edge 和 Chrome 各打开一次布局没有明显差异移动端宽度把浏览器窗口拖到 375px页面不横向滚动图片资源CtrlShiftR 强刷banner 和卡片图都显示最后一步是给整个站加一点 JS 交互比如点击导航平滑滚动、tab 切换内容那就是从纯 DIVCSS 走向“html css js 网页设计”的过程。我的习惯是每次写静态页面前先在纸上画一张盒子图标清楚哪些间距用 padding、哪些用 margin再动代码。这个习惯就是当初做个人网站养出来的。希望帮到你。本文还有配套的精品资源点击获取