简介这是一份面向网页设计初学者的DIVCSS实战案例以“中华资讯网”页面为原型演示如何用div划分头部、主体、侧边栏、底部等区域再通过CSS控制盒模型、浮动、定位与响应式布局帮助读者建立结构与样式分离的现代网页开发思维。压缩包共25个文件包含1个HTML页面、1个CSS样式文件、14张JPG图片、7张GIF动图以及配套JS脚本整体仅177KB轻量易用适合课堂演练或自学参考。文件类型涵盖静态页面的典型构成目录结构直观图片素材与样式文件分离便于对照源码理解每个模块的样式作用。已有100人学习下载。通过学习可掌握常见选择器、盒模型、浮动多列布局等核心知识点并尝试修改样式观察页面变化快速提升实际布局能力。1. 中华资讯网这个案例到底能让你练会什么拿到「简单的网页制作案例DIVCSS完成中华资讯网.rar」解压后里面就是一个典型的静态资讯门户页头部站名、一排导航、焦点图、左中右三栏内容、底部版权全部用 DIV 搭结构、CSS 写样式。它叫“简单”但并不是玩具——你平时点开的那些资讯站骨架长得和它一模一样。这个案例最适合刚学完 HTML 标签、还没碰过布局的人浮动、盒子模型、选择器优先级、清除浮动这几块基础功打不牢后面学 Flex 和 Grid 也只是会用不懂为什么。跟着这个案例把三栏布局手写一遍比看十遍教程都有用。2. 把中华资讯网拆成五个板块资讯门户的布局结构2.1 门户页的标配骨架Header、Nav、三栏、Footer凡是叫“资讯网”的页面结构基本逃不出这五块。顶部是 Header放站名和副标语下面紧跟 Nav一排频道链接横排中间是主体区域通常会拆成左、中、右三栏左栏放重点内容或者列表中栏放信息流右栏放公告、排行、推荐位最底下是 Footer版权信息。用表格把这五块列出来方便对照.rar里的页面结构板块英文标识作用DIV 命名建议顶部Header站名、副标语、日期.header导航Nav频道入口链接.nav焦点图Banner可选的轮播或推荐位.banner主体Container三栏内容的容器.container底部Footer版权信息.footer三栏部分根据资讯站习惯通常命名为.main主内容区、.side侧栏、.extra附加栏。这里有个容易被忽略的细节DIV 的命名尽量用有语义的英文单词不要用content1、content2这种编号式命名。等页面写多了你会意识到class 名本身就是文档的一部分后面无论自己调样式还是给别人交接都能少花一半时间。2.2 为什么这个案例坚持用浮动布局而不是 Flex 或 Grid现在写布局很多人第一反应是display: flex。但中华资讯网这类经典教学案例用浮动float: left/float: right是有意为之。原因很直接Flex 会把宽度分配、换行规则这些细节都自动处理好新手确实爽但也因此绕开了“盒子模型”和“手动计算宽度”这两门必修课。CSS 里的五种布局方式——流式布局、浮动布局、定位布局、Flex 布局、Grid 布局——在这个案例里你至少在亲历前两种页面默认的流式排列以及让三栏横排的浮动方式。为什么不用 GridGrid 是二维布局写起来更简单但它的书写顺序跟视觉位置是映射关系新手很容易跳过一个关键步骤真正理解“元素在一个容器里是怎么被排布的”。浮动布局下你得自己算宽度、自己考虑 margin、自己处理清除浮动这一套走下来再回头学 Flex你才看得出 Flex 帮你省掉了哪些计算。另外很多老门户页和后台系统到今天仍是浮动布局能读懂、能改、能接盘本身就是一种职业技能。2.3 五块之间怎么衔接清除浮动是布局的“公共课”三栏都用浮动以后一个经典问题就会出现父容器的高度塌陷。子元素浮起来了父容器觉得“我已经没有内容了”于是高度变成 0下面的 Footer 就跟着往上顶。这就是为什么居中容器.container上必须挂一个清除浮动的方法。常见做法有三种实际项目里我一般推荐最后一种/* 方式一空标签法简单但会在 HTML 里多一个无意义 div */ .clear { clear: both; } /* 方式二父容器 overflow: hidden副作用是有可能裁掉溢出内容 */ .container { overflow: hidden; } /* 方式三clearfix推荐 */ .clearfix::after { content: ; display: block; clear: both; }第三种方式的原理是给容器尾部生成一个块级空元素再对它设置clear: both让容器把浮动的子元素重新“兜”起来。注意clear: both同时清掉了左浮动和右浮动的影响所以无论三栏里用了float: left还是float: right都能正常作用。在实际工程里这个.clearfix类是很多老项目的公共样式你会在base.css或common.css里反复看到它。3. 从空白 HTML 到可用页面照着写一遍中华资讯网3.1 先定 HTML 骨架语义化标签与 class 命名不要一上来就写样式。先把页面的结构写扎实CSS 才有地方可以挂。中华资讯网的 HTML 骨架拆开看是这个样子!DOCTYPE html html langzh-CN head meta charsetUTF-8 title中华资讯网/title link relstylesheet hrefcss/style.css /head body div classheader h1中华资讯网/h1 p聚合每日资讯做有观点的内容门户/p /div div classnav ul lia href#首页/a/li lia href#科技/a/li lia href#财经/a/li lia href#文化/a/li lia href#体育/a/li /ul /div div classbanner img srcimages/banner.jpg alt焦点图 /div div classcontainer clearfix div classmain h2今日要闻/h2 !-- 新闻列表 -- /div div classside h2热门排行/h2 !-- 排行列表 -- /div div classextra h2推荐阅读/h2 !-- 推荐列表 -- /div /div div classfooter pCopyright 中华资讯网/p /div /body /html这段骨架里有几个值得注意的点。导航用ul li a三层结构是业界最标准的导航写法比把所有链接直接铺在 div 里更利于样式控制和语义表达。三栏的父容器上是.container和.clearfix两个 class 叠加这里并没有把所有样式都塞进一个 class而是让“容器宽度”和“清除浮动”两份职责分开这样.clearfix可以在整个网站里复用不必为每个容器重复写同名样式。关于 class 和 id 的选择我的习惯是一个页面上只出现一次的元素仍然优先用 class。因为 id 的样式优先级更高一旦写进样式表后续想覆盖就得写更长的选择器属于给自己埋坑。这个案例里没有一处 id就是有意规避这个问题。3.2 CSS 引入的三种方式link、style 标签、内联怎么选写 CSS 之前先想清楚样式放在哪里。三种引入方式结果完全不同外链link relstylesheet hrefcss/style.css是最推荐的HTML 和样式彻底分离改样子不需要动结构页内style标签适合临时调试比如你只想验证一段实验性样式内联style...优先级最高但也是最难维护的正式页面里我几乎不用。中华资讯网这个案例采用的是外链方式放在css/style.css里。你解压.rar以后看到的目录结构通常是中华资讯网/ ├── index.html ├── css/ │ └── style.css └── images/ └── banner.jpg注意style.css这个文件里只写样式不需要再写style标签。有些新手会习惯性地在 css 文件里包一层style这是多余的动作——外链进来的文件浏览器会直接按 CSS 解析。如果你在style.css里写了style浏览器会把它当普通文本忽略掉于是整页样式全部失效。这是一类很常见的“样式不生效”翻车原因。3.3 三栏布局核心代码宽度、浮动、margin 怎么算三栏是中华资讯网的心脏。以容器总宽 1000px 为例我会把左栏设为 480px中栏 260px右栏 220px加上两个 20px 的间隔刚好是 1000px。核心 CSS 长这样* { margin: 0; padding: 0; box-sizing: border-box; } body { font: 14px/1.6 Microsoft YaHei, PingFang SC, sans-serif; background: #f5f5f5; } .container { width: 1000px; margin: 0 auto; } .main { width: 480px; float: left; margin-right: 20px; background: #fff; padding: 15px; } .side { width: 260px; float: left; margin-right: 20px; background: #fff; padding: 15px; } .extra { width: 220px; float: right; background: #fff; padding: 15px; } .clearfix::after { content: ; display: block; clear: both; }算一笔账就清楚了480 20 260 20 220 1000px正好撑满容器。这里最关键的参数是box-sizing: border-box。如果没有这一行.main的 480px 宽度就不包含 padding 和内边框实际占位会变成 480 左右 padding 再加 margin最后整行超过容器宽度右栏会掉到下一行。这个全局声明是我写任何样式表的第一行它把 CSS 盒模型从“先宽后补”变成“宽里含内”后面所有宽度计算都简单得多。导航栏的样式同样值得展开看一下.nav ul { list-style: none; background: #2c2c2c; } .nav ul li { float: left; } .nav ul li a { display: block; padding: 0 24px; line-height: 40px; color: #fff; text-decoration: none; } .nav ul li a:hover { background: #c00; color: #fff; }a标签默认是行内元素只有文字区域能点击给它加display: block之后整个li的区域都是可点击的鼠标移入反馈的面积大了体验才好。垂直居中用的是line-height: 40px而不是height: 40px——这是 CSS 里文字垂直居中的经典手法文字的行高等于导航条高度自然就居中了。text-decoration: none去掉下划线padding: 0 24px控制每个导航项左右留白调这个值可以改变导航的松紧度。3.4 列表与装饰参数字号、间距和一行渐变正文区域的字号我一般用 14px行高 1.6 倍这是老门户页最常见的阅读参数。希望字号能根据根元素缩放时用em但资讯类页面信息密度高用 px 反而更直接可控。CSS 里em是相对单位1em 等于当前元素继承的字号如果父级字号变了子级跟着变适合做整体缩放而 px 是绝对单位页面缩放时它不变。这个案例里正文用 px 完全够用。给标题做装饰时可以用一行渐变代码让视觉效果不那么单调.main h2 { padding-left: 10px; border-left: 4px solid #c00; font-size: 18px; line-height: 1.2; background: linear-gradient(to right, #ffe8e8, transparent); }这里linear-gradient是背景渐变从浅红到透明配合左侧红色竖条资讯栏目标题的感觉就出来了。注意渐变只做装饰不要用在正文上正文保持纯色以保证阅读效率。凡是想让文字溢出的地方显示省略号则用下面这条固定组合.info-list li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }overflow: hidden负责隐藏超出部分white-space: nowrap阻止文字换行text-overflow: ellipsis把结尾显示成省略号。这三行缺一不可是处理列表标题超长的标准写法。.info-list这类命名在资讯站里也常见意思是“信息列表”一看就知道用途。4. DIVCSS 布局避坑五个最常见的翻车现场4.1 底部拦跑到了页面中间背景只盖了一半现象明明把.footer写在三栏后面它却出现在页面中部或者背景色只覆盖一排文字的高度。原因三栏全部float了父容器高度塌陷为 0Footer 没有可以“顶住”的对象。解决给三栏的父容器.container挂上.clearfix或者给.footer加clear: both。我自己的习惯是把clearfix直接做成公共类哪个容器需要就在 class 里追加不用重复写样式。4.2 最右边的栏目掉到了下一行现象三栏的宽度加起来明明小于容器宽度但最右栏总是不肯同排。原因.main设 480px又加了padding: 15px在默认盒模型下实际占位变成 480 30 510px三个栏目的实际宽度加起来超过容器。解决在所有样式之前加* { box-sizing: border-box; }让 padding 算进宽度里。写布局时先写这一行再谈宽度能省掉后续一大堆返工。4.3 导航文字总是偏上怎么调都不居中现象a标签设了height: 40px文字却偏在上方。原因文字垂直位置由line-height决定而不是height。height只约束盒子本身的高度不影响内部文字行位置。解决去掉height直接用line-height: 40px撑出高度如果非要保留height就让两者等值。这个坑在按钮、标签页、导航条上都会遇到属于高频翻车点。4.4 浏览器窗口一缩小页面就乱成一团现象把浏览器拖窄右侧栏目开始堆叠到左栏下方。原因容器宽度固定在 1000px但浏览器可视区小于这个值浮动布局没有空间继续排只能换行。解决给外层容器加min-width: 1000px让页面在窗口变窄时出现横向滚动条而不是破坏布局。固定宽度页面在窄屏下有横向滚动是正常的只有响应式页面才需要针对断点重新计算布局不必混为一谈。4.5 CSS 元素选择器写得太宽样式互相污染现象只想改导航里的a标签颜色结果页面里所有链接都变了。原因选择器写成了a { color: #c00; }元素选择器作用于全站范围太宽。解决把选择器限定到具体层级比如.nav ul li a { ... }或者给导航链接单独一个 class。CSS 元素选择器是入门第一关但它只适合设全局默认样式一旦进入具体组件一定要带类名或层级约束这是从新手到熟练的分水岭。5. 把中华资讯网改造成可用模板三处值得强化的细节5.1 用 hover 做资讯站点的反馈感a:hover这个样式在中华资讯网里已经用在了导航上但你还可以再往前一步给新闻列表加反馈效果。为列表项设置背景色切换加一点过渡参数.info-list li { padding: 8px 0; border-bottom: 1px dashed #e5e5e5; transition: background 0.2s ease; } .info-list li:hover { background: #fafafa; padding-left: 6px; }transition让背景色在 0.2 秒内渐变而不是瞬间跳变鼠标移入移出看起来柔和很多。padding-left在 hover 时右移 6px是资讯列表常见的“被点中”暗示。这个交互在鼠标移入相关的需求里属于最小成本方案不需要引入任何 JS。5.2 字号单位、溢出隐藏与渐变装饰的收尾用法把整站的字号单位统一是我检查别人页面时的第一习惯。正文用 px强调性文字用 em 相对于父级字号放大列表标题超出用三行省略号组合收掉。渐变只出现在标题装饰条和按钮背景上绝不在正文区域使用。这样处理的直接好处是后续接手页面的人不会为了一个标题渐变而翻遍整个样式表。5.3 验证页面“能用”的三个步骤写完页面不要急着关。第一步把浏览器窗口从宽拖到窄看看是否出现横向滚动条栏目是否保持三栏稳定排列。第二步把css/style.css的引用临时注释掉刷新页面看 HTML 结构是否完整——如果去样式后内容仍然有序说明结构写对了。第三步检查图片和 CSS 的路径是相对路径还是绝对路径绝对路径一旦换目录就失效。我接手过的不少项目里页面打不开的原因不是代码错误而是路径写死。做完建站练习的我个人习惯是保留一版干净的 index.html 和 style.css 作为模板下次做内容页时直接复制目录结构只改内容不碰布局。这套做法同样适用你手上的中华资讯网——把三栏布局吃透就等于拥有了一份可以反复套用的页面骨架。希望帮到你。本文还有配套的精品资源点击获取