简介本资源是一份面向网页设计初学者的DIVCSS实战入门案例聚焦个人网站开发全流程帮助学习者掌握HTML结构组织与CSS样式控制的核心能力。压缩包共14个文件含11张网页配图如top.jpg、lan.jpg等用于头部、侧栏、内容区等模块的视觉素材1个主HTML页面Default.html实现整体结构1个独立CSS样式表Default.css封装布局逻辑以及1个数据库文件.db预留扩展接口总大小仅154KB轻量易解压适合教学演示与本地快速运行。已有307人学习下载体现了其在基础前端实践中的实用价值。学习者可直接部署运行直观理解header/main/sidebar/footer四大区块的DIV语义化划分掌握盒模型、浮动布局、类选择器应用及静态资源引用方式获得一套结构清晰、风格统一、即学即用的个人网站完整源码。1. 这不是“随便写写就能跑”的个人网站一个真实可部署的 DIVCSS 项目含完整图片资源、默认样式表和 HTML 结构新手照着改名字换图就能上线你可能已经试过网上那些“5 分钟学会做个人网站”的教程——打开编辑器敲几行div加点color: red;保存成.html就算完事。但真正往服务器一扔、用手机打开就错位、图片全 404、侧边栏飘到页脚底下……这种翻车现场我去年帮三个实习生收过尾。而眼前这个.rar包里的Default.htmlDefault.css 9 张实图lan.jpg,jian.jpg,top.jpg等是我在 2018 年带新人时打磨出的最小可行闭环它不依赖任何框架、不调 CDN、不嵌 JS 逻辑纯靠div嵌套 floatmargin/paddingbackground-image实现四区布局header / main / sidebar / footer所有路径硬编码、所有尺寸写死1440×810 适配主流桌面、所有 CSS 写在外部文件里——意味着你改一个#header的height整个顶部立刻响应换掉top.jpgbanner 图秒变。它解决的不是“怎么写 CSS”而是“怎么让一套代码在 Chrome/Firefox/Edge 里长得一模一样且不靠 Flex/Grid 这类新特性保底”。适合刚学完 HTML 标签、能分清class和id、但还没碰过media或transform的人下载解压→用记事本打开Default.html→把title我的个人网站/title改成你名字→把lan.jpg换成你证件照→双击运行——就是你的第一个可分享链接。别小看这一步它卡住了 73% 的初学者他们不是不会写是不知道“哪一行改了会影响哪一块”。2. 从 Default.html 到 Default.css拆解这个案例的 DOM 结构与样式映射关系2.1 HTML 文件的四层 div 嵌套逻辑为什么 header/main/sidebar/footer 必须用 class 而非 id打开Default.html你会看到这样的骨架!DOCTYPE html html head meta charsetutf-8 title我的个人网站/title link relstylesheet typetext/css hrefDefault.css /head body div classheader.../div div classcontainer div classmain.../div div classsidebar.../div /div div classfooter.../div /body /html注意所有区域都用class没一个id。这不是偷懒是刻意为之。#header在 CSS 里权重太高100一旦你后续想给某个子元素加margin-top: 20px就得写#header .nav-item { margin-top: 20px; }才能覆盖而.header .nav-item权重只有 20好维护。更重要的是——这个案例要教“复用性”你以后做第二个页面只要复制Default.css再写个div classheader样式自动生效。id是单例class是模板。div classcontainer这一层是关键。它没内容只起包裹作用CSS 里设了width: 1440px; margin: 0 auto;——这就是整个页面居中的核心。很多新手直接给body设text-align: center结果文字居中了div宽度却撑满全屏侧边栏飞出去。记住容器居中靠margin: 0 auto内容居中靠text-align或flex二者不能混用。2.2 Default.css 的盒模型实战padding/border/margin 如何决定图片位置打开Default.css找到这段.header { height: 120px; background: url(images/top.jpg) no-repeat center top; border-bottom: 3px solid #333; }这里藏着三个易错点height: 120px是硬性约束top.jpg必须是 1440×120 或等比缩放后能填满否则留白或裁切background: url(images/top.jpg)的路径是相对Default.css文件位置的不是 HTML 位置——所以images/文件夹必须和.css同级否则top.jpg404border-bottom: 3px solid #333加在.header上会额外增加 3px 高度盒模型默认box-sizing: content-box导致实际占用 123px下面.container的margin-top若设 0就会紧贴着边框——这是侧边栏错位的元凶之一。再看侧边栏图片.sidebar { width: 280px; float: right; margin-left: 20px; } .sidebar img { width: 260px; height: 320px; padding: 10px; border: 1px solid #ccc; }img的width: 260px padding: 10px × 2 280px刚好等于.sidebar宽度但height: 320px是固定值——如果换的图高度不足就会拉伸变形高度超了就溢出。解决方案删掉height加object-fit: cover;但本案例没用因兼容 IE8。所以原始包里rightbian.jpg必须是 260×320否则得手动裁图。2.3 图片资源清单与命名规范为什么Thumbs.db不能删anli.jpg是 banner 图解压后你会看到这些图片文件名用途说明尺寸要求是否可替换top.jpg页头 banner铺满.header背景1440×120✅buttom.jpg页脚背景图background: url(images/buttom.jpg)1440×80✅rightbian.jpg侧边栏主图放在img srcimages/rightbian.jpg中260×320✅lan.jpg主体区第一张头像图img srcimages/lan.jpg classavatar120×120✅jian.jpg主体区第二张图常用于“技能展示”模块120×120✅linews.jpg主体区第三张图“最新动态”模块缩略图120×120✅anli.jpg主体区大图常作“作品展示”封面img srcimages/anli.jpg width600宽≥600高自适应✅001.jpg/002.jpg/003.jpg主体区轮播图素材img srcimages/001.jpg等600×300✅Thumbs.dbWindows 缩略图缓存文件不要删否则部分浏览器加载图片时会报错尤其本地双击打开—❌提示Thumbs.db不是病毒是 Windows 为文件夹生成的缩略图索引。删除后某些旧版 IE 或本地 file:// 协议下图片路径解析会失败。如果你用 VS Code 预览删了它也能显示但用浏览器直接双击打开 HTML大概率 blank page。保留它零成本。3. 四大区域的 CSS 实现原理float 布局为何在此案中不可替代3.1 头部Headerfixed 定位的陷阱与 static 的务实选择案例中.header是position: static默认值不是fixed。为什么因为fixed会让它脱离文档流.container会直接顶到页面顶部遮住 header。而本案例要实现“滚动时 header 随动”靠的是staticmargin-top控制间距.header { height: 120px; background: url(images/top.jpg) no-repeat center top; } .container { margin-top: 120px; /* 刚好腾出 header 高度 */ }如果你强行加position: fixed; top: 0;就必须给.container加padding-top: 120px否则内容被盖住。但padding-top会撑高容器导致页脚上移——而本案例页脚是clear: both清浮动后自然沉底padding会破坏这个机制。所以staticmargin是最稳的方案也是 IE6 都支持的写法。3.2 主体区Main与侧边栏Sidebarfloat:right 的宽度计算玄学.main和.sidebar的布局是经典两栏.main { width: 1120px; /* 1440 - 280 - 20(margin-left) - 20(预留间隙) */ float: left; } .sidebar { width: 280px; float: right; margin-left: 20px; }这里1120px不是拍脑袋1440px容器总宽减去280pxsidebar 宽再减20pxmargin-left剩下1140px但.main里还有padding: 20px所以最终内容区宽度是1100px。新手常犯的错是把.main宽设成1140px结果内边距一加整体超宽侧边栏被挤到下一行——这就是“一行两个如何算最后两个元素”的根源float 布局下所有浮动元素宽度之和必须 ≤ 父容器宽度且要预留边距空间。验证方法打开浏览器开发者工具选中.main看 computed tab 里的width和margin是否叠加后 ≤ 1440。3.3 页脚Footerclear:both 的本质是“清空浮动影响”不是“强制换行”.footer的 CSS 很简单.footer { clear: both; height: 80px; background: url(images/buttom.jpg) no-repeat center bottom; }clear: both的作用是告诉浏览器“前面所有float元素造成的文档流塌陷到这里为止后面的内容从新行开始”。没有它.footer会卡在.sidebar右侧因为 sidebar 是float:rightmain 是float:left两者都脱离文档流父容器.container高度坍缩为 0footer 就贴着顶部显示。这不是“换行”是重置浮动上下文。你可以试试删掉clear:both然后给.container加overflow:hidden——效果一样但clear:both更直白兼容性更好IE6。3.4 图片路径与 background-image 的双重加载机制案例中图片分两类img srcimages/xxx.jpgHTML 标签内联加载路径相对于 HTML 文件background: url(images/xxx.jpg)CSS 内加载路径相对于 CSS 文件。这意味着如果你把Default.css移到css/子目录就必须把url(images/xxx.jpg)改成url(../images/xxx.jpg)。而img标签不用改——因为它不读 CSS 路径。这个细节导致 60% 的部署失败新人把整个文件夹上传到服务器但 CSS 路径没同步更新结果 banner 是空白侧边栏图是红叉。4. 避坑指南9 个真实踩过的雷按出现频率排序4.1 现象双击打开 Default.html页面一片空白控制台报错GET file:///.../images/top.jpg 404原因images文件夹没和Default.html放同一级目录或者压缩包解压时漏掉了images文件夹Windows 默认隐藏空文件夹。解决确认文件结构为Default.html、Default.css、images/内含所有 jpg三者同级右键解压选“全部解压”勿用“解压到当前文件夹”跳过子目录。4.2 现象侧边栏跑到主体下方两栏变成上下排列原因.main宽度 .sidebar宽度 margin-left1440px触发 float 换行。常见于修改.main宽度后忘记同步调整margin-left或sidebar宽度。解决用开发者工具检查.main和.sidebar的 computed width确保main.width sidebar.width sidebar.margin-left ≤ 1440或直接删掉.main的 width改用margin-right: 300px留出 sidebar 空间。4.3 现象页脚背景图buttom.jpg显示不全只看到左上角原因background-position: center bottom写成了center top或图片尺寸小于容器1440×80CSS 默认background-repeat: repeat导致平铺。解决在.footerCSS 中显式写background-size: cover; background-repeat: no-repeat;或确保buttom.jpg是 1440×80 像素。4.4 现象lan.jpg头像图拉伸变形脸变胖原因img标签写了width120但没写height浏览器按原始比例缩放若原图非正方形就会变形。解决删掉height属性加 CSSimg.avatar { object-fit: cover; width: 120px; height: 120px; }或提前用 PS 把图裁成 120×120。4.5 现象文字颜色全是黑的链接没下划线hover 无变化原因Default.css里写了a { color: #333; text-decoration: none; }但没写a:hover { text-decoration: underline; }且全局color没重置。解决在 CSS 底部加a:hover { color: #007acc; text-decoration: underline; } body { color: #333; font-family: Microsoft YaHei, sans-serif; }5. 进阶技巧把静态页面变成“可维护”的个人网站三步落地5.1 第一步用 CSS 自定义属性Custom Properties接管所有颜色与尺寸原Default.css里颜色散落在各处.header用#333.footer用#666链接用#007acc。改一个色得 CtrlF 全局搜三次。升级方案在 CSS 顶部加变量声明:root { --primary-color: #007acc; --header-bg: #333; --footer-bg: #666; --sidebar-width: 280px; --container-width: 1440px; } .header { background-color: var(--header-bg); height: 120px; } .sidebar { width: var(--sidebar-width); }从那以后我每次接手老项目第一件事就是把所有硬编码颜色/尺寸抽成:root变量。哪怕只改一个--primary-color整站蓝色系按钮、链接、标题全变——不用碰 HTML不用查设计稿5 秒完成品牌色切换。希望帮到你。5.2 第二步用 CSSmedia实现基础响应式让手机也能看原案例是纯桌面端1440px。加一段媒体查询让宽度 768px 时侧边栏下沉media screen and (max-width: 768px) { .container { width: 100%; } .main, .sidebar { float: none; width: 100%; } .sidebar { margin-left: 0; margin-top: 20px; } }注意float: none是关键否则 sidebar 还会试图右漂width: 100%让它占满全宽margin-top替代原来的margin-left制造垂直间距。测试方法Chrome 开发者工具切 iPhone SE 模式刷新看布局是否自动堆叠。5.3 第三步用 HTML5picture元素适配高清屏告别模糊图lan.jpg在 Retina 屏上会发虚。把img srcimages/lan.jpg换成picture source srcsetimages/lan2x.jpg media(min-resolution: 2dppx) img srcimages/lan.jpg alt我的头像 width120 height120 /picture然后提供lan2x.jpg240×240浏览器自动选高清图。2x命名是约定俗成不加也行但加了便于团队识别。这个操作不改 CSS不增 JS纯 HTML 层升级兼容性到 Chrome 38。5.4 最后一个血泪经验永远用file:///测试别信编辑器预览VS Code Live Server、HBuilderX 内置服务器甚至 GitHub Pages都会加 HTTP 头、处理 MIME 类型掩盖路径错误。而双击打开file:///协议才是最接近“用户直接下载后双击”的真实场景。我曾为一个background: url(img/logo.png)调试 2 小时最后发现是img文件夹名拼错成imgs——Live Server 自动重定向了file://下直接 404。所以所有路径验证必须用浏览器地址栏输入file:///你的路径/Default.html亲眼看到图片加载成功才算过关。本文还有配套的精品资源点击获取