简介一份面向网页设计初学者的完整实训案例围绕“中华资讯网”静态页面演示如何用DIV划分页面结构、通过CSS控制布局与样式帮助理解盒模型、浮动、定位及基础响应式写法等核心知识点。压缩包共25个文件包含1个HTML页面、1个CSS样式表、1个jQuery脚本以及多张JPG/GIF图片素材整体仅177KB轻量易用适合直接打开对照学习也便于课程作业与自学修改实践文件命名直观可按模块快速查找。目前已有100人学习下载。通过分析页面源码与样式表可掌握头部、主体、侧边栏、底部等常见网站区域的布局思路同时学习图片素材的组织方式并尝试调整浮动、定位等属性观察页面变化为独立完成类似资讯类页面打下扎实基础。1. 一个DIVCSS的完整案例比看十遍教程都管用做网页这行当有个绕不开的阶段CSS属性背得滚瓜烂熟真拿到一张设计图却不知道怎么把页面搭出来。DIVCSS的核心思想其实很简单——结构归结构、样式归样式HTML里的DIV标签只负责划分区块CSS负责控制这些区块长什么样、摆在哪。但要真正吃透这套东西光看语法没用得拆一个完整的成品页面。“中华资讯网”这个案例就是干这个用的。它把一套新闻门户的页面完整拆成了HTML文件、CSS文件、JS文件和几十张图片素材从头部导航到左侧栏目、从内容区到底部版权全部用DIV搭骨架、CSS刷样式。适合两类人刚学完CSS基础但不会做整页的新手以及想快速找回布局手感的老手。资源里每个文件都对应页面的一个部分按图索骥就能把整个页面的布局逻辑看明白。2. 拆解中华资讯网的页面结构从图片命名反推布局思路拿到这个RAR压缩包先别急着打开Default.html。第一步是看文件清单——从images里的图片命名就能猜出页面的骨架。topp.jpg对应顶部区域left.jpg对应左侧栏buttom.jpg对应页脚leftbian.jpg是左侧边框线littlexian.jpg和middxian.jpg是分隔线素材。这套命名习惯在早期DIVCSS项目里非常典型图片直接按位置取名HTML里的DIV也按区块职责来划分。2.1 页面骨架的五个核心区块打开Default.html后你会发现整个页面是由五个大DIV层层嵌套出来的。我一般把这个结构称为“五层骨架”最外层是container负责包住全站内容并设置居中宽度往里是header放LOGO和导航再往下是main左右分栏的结构在这里展开最后是footer处理版权信息。所有的class命名都对应CSS里的同名选择器这比随便起名要好排查得多。body !-- 最外层容器控制全站宽度和居中 -- div classcontainer !-- 头部区域LOGO 导航条 -- div classheader div classlogo img srcimages/top.jpg alt中华资讯网 /div div classnav ul lia href#首页/a/li lia href#资讯/a/li lia href#专题/a/li lia href#论坛/a/li /ul /div /div !-- 主体区域左侧栏 右侧内容 -- div classmain div classleft-side img srcimages/left.jpg alt侧边栏配图 ul lia href#分类一/a/li lia href#分类二/a/li /ul /div div classright-content div classnews-list h2今日要闻/h2 ul lia href#第一条新闻标题/a/li lia href#第二条新闻标题/a/li /ul /div /div /div !-- 底部区域版权信息 -- div classfooter pCopyright 中华资讯网/p /div /div /body这段骨架代码是有讲究的。最外层的container用了class而不是id因为从复用性角度看class可以同时命中多个元素id更适合页面里唯一的锚点header、main、footer三个大区块分别对应页面的纵向段落中间用main包住左右两栏而不是让left和right直接挂在container下面这样以后如果想调整分栏比例或者改成三栏布局只需要动main内部的DIV就行不影响头部和底部。图片素材的引用路径用的是相对路径images/开头。这意味着整个RAR解压之后Default.html和images文件夹必须在同一级目录下否则浏览器会找不到图片。这个案例里的图片基本都采用jpg格式因为jpg适合照片和带渐变色的位图而gif格式03.gif、06.gif这些用来做小图标和动画分隔线。2.2 列表导航和图片素材的对应关系导航和栏目列表在这个案例里用的是ul加li的结构这是语义化标签的最佳实践。搜索引擎爬虫看到ul里套a标签会优先认为这是导航菜单而不是一堆div堆出来的假链接。每一个li对应一个导航项导航项的文字和跳转地址都在a标签里配好。选中态和高亮态是通过给当前li加class实现的这个案例里预置了dian.jpg和dian.gif这几个点状小图就是用来做列表项前面的项目符号。图片素材和HTML的对应关系需要特别留意。像left.jpg这种大图不一定非要放在左侧栏顶部也可以作为背景图挂载在left-side这个DIV上littlexian.jpg是细横线通常用在两个内容块之间做视觉分隔。有些初学者会纠结图片的像素尺寸其实在这个案例里不需要精确测量用CSS的width和height属性就能控制图片的显示大小图片源文件的尺寸只要大于显示尺寸就不会失真。值得注意的是压缩包里有个Thumbs.db文件。这是Windows系统自动生成的缩略图缓存数据库在网页运行中完全不参与任何逻辑可以安全忽略或者直接删除。但不要因为这个文件就以为包里有病毒或者损坏这只是本地文件管理器留下的痕迹。3. Default.css的拆解选择器优先级、盒模型与浮动布局的实战用法页面的HTML只是骨架真正决定“中华资讯网”长什么样的是Default.css里那一整套样式规则。这个文件几乎没有用内联样式全部通过选择器来命中元素这就是DIVCSS的核心价值——改样式不用动HTML改结构不用动CSS。3.1 全局重置与盒模型参数翻到Default.css的开头几乎必然能看到一段全局重置代码。这是老项目留下的好习惯把浏览器默认的margin和padding清零避免不同浏览器对HTML元素的默认间距不一致导致布局错位。/* 全局重置清掉浏览器默认间距让盒模型从同一起跑线开始 */ * { margin: 0; padding: 0; } /* 容器宽度固定为950px左右居中 */ .container { width: 950px; margin: 0 auto; } /* 头部背景用图片平铺高度固定 */ .header { height: 80px; background: url(images/topp.jpg) repeat-x; }这里的关键点在于盒模型的理解。默认情况下一个DIV的宽度是width padding border的总和也就是说如果你给一个DIV设置了width: 950px再往里面加padding: 10px实际占用的宽度就变成了970px。这个案例里所有宽度计算都基于此规则这也是很多新手第一次照着抄代码时发现页面错位的根本原因——给container设了950px但内部左右两栏的宽度相加超过950px第二栏就会被挤到下一行。重置代码里的*通配符选择器会把所有标签的margin和padding清零。这种做法在真实项目里不算最优解因为会影响所有元素的默认间距更精细的做法是用body, ul, li, p { margin: 0; padding: 0; }这种定向重置。但作为教学案例用*重置能让新手省掉很多排查时间。3.2 浮动布局与清除浮动的正确姿势主体区域左边栏和右边内容区的分栏靠的是float属性。左边栏设置float: left右边内容区也设置float: left两个DIV就能从左到右排列在同一行。/* 左侧栏固定宽度200px左浮动 */ .left-side { float: left; width: 200px; height: 400px; background: url(images/left.jpg) no-repeat; } /* 右侧内容区占剩余宽度左浮动 */ .right-content { float: left; width: 720px; margin-left: 30px; background: #ffffff; } /* 清除浮动防止父容器高度塌陷 */ .main:after { content: ; display: block; clear: both; }float设计之初是用来做文字环绕图片效果的后来被广泛用来做多栏布局。但它有个著名的副作用父容器不会自动包住浮动的子元素导致高度塌陷。比如main这个DIV如果它的两个子元素都浮动了main的高度就变成0背景色和边框全看不见。代码里的.main:after加上clear: both就是在main内容的末尾插入一个空块级元素强制父容器把浮动子元素的高度也算进去。宽度分配这块要算一笔账。container宽度是950pxleft-side占了200pxright-content占了720px加上30px的margin-left总共是950px刚好一行放下。但凡有一个像素超出右边的区块就会被挤到下面去。这就是为什么我强调盒模型必须算清楚——加边框要加宽度加内边距要加宽度float布局的宽度本质是小学数学加法。3.3 文字排版与导航样式的核心参数CSS字体方面这个案例给正文和导航设置的字体参数很值得抄作业。中文字体栈一般写成font-family: Microsoft YaHei, PingFang SC, Arial, sans-serif;英文字体放前面还是中文字体放前面有讲究——如果用户系统有多个字体浏览器会按声明顺序逐个查找。导航条的高亮效果用到了背景图切换。鼠标悬停时给a:hover设置一张不同的背景图片这几乎是所有传统网站的标配写法。其原理是CSS的伪类选择器:hover状态触发样式切换而JavaScript在这里只负责下拉菜单这类交互逻辑静态效果全靠CSS完成。/* 导航项悬停效果换背景图 换文字颜色 */ .nav ul li a { display: block; padding: 5px 15px; background: url(images/dian.jpg) no-repeat left center; color: #333333; text-decoration: none; } /* 鼠标悬停时的视觉反馈 */ .nav ul li a:hover { background: url(images/dian2.jpg) no-repeat left center; color: #cc0000; }display: block是这里的点睛之笔。默认情况下a标签是行内元素行内元素设置padding的上下值无效也无法响应width和height。把a转成块级元素之后整个导航项变成一个可点击的方块区域鼠标悬停和点击的响应范围就大了很多。这对于提升用户体验和SEO的爬取效率都有帮助。3.4 响应式设计的提前铺垫这个案例本身是固定宽度布局在当年手机还没普及的时候是主流方案。但现在打开一个固定950px的页面在手机上显示两侧会有大量留白文字也被缩得很小。好在CSS的媒体查询让传统项目也能平滑过渡到响应式只需要在Default.css末尾追加一段覆盖规则。/* 屏幕宽度小于768px时启动移动端布局 */ media (max-width: 768px) { .container { width: 100%; padding: 0 10px; } .left-side { float: none; width: 100%; height: auto; } .right-content { float: none; width: 100%; margin-left: 0; } }这段代码的逻辑是当视口宽度小于等于768px时把container改成100%宽度左右两栏取消浮动并改成上下堆叠。float在移动端布局里是最难控制的因为小屏幕宽度不够两栏挤在一起会看到文字重叠。改成float: none之后布局逻辑从“左右并排”切回“上下排列”这就是媒体查询的覆盖能力。对于这个案例的原生页面来说你不需要大改HTML结构只需追加这段响应式代码就能让“中华资讯网”从桌面端适配到手机端——CSS的层叠特性决定了后声明的样式在同优先级下会覆盖前面的样式媒体查询里的规则在手机端生效桌面端不受影响。4. 常见问题排查图片失效、IE样式丢失、浮动塌陷与选择器优先级踩坑照抄这个案例的时候几乎每个人都会踩几个坑。以下是我见过的、也是这个项目里最容易翻车的四类问题每条都是“现象→原因→解决”的结构。4.1 图片全部变红叉CSS样式完全不生效很多新手解压后直接把Default.html拖到浏览器里发现图片区域全是红叉背景图也没了。最常见的原因是文件路径问题。这个案例用的是相对路径images/top.jpg意味着图片必须放在Default.html所在目录的images子文件夹里。如果你只复制了HTML文件而没带上图片文件夹或者把图片文件夹改了个名字浏览器就按路径找不到资源。解决方式有两种。一种是保持原有的目录结构不改动images文件夹的名字和位置另一种是在CSS里把路径改成绝对路径或根相对路径比如url(/images/top.jpg)但本地调试时用绝对路径容易出问题除非你有本地服务器环境。我一般建议不折腾路径直接解压后在同一个目录下打开HTML这是最稳的。另一个导致CSS完全不生效的原因是编码问题。如果Default.css或者Default.html的编码格式不是UTF-8页面里的中文注释和中文内容会乱码甚至导致CSS解析中断。用记事本打开这两个文件另存为时把编码选成UTF-8再保存一般能解决。4.2 IE 11打开CSS样式失效这个案例早期是在IE时代开发的CSS里的一些写法在IE 11下有兼容性问题。表现是Chrome里页面显示正常但IE里导航栏错位、背景色丢失。原因多半出在两方面一是CSS属性少了浏览器前缀比如display: flex在旧版IE里需要写成display: -ms-flexbox二是用了IE不支持的CSS3新特性比如圆角border-radius在IE 9以下版本不支持。解决思路是官方定义了一套兼容方案在HTML头部加meta http-equivX-UA-Compatible contentIEedge强制IE使用最新内核渲染页面CSS方面用-webkit-、-moz-、-ms-等前缀补齐新特性或者干脆避免在布局中依赖CSS3新属性回到纯粹的floatwidth方案。这个案例本身用的就是老套的float布局理论上IE 11应该能正常渲染如果失效大概率是引用的jquery.js版本和IE 11有冲突换成1.x系列的老版本jQuery能解决大部分问题。4.3 子元素设置了float后父容器高度消失这是float布局的经典翻车现场。现象是页面的背景色只显示在头部和文字区域main区块的背景色不见了或者上下两个区块的重叠在一起。原因是父DIV没有清除浮动子DIV浮动后父DIV的高度塌陷为0。解决方式有三种第一种是在父容器末尾加一个空DIV并设置clear: both但这样会多一个无意义的HTML节点第二种是给父容器设置固定高度但这种方法不够灵活第三种最推荐——用伪元素清除浮动就是我在第3章里写的.main:after { content: ; display: block; clear: both; }。这种方式不用改HTML结构纯CSS解决唯一的坑是伪元素需要设置display: block才能让clear生效否则在部分浏览器里无效。4.4 类选择器和ID选择器混用导致样式优先级混乱在修改样式的时候新手容易犯一个错在HTML里写div idmain却把样式写成了.main { ... }或者反过来。最后页面效果时有时无加一个样式能生效再加一个又不生效了。原因是ID选择器和类选择器的优先级不同。ID选择器的权重是100类选择器是10标签选择器是1。当两个规则同时命中同一个元素时权重高的生效权重相同的情况下后声明的规则覆盖前面的。所以如果某个元素的样式被卡住了用浏览器的开发者工具查看该元素的计算样式就能看到是谁的规则覆盖了你写的规则。我一般会遵循一个习惯页面级的唯一区块用ID可复用的模块用类。容器和头部、底部这种全站就一个的元素用ID没问题但左侧栏和右侧内容区这种可能存在多个同类模块的区块一律用类。这个案例里的class命名就是典型的类选择器用法照着学不会出错。5. 把中华资讯网改成响应式布局媒体查询、弹性盒与开发者工具验证静态页面做完不算完真正的考验是让它在手机和Pad上也能看。这个案例是固定950px布局改动它不需要推倒重来而是通过追加CSS规则实现渐进增强。5.1 从固定宽度到弹性布局的关键改动在原有Default.css末尾追加媒体查询区块针对小于768px的屏幕覆盖布局规则。核心思路是把container的width改成百分比把左右两栏的float取消并改成上下排列。同时导航栏在移动端建议改成可折叠的汉堡菜单但这需要JavaScript配合——更简单的做法是让导航项竖直排列不需要任何脚本干预。/* 移动端导航改竖直排列 */ media (max-width: 768px) { .nav ul li { float: none; display: block; text-align: center; } .nav ul li a { display: block; padding: 12px 0; } }这里的改动思路值得细讲。桌面端的导航项通常是横向排开的也就是给li设置float: left到了移动端把float: none并设置display: block每个导航项独占一行。加上text-align: center让文字居中整个导航就变成了适合拇指点击的竖直菜单。整个过程只改CSSHTML结构原封不动。5.2 用Flexbox替换浮动布局的现代方案如果你的目标浏览器都支持Flexbox完全可以绕过float的老路。Flexbox是专门为布局设计的弹性盒模型不需要清除浮动也不存在高度塌陷问题。中华资讯网的主体分栏用Flexbox重写代码量更少逻辑更清晰。/* 用Flexbox重新实现左右分栏 */ .main { display: flex; flex-direction: row; } .left-side { flex: 0 0 200px; /* 固定宽度200px不缩放 */ } .right-content { flex: 1; /* 占据剩余全部空间 */ margin-left: 30px; } /* 移动端切换为上下排列 */ media (max-width: 768px) { .main { flex-direction: column; } .right-content { margin-left: 0; margin-top: 20px; } }flex: 0 0 200px的含义是三合一简写——第一个值是flex-grow0表示不放大第二个值是flex-shrink0表示不缩小第三个值是flex-basis表示主轴方向上的初始尺寸。flex: 1则是让right-content在主轴上占据所有剩余空间。用Flexbox之后整个main区块的高度会自动包裹内部内容不用再写伪元素清除浮动这就是现代布局相比传统方案的核心优势。5.3 浏览器开发者工具验证布局的完整流程改完布局之后必须用开发者工具验证每个断点的显示效果。我常用的流程是打开Chrome按F12点击设备工具栏图标切换到手机模拟模式在顶部选一个预设设备比如iPhone 14然后拖动窗口宽度观察375px、768px、1024px三个断点下页面的表现。在Elements面板里点击左侧栏的DIV右侧的Styles窗口会显示当前生效的CSS规则凡是带删除线的声明就是被覆盖的带黄色叹号的说明有语法错误。通过这个方式排查浮动塌陷和宽度溢出非常高效——选中main这个DIV如果它的高度只有几像素说明没包住内部浮动子元素马上给main加上清除浮动的伪元素。我的习惯是每改一个容器宽度就刷新一次页面并查看右侧的Computed标签页里width的实际计算值确认盒子模型是否超出父容器。这套验证流程走到位固定布局改响应式就不会有大的翻车风险。从那以后我每次接手传统DIVCSS项目都强制自己先跑一遍F12看计算样式再动手改代码这已经成了改版前必做的前置动作。希望这些经验能帮你把这个案例吃透动手重构时少走几条弯路。本文还有配套的精品资源点击获取 
长河君 · 2026/10/1 4:48:53 · 阅读 1.2k DIV+CSS完整案例拆解：从盒模型到响应式布局实战
简介一份面向网页设计初学者的完整实训案例围绕“中华资讯网”静态页面演示如何用DIV划分页面结构、通过CSS控制布局与样式帮助理解盒模型、浮动、定位及基础响应式写法等核心知识点。压缩包共25个文件包含1个HTML页面、1个CSS样式表、1个jQuery脚本以及多张JPG/GIF图片素材整体仅177KB轻量易用适合直接打开对照学习也便于课程作业与自学修改实践文件命名直观可按模块快速查找。目前已有100人学习下载。通过分析页面源码与样式表可掌握头部、主体、侧边栏、底部等常见网站区域的布局思路同时学习图片素材的组织方式并尝试调整浮动、定位等属性观察页面变化为独立完成类似资讯类页面打下扎实基础。1. 一个DIVCSS的完整案例比看十遍教程都管用做网页这行当有个绕不开的阶段CSS属性背得滚瓜烂熟真拿到一张设计图却不知道怎么把页面搭出来。DIVCSS的核心思想其实很简单——结构归结构、样式归样式HTML里的DIV标签只负责划分区块CSS负责控制这些区块长什么样、摆在哪。但要真正吃透这套东西光看语法没用得拆一个完整的成品页面。“中华资讯网”这个案例就是干这个用的。它把一套新闻门户的页面完整拆成了HTML文件、CSS文件、JS文件和几十张图片素材从头部导航到左侧栏目、从内容区到底部版权全部用DIV搭骨架、CSS刷样式。适合两类人刚学完CSS基础但不会做整页的新手以及想快速找回布局手感的老手。资源里每个文件都对应页面的一个部分按图索骥就能把整个页面的布局逻辑看明白。2. 拆解中华资讯网的页面结构从图片命名反推布局思路拿到这个RAR压缩包先别急着打开Default.html。第一步是看文件清单——从images里的图片命名就能猜出页面的骨架。topp.jpg对应顶部区域left.jpg对应左侧栏buttom.jpg对应页脚leftbian.jpg是左侧边框线littlexian.jpg和middxian.jpg是分隔线素材。这套命名习惯在早期DIVCSS项目里非常典型图片直接按位置取名HTML里的DIV也按区块职责来划分。2.1 页面骨架的五个核心区块打开Default.html后你会发现整个页面是由五个大DIV层层嵌套出来的。我一般把这个结构称为“五层骨架”最外层是container负责包住全站内容并设置居中宽度往里是header放LOGO和导航再往下是main左右分栏的结构在这里展开最后是footer处理版权信息。所有的class命名都对应CSS里的同名选择器这比随便起名要好排查得多。body !-- 最外层容器控制全站宽度和居中 -- div classcontainer !-- 头部区域LOGO 导航条 -- div classheader div classlogo img srcimages/top.jpg alt中华资讯网 /div div classnav ul lia href#首页/a/li lia href#资讯/a/li lia href#专题/a/li lia href#论坛/a/li /ul /div /div !-- 主体区域左侧栏 右侧内容 -- div classmain div classleft-side img srcimages/left.jpg alt侧边栏配图 ul lia href#分类一/a/li lia href#分类二/a/li /ul /div div classright-content div classnews-list h2今日要闻/h2 ul lia href#第一条新闻标题/a/li lia href#第二条新闻标题/a/li /ul /div /div /div !-- 底部区域版权信息 -- div classfooter pCopyright 中华资讯网/p /div /div /body这段骨架代码是有讲究的。最外层的container用了class而不是id因为从复用性角度看class可以同时命中多个元素id更适合页面里唯一的锚点header、main、footer三个大区块分别对应页面的纵向段落中间用main包住左右两栏而不是让left和right直接挂在container下面这样以后如果想调整分栏比例或者改成三栏布局只需要动main内部的DIV就行不影响头部和底部。图片素材的引用路径用的是相对路径images/开头。这意味着整个RAR解压之后Default.html和images文件夹必须在同一级目录下否则浏览器会找不到图片。这个案例里的图片基本都采用jpg格式因为jpg适合照片和带渐变色的位图而gif格式03.gif、06.gif这些用来做小图标和动画分隔线。2.2 列表导航和图片素材的对应关系导航和栏目列表在这个案例里用的是ul加li的结构这是语义化标签的最佳实践。搜索引擎爬虫看到ul里套a标签会优先认为这是导航菜单而不是一堆div堆出来的假链接。每一个li对应一个导航项导航项的文字和跳转地址都在a标签里配好。选中态和高亮态是通过给当前li加class实现的这个案例里预置了dian.jpg和dian.gif这几个点状小图就是用来做列表项前面的项目符号。图片素材和HTML的对应关系需要特别留意。像left.jpg这种大图不一定非要放在左侧栏顶部也可以作为背景图挂载在left-side这个DIV上littlexian.jpg是细横线通常用在两个内容块之间做视觉分隔。有些初学者会纠结图片的像素尺寸其实在这个案例里不需要精确测量用CSS的width和height属性就能控制图片的显示大小图片源文件的尺寸只要大于显示尺寸就不会失真。值得注意的是压缩包里有个Thumbs.db文件。这是Windows系统自动生成的缩略图缓存数据库在网页运行中完全不参与任何逻辑可以安全忽略或者直接删除。但不要因为这个文件就以为包里有病毒或者损坏这只是本地文件管理器留下的痕迹。3. Default.css的拆解选择器优先级、盒模型与浮动布局的实战用法页面的HTML只是骨架真正决定“中华资讯网”长什么样的是Default.css里那一整套样式规则。这个文件几乎没有用内联样式全部通过选择器来命中元素这就是DIVCSS的核心价值——改样式不用动HTML改结构不用动CSS。3.1 全局重置与盒模型参数翻到Default.css的开头几乎必然能看到一段全局重置代码。这是老项目留下的好习惯把浏览器默认的margin和padding清零避免不同浏览器对HTML元素的默认间距不一致导致布局错位。/* 全局重置清掉浏览器默认间距让盒模型从同一起跑线开始 */ * { margin: 0; padding: 0; } /* 容器宽度固定为950px左右居中 */ .container { width: 950px; margin: 0 auto; } /* 头部背景用图片平铺高度固定 */ .header { height: 80px; background: url(images/topp.jpg) repeat-x; }这里的关键点在于盒模型的理解。默认情况下一个DIV的宽度是width padding border的总和也就是说如果你给一个DIV设置了width: 950px再往里面加padding: 10px实际占用的宽度就变成了970px。这个案例里所有宽度计算都基于此规则这也是很多新手第一次照着抄代码时发现页面错位的根本原因——给container设了950px但内部左右两栏的宽度相加超过950px第二栏就会被挤到下一行。重置代码里的*通配符选择器会把所有标签的margin和padding清零。这种做法在真实项目里不算最优解因为会影响所有元素的默认间距更精细的做法是用body, ul, li, p { margin: 0; padding: 0; }这种定向重置。但作为教学案例用*重置能让新手省掉很多排查时间。3.2 浮动布局与清除浮动的正确姿势主体区域左边栏和右边内容区的分栏靠的是float属性。左边栏设置float: left右边内容区也设置float: left两个DIV就能从左到右排列在同一行。/* 左侧栏固定宽度200px左浮动 */ .left-side { float: left; width: 200px; height: 400px; background: url(images/left.jpg) no-repeat; } /* 右侧内容区占剩余宽度左浮动 */ .right-content { float: left; width: 720px; margin-left: 30px; background: #ffffff; } /* 清除浮动防止父容器高度塌陷 */ .main:after { content: ; display: block; clear: both; }float设计之初是用来做文字环绕图片效果的后来被广泛用来做多栏布局。但它有个著名的副作用父容器不会自动包住浮动的子元素导致高度塌陷。比如main这个DIV如果它的两个子元素都浮动了main的高度就变成0背景色和边框全看不见。代码里的.main:after加上clear: both就是在main内容的末尾插入一个空块级元素强制父容器把浮动子元素的高度也算进去。宽度分配这块要算一笔账。container宽度是950pxleft-side占了200pxright-content占了720px加上30px的margin-left总共是950px刚好一行放下。但凡有一个像素超出右边的区块就会被挤到下面去。这就是为什么我强调盒模型必须算清楚——加边框要加宽度加内边距要加宽度float布局的宽度本质是小学数学加法。3.3 文字排版与导航样式的核心参数CSS字体方面这个案例给正文和导航设置的字体参数很值得抄作业。中文字体栈一般写成font-family: Microsoft YaHei, PingFang SC, Arial, sans-serif;英文字体放前面还是中文字体放前面有讲究——如果用户系统有多个字体浏览器会按声明顺序逐个查找。导航条的高亮效果用到了背景图切换。鼠标悬停时给a:hover设置一张不同的背景图片这几乎是所有传统网站的标配写法。其原理是CSS的伪类选择器:hover状态触发样式切换而JavaScript在这里只负责下拉菜单这类交互逻辑静态效果全靠CSS完成。/* 导航项悬停效果换背景图 换文字颜色 */ .nav ul li a { display: block; padding: 5px 15px; background: url(images/dian.jpg) no-repeat left center; color: #333333; text-decoration: none; } /* 鼠标悬停时的视觉反馈 */ .nav ul li a:hover { background: url(images/dian2.jpg) no-repeat left center; color: #cc0000; }display: block是这里的点睛之笔。默认情况下a标签是行内元素行内元素设置padding的上下值无效也无法响应width和height。把a转成块级元素之后整个导航项变成一个可点击的方块区域鼠标悬停和点击的响应范围就大了很多。这对于提升用户体验和SEO的爬取效率都有帮助。3.4 响应式设计的提前铺垫这个案例本身是固定宽度布局在当年手机还没普及的时候是主流方案。但现在打开一个固定950px的页面在手机上显示两侧会有大量留白文字也被缩得很小。好在CSS的媒体查询让传统项目也能平滑过渡到响应式只需要在Default.css末尾追加一段覆盖规则。/* 屏幕宽度小于768px时启动移动端布局 */ media (max-width: 768px) { .container { width: 100%; padding: 0 10px; } .left-side { float: none; width: 100%; height: auto; } .right-content { float: none; width: 100%; margin-left: 0; } }这段代码的逻辑是当视口宽度小于等于768px时把container改成100%宽度左右两栏取消浮动并改成上下堆叠。float在移动端布局里是最难控制的因为小屏幕宽度不够两栏挤在一起会看到文字重叠。改成float: none之后布局逻辑从“左右并排”切回“上下排列”这就是媒体查询的覆盖能力。对于这个案例的原生页面来说你不需要大改HTML结构只需追加这段响应式代码就能让“中华资讯网”从桌面端适配到手机端——CSS的层叠特性决定了后声明的样式在同优先级下会覆盖前面的样式媒体查询里的规则在手机端生效桌面端不受影响。4. 常见问题排查图片失效、IE样式丢失、浮动塌陷与选择器优先级踩坑照抄这个案例的时候几乎每个人都会踩几个坑。以下是我见过的、也是这个项目里最容易翻车的四类问题每条都是“现象→原因→解决”的结构。4.1 图片全部变红叉CSS样式完全不生效很多新手解压后直接把Default.html拖到浏览器里发现图片区域全是红叉背景图也没了。最常见的原因是文件路径问题。这个案例用的是相对路径images/top.jpg意味着图片必须放在Default.html所在目录的images子文件夹里。如果你只复制了HTML文件而没带上图片文件夹或者把图片文件夹改了个名字浏览器就按路径找不到资源。解决方式有两种。一种是保持原有的目录结构不改动images文件夹的名字和位置另一种是在CSS里把路径改成绝对路径或根相对路径比如url(/images/top.jpg)但本地调试时用绝对路径容易出问题除非你有本地服务器环境。我一般建议不折腾路径直接解压后在同一个目录下打开HTML这是最稳的。另一个导致CSS完全不生效的原因是编码问题。如果Default.css或者Default.html的编码格式不是UTF-8页面里的中文注释和中文内容会乱码甚至导致CSS解析中断。用记事本打开这两个文件另存为时把编码选成UTF-8再保存一般能解决。4.2 IE 11打开CSS样式失效这个案例早期是在IE时代开发的CSS里的一些写法在IE 11下有兼容性问题。表现是Chrome里页面显示正常但IE里导航栏错位、背景色丢失。原因多半出在两方面一是CSS属性少了浏览器前缀比如display: flex在旧版IE里需要写成display: -ms-flexbox二是用了IE不支持的CSS3新特性比如圆角border-radius在IE 9以下版本不支持。解决思路是官方定义了一套兼容方案在HTML头部加meta http-equivX-UA-Compatible contentIEedge强制IE使用最新内核渲染页面CSS方面用-webkit-、-moz-、-ms-等前缀补齐新特性或者干脆避免在布局中依赖CSS3新属性回到纯粹的floatwidth方案。这个案例本身用的就是老套的float布局理论上IE 11应该能正常渲染如果失效大概率是引用的jquery.js版本和IE 11有冲突换成1.x系列的老版本jQuery能解决大部分问题。4.3 子元素设置了float后父容器高度消失这是float布局的经典翻车现场。现象是页面的背景色只显示在头部和文字区域main区块的背景色不见了或者上下两个区块的重叠在一起。原因是父DIV没有清除浮动子DIV浮动后父DIV的高度塌陷为0。解决方式有三种第一种是在父容器末尾加一个空DIV并设置clear: both但这样会多一个无意义的HTML节点第二种是给父容器设置固定高度但这种方法不够灵活第三种最推荐——用伪元素清除浮动就是我在第3章里写的.main:after { content: ; display: block; clear: both; }。这种方式不用改HTML结构纯CSS解决唯一的坑是伪元素需要设置display: block才能让clear生效否则在部分浏览器里无效。4.4 类选择器和ID选择器混用导致样式优先级混乱在修改样式的时候新手容易犯一个错在HTML里写div idmain却把样式写成了.main { ... }或者反过来。最后页面效果时有时无加一个样式能生效再加一个又不生效了。原因是ID选择器和类选择器的优先级不同。ID选择器的权重是100类选择器是10标签选择器是1。当两个规则同时命中同一个元素时权重高的生效权重相同的情况下后声明的规则覆盖前面的。所以如果某个元素的样式被卡住了用浏览器的开发者工具查看该元素的计算样式就能看到是谁的规则覆盖了你写的规则。我一般会遵循一个习惯页面级的唯一区块用ID可复用的模块用类。容器和头部、底部这种全站就一个的元素用ID没问题但左侧栏和右侧内容区这种可能存在多个同类模块的区块一律用类。这个案例里的class命名就是典型的类选择器用法照着学不会出错。5. 把中华资讯网改成响应式布局媒体查询、弹性盒与开发者工具验证静态页面做完不算完真正的考验是让它在手机和Pad上也能看。这个案例是固定950px布局改动它不需要推倒重来而是通过追加CSS规则实现渐进增强。5.1 从固定宽度到弹性布局的关键改动在原有Default.css末尾追加媒体查询区块针对小于768px的屏幕覆盖布局规则。核心思路是把container的width改成百分比把左右两栏的float取消并改成上下排列。同时导航栏在移动端建议改成可折叠的汉堡菜单但这需要JavaScript配合——更简单的做法是让导航项竖直排列不需要任何脚本干预。/* 移动端导航改竖直排列 */ media (max-width: 768px) { .nav ul li { float: none; display: block; text-align: center; } .nav ul li a { display: block; padding: 12px 0; } }这里的改动思路值得细讲。桌面端的导航项通常是横向排开的也就是给li设置float: left到了移动端把float: none并设置display: block每个导航项独占一行。加上text-align: center让文字居中整个导航就变成了适合拇指点击的竖直菜单。整个过程只改CSSHTML结构原封不动。5.2 用Flexbox替换浮动布局的现代方案如果你的目标浏览器都支持Flexbox完全可以绕过float的老路。Flexbox是专门为布局设计的弹性盒模型不需要清除浮动也不存在高度塌陷问题。中华资讯网的主体分栏用Flexbox重写代码量更少逻辑更清晰。/* 用Flexbox重新实现左右分栏 */ .main { display: flex; flex-direction: row; } .left-side { flex: 0 0 200px; /* 固定宽度200px不缩放 */ } .right-content { flex: 1; /* 占据剩余全部空间 */ margin-left: 30px; } /* 移动端切换为上下排列 */ media (max-width: 768px) { .main { flex-direction: column; } .right-content { margin-left: 0; margin-top: 20px; } }flex: 0 0 200px的含义是三合一简写——第一个值是flex-grow0表示不放大第二个值是flex-shrink0表示不缩小第三个值是flex-basis表示主轴方向上的初始尺寸。flex: 1则是让right-content在主轴上占据所有剩余空间。用Flexbox之后整个main区块的高度会自动包裹内部内容不用再写伪元素清除浮动这就是现代布局相比传统方案的核心优势。5.3 浏览器开发者工具验证布局的完整流程改完布局之后必须用开发者工具验证每个断点的显示效果。我常用的流程是打开Chrome按F12点击设备工具栏图标切换到手机模拟模式在顶部选一个预设设备比如iPhone 14然后拖动窗口宽度观察375px、768px、1024px三个断点下页面的表现。在Elements面板里点击左侧栏的DIV右侧的Styles窗口会显示当前生效的CSS规则凡是带删除线的声明就是被覆盖的带黄色叹号的说明有语法错误。通过这个方式排查浮动塌陷和宽度溢出非常高效——选中main这个DIV如果它的高度只有几像素说明没包住内部浮动子元素马上给main加上清除浮动的伪元素。我的习惯是每改一个容器宽度就刷新一次页面并查看右侧的Computed标签页里width的实际计算值确认盒子模型是否超出父容器。这套验证流程走到位固定布局改响应式就不会有大的翻车风险。从那以后我每次接手传统DIVCSS项目都强制自己先跑一遍F12看计算样式再动手改代码这已经成了改版前必做的前置动作。希望这些经验能帮你把这个案例吃透动手重构时少走几条弯路。本文还有配套的精品资源点击获取