拆解学生作业级DIV+CSS模板：盒模型、浮动布局与静态页面改造全攻略

简介这是一份面向学生群体的旅游景点网页设计模板以“我的家乡广西梧州”为主题采用DIVCSS布局的静态HTML方式完成配合Dreamweaver制作适合网页设计课程作业或初学者练手。压缩包体积仅559KB共10个文件包含7张景点图片、2个HTM网页文件以及1个GIF顶部动图结构简单解压后直接用浏览器打开即可查看完整效果。页面共两个版面首页通过顶部动图和左侧滚动文字展示梧州风光与特色信息内页则以图文形式介绍具体景点整体代码逻辑清晰便于学习HTML与CSS的实际应用。已有9398人浏览学习下载后可从素材图片选取、页面布局到动画引入完整了解一个静态页面从设计到成型的过程配合清晰的源码结构没有复杂脚本是初学者直观可参考的案例。1. 静态 HTML 页面里的「学生作业级」DIVCSS为什么值得拆一遍很多学生把 MF20.zip 下载解压后看到 index.htm、jingdian.htm 和一堆 jpg、gif第一反应是代码太老换模板。但打开 index.htm 会看到这是一份标准的静态HTML教学样本顶部 dingbu.gif 做焦点图左侧 marquee 做文字滚动右边用图片加段落介绍广西梧州景点全程只用DIV和CSS。这类网页设计模板没有 JS 框架、没有数据库双击就能运行适合刚接触网页制作的同学理解盒模型、浮动和相对路径也适合想快速看明白静态页面如何组织的开发新人。前者可以直接改文字图片交作业后者能从这套网页制作成品里倒推出一个纯静态页面的完整组织方式。2. 从 index.htm 拆盒模型float 布局、顶部 GIF 与左侧滚动区的搭建2.1 先画版式再写结构别一上来就敲代码打开 index.htm 前先画一张版式草图顶部一张横长大图中间主区被分成左右两列左边窄、右边宽底部一条版权信息。对应到 HTML 结构就是#container包住#header、#main、#footer#main内部再放#sidebar和#content。这就是 Dreamweaver 里常说的 DIV 图层布局每个 div 都是一个盒子通过 CSS 控制盒子的尺寸、位置和层叠关系。比起 table 布局DIVCSS 的核心优势是结构与表现分离。表格式布局把行和列写死在 HTML 里后面想调整左右宽度必须改表格的width和colspan浮动布局只需要改一处 CSS比如把#sidebar从 300px 调到 240px右侧内容区会自动保持剩余宽度。另外table用在数据表格上语义正确用在整页布局上会让屏幕阅读器和搜索引擎都很难理解页面重点所以现在的主流静态 HTML 页面开发都默认用 div 做骨架。2.2 首页布局的可复现结构从 index.htm 里提炼出的骨架大致如下这个结构也是绝大多数“我的家乡”主题网页设计模板的路数!DOCTYPE html html langzh-CN head meta charsetutf-8 title广西梧州旅游景点 - 我的家乡/title link relstylesheet hrefstyles.css /head body !-- 整体容器限制页面宽度并水平居中 -- div idcontainer !-- 顶部大图GIF 动图展示梧州风貌 -- div idheader img srcdingbu.gif alt梧州风光 width960 height200 /div !-- 主区左侧滚动栏 右侧内容区 -- div idmain !-- 左侧文字滚动 -- div idsidebar marquee directionup scrollamount2 height300 梧州骑楼城br 白云山公园br 中山公园br /marquee /div !-- 右侧景点简介 -- div idcontent h2欢迎来到梧州/h2 p梧州位于广西东部浔江、桂江、西江三江汇合处是一座有着两千多年历史的岭南城市。/p /div /div div idfooterCopyright copy; 2024 我的家乡梧州/div /div /body /html这段结构里最重要的不是标签而是嵌套关系#header、#main、#footer是兄弟节点#sidebar和#content是#main的子节点。CSS 选择器正是利用这种父子关系来定位样式比如#main #sidebar可以只命中主区里的左侧栏不会误伤其他页面区块。marquee虽然已被 HTML5 标记为过时属性但在静态页面作业里仍然能跑directionup表示文字从下往上滚动scrollamount2控制每次移动的像素数数值越大滚动越快。2.3 配套 CSS浮动、居中与高度塌陷要让上面的结构变成左右两栏核心 CSS 如下body { margin: 0; padding: 0; font-family: Microsoft YaHei, Arial, sans-serif; background: #f5f5f5; } #container { width: 960px; margin: 0 auto; background: #fff; } #header img { display: block; } #main { overflow: hidden; } #sidebar { width: 300px; float: left; background: #f0f7f0; padding: 10px; } #content { width: 620px; float: right; padding: 15px; } #footer { clear: both; text-align: center; padding: 15px; border-top: 1px solid #ddd; }body { margin:0; padding:0; }用来去掉浏览器默认的 8px 外边距否则顶部大图贴不到最上沿。#container { width:960px; margin:0 auto; }是水平居中的三要素定宽、左右 auto、块级元素。#header img { display:block; }解决图片下方约 3px 的空隙问题这是因为图片默认按基线对齐改成块级元素后不存在基线缝隙自然消失。#sidebar与#content一个 300px 一个 620px加上各自 padding 后可能超过 960px所以我在调整时习惯把 padding 保留在宽度之外或者用box-sizing: border-box重新定义宽度语义。#main { overflow: hidden; }是处理浮动高度塌陷的常见做法两个子元素都浮动了父元素#main无法靠子元素撑起自身高度可能变成 0 高度加上overflow: hidden后父元素会重新包裹浮动子元素。盒模型相关的参数可以这样理解盒模型属性作用首页里的实际位置margin盒子外侧的透明距离#container左右 auto 居中border盒子描边#footer的顶部横线padding盒子内部空间#content文字离边 15pxwidth内容区宽度#sidebar300pxbox-sizing: border-box把 padding 计入 width防止 300pxpadding 超出容器如果不想一个个元素算尺寸可以直接给全部元素统一盒模型算法* { box-sizing: border-box; }这样300px就是真实占用的总宽度padding和border不会再额外撑大盒子调试起来省很多时间。需要注意这行代码会改变所有元素的宽度算法如果原模板里已经按内容宽度计算尺寸的元素建议加完之后再回浏览器确认一遍。3. 两个页面间的跳转index.htm 与 jingdian.htm 的链接结构和图片路径3.1 导航用 ul li a 实现再给当前页加标记首页顶部大图下方通常有一条导航链接到index.htm和jingdian.htm。学生作业里最常见的错误是把导航写成孤立的a标签排成一行没有语义结构鼠标移入效果也很难做。我建议用无序列表包住链接这是静态HTML页面开发里的标准写法div idnav ul lia hrefindex.htm首页/a/li lia hrefjingdian.htm classcurrent景点介绍/a/li lia href# onclickreturn false;旅游攻略/a/li lia href# onclickreturn false;关于梧州/a/li /ul /div配套样式#nav ul { list-style: none; margin: 0; padding: 0; background: #2a7f62; overflow: hidden; } #nav li { float: left; } #nav a { display: block; padding: 10px 20px; color: #fff; text-decoration: none; } #nav a:hover { background: #1f5f49; } #nav a.current { background: #185c46; }display: block让链接的整个矩形区域都可点击而不仅是文字本身这样“景点介绍”四个字周围 10px 的 padding 也会响应鼠标移入事件。如果搜过“css 伪类选择器怎么用”答案就在这里:hover就是一个伪类选择器用于匹配鼠标悬停状态。.current类则标记当前所在页面让访问者知道自己正停在jingdian.htm上。如果想再细一点可以给除了最后一项以外的导航项加右侧分割线#nav li:not(:last-child) a { border-right: 1px solid rgba(255, 255, 255, 0.4); }:not(...)和:last-child都是伪类选择器前者排除最后一个li后者匹配最后一个子元素。两行代码就能实现导航项之间的细线分隔不需要给每个li手工加 class。要注意静态页面里点击“旅游攻略”这种占位链接会跳到页面顶部并在 URL 后面加一个#所以我在 href 上写onclickreturn false;阻止默认跳转。如果不想在 HTML 里写 JS 事件也可以用hrefjavascript:void(0)达到同样效果。3.2 相对路径jingdian.htm 为什么能引用同一批图片这份模板的压缩包里1.jpg到6.jpg、jd.jpg、dingbu.gif都直接放在 MF20 文件夹根目录和两个 htm 文件平级。因此首页里写img src1.jpgjingdian.htm里写1.jpg也能引用同一张图因为它们相对于各自页面的位置是一样的。路径规则可以用下面这张表概括写法解析方式适用场景1.jpg当前目录两个页面共用根目录图片images/1.jpg进入下级目录把图片整理到 images 文件夹后../images/1.jpg回到上级再进入页面在子目录、图片在上级目录/images/1.jpg从站点根目录开始部署到服务器之后在 Dreamweaver 里新建模板时我一般会先把站点结构建好根目录放index.htm、jingdian.htm再建images文件夹放所有图片。但这份 MF20 是扁平结构直接下载双击就能看所以不必为了美观强行改成子目录结构否则每张图片的路径都要跟着改反而增加作业调试成本。3.3 景点页的图文列表float 布局在小范围里的复用jingdian.htm作为景点介绍页主要内容是若干景点的图文介绍。常见做法是把每个景点做成一个.spot容器图片左浮动文字右浮动容器之间用虚线分隔div classspot img srcjd.jpg alt骑楼城 div classspot-text h3骑楼城/h3 p骑楼城位于梧州河东老城区现存骑楼街道约 22 条总长 7 公里是岭南骑楼建筑的集中展示区。/p pa hrefjingdian.htm查看详情/a/p /div /div.spot { overflow: hidden; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #ccc; } .spot img { float: left; width: 180px; height: 130px; margin-right: 15px; } .spot-text { float: left; width: 460px; }overflow: hidden在这里同样是清理浮动保证.spot的高度能包住左浮动的图片和右浮动的文字。border-bottom: 1px dashed #ccc用虚线把每个景点隔开比hr分隔线更容易控制间距。图片给一个固定的width和height避免加载过程中页面高度反复跳动但如果原图比例不是 4:3会被拉伸变形更稳妥的方式是只设width: 180px让height: auto自动保持比例。4. 用 Dreamweaver 改造模板CSS 引入方式、资源替换与浏览器调试4.1 先定 CSS 引入方式再决定改哪个文件这份模板大概率是用 Dreamweaver 做出来的因此打开index.htm后可能会在head里看到style标签也可能看到链接外部 CSS 的link标签。无论哪种第一步都是确认样式写在哪个文件里否则会出现“改了 styles.css 但页面没反应”的问题。CSS 三种引入方式对比如下引入方式代码位置优先级适合场景行内样式元素的style属性最高临时验证某个属性值内部样式head中的style取决于书写顺序单页模板外部样式link relstylesheet hrefstyles.css取决于书写顺序多页面统一风格外部样式的标准写法link relstylesheet hrefstyles.csshref的值是相对路径和图片路径一样必须相对于当前 htm 文件的位置。如果文件夹里根本没有styles.css说明样式写在index.htm内部。我的习惯是交作业的话把样式统一集中到外部 CSS 文件让index.htm和jingdian.htm同时引用改一次配色两个页面同步生效也更符合实际网页制作的维护习惯。4.2 替换文字、图片和标题从首页开始逐块改改造这份“我的家乡”模板核心是替换静态 HTML 页面里的四个要素文本、图片、链接、样式。按下面步骤做最不容易漏打开index.htm先改title广西梧州旅游景点 - 我的家乡/title。这个标题是浏览器标签页显示的文字搜索引擎也靠它识别页面主题不要只改h1不改title。在 Dreamweaver 里按Ctrl F打开查找替换把“梧州”批量替换成自己家乡的名字。替换前先检查页面里是否有“梧州特产”“梧州景点”这类多个词同时出现批量替换后会不会产生“桂林特产”和“桂林特产”之外的歧义。把dingbu.gif替换成自己的横图。如果新图比例不是 960:200就改 CSS 里#header img的宽度或者直接改img标签上的width960。把左侧marquee里的br文本换成自己家乡的景点和特产名称。打开jingdian.htm把img srcjd.jpg等图片路径对应到本地新图片如果新图片放在images子目录里路径要写成images/jd.jpg。其中查找替换这一步Dreamweaver 的查找范围可以选“整个当前本地站点”它会同时检索index.htm和jingdian.htm比逐个文件改更稳。但要注意不要把 CSS 文件里的“梧州”也替换掉替换前先把查找范围限定在“源代码”和“打开的文档”避免误伤样式注释。4.3 浏览器里的验证指令图片 404、浮动错位、宽度溢出改完模板直接在浏览器里打开本地 htm 文件按F12打开开发者工具。先看 Network 面板如果出现红色状态请求就是文件路径没对上。再看 Elements 面板选中#sidebar后浏览器会高亮显示它的盒模型content、padding、border、margin 各占多少宽度一目了然。如果想在 Console 里快速检查所有图片是否加载成功可以粘贴这段代码document.querySelectorAll(img).forEach(function (img) { console.log(img.src, img.complete img.naturalWidth 0 ? OK : FAIL); });img.complete表示图片加载流程是否结束naturalWidth大于 0 才说明图片真实存在。如果有 FAIL就去检查img.src指向的路径和实际文件名是否完全一致包括扩展名大小写。Windows 上DINGBU.GIF和dingbu.gif可能指向同一个文件但部署到 Linux 服务器后就是两个完全不同的文件这是静态页面交到服务器环境后最常踩的坑。5. marquee 滚动与 GIF 顶图的兼容性边界验证方法5.1 控制滚动速度的参数不是 speedmarquee容易让人误以为有speed属性实际上控制速度的是scrollamount单位是像素。scrollamount1几乎是一帧一帧移动scrollamount5才有明显滚动感。directionup与height300配合时文字会被裁剪在 300px 高的区域里超出部分再滚动出现。下面是完整参数化版本marquee directionup scrollamount2 behaviorscroll height300 onmouseoverthis.stop() onmouseoutthis.start() 梧州特产龟苓膏、六堡茶、纸包鸡br 梧州景点骑楼城、白云山、龙母庙 /marqueebehaviorscroll是默认行为文字从底向上连续滚动改成slide只滚动一次就停住alternate会来回反弹。onmouseoverthis.stop()和onmouseoutthis.start()是 marquee 元素自带的方法鼠标移入暂停、移出继续适合用户想仔细读某一行景点介绍时使用。5.2 GIF 顶图的两种异常状态顶部大图dingbu.gif的典型问题有两个图片 404 导致大块空白以及 GIF 动画不播放。404 用 Network 面板检查即可动画不播放则要确认 GIF 文件本身是否为多帧以及图片有没有被 CSS 规则强制替换。可以用下面这段 CSS 让顶图自适应容器宽度同时不影响动画播放#header img { display: block; width: 100%; max-width: 960px; height: auto; }width: 100%让图片宽度跟随容器max-width: 960px保证超过容器时不放大变形height: auto维持宽高比。三个属性组合后无论原图是 800px 还是 1200px视觉上都不会破版。5.3 用两个属性验证滚动区是否溢出左侧滚动区域高度由marquee的height决定如果内容太长滚动区会撑高父容器导致左右两栏高度不一致。验证方法是在 Console 里对比scrollHeight和clientHeightvar sidebar document.querySelector(#sidebar); console.log(内容高度:, sidebar.scrollHeight, 可见高度:, sidebar.clientHeight);当scrollHeight大于clientHeight时说明内容超出可视区域但 marquee 本身会滚动这种超出是预期行为如果clientHeight比预想的大很多检查#sidebar是否被内容撑高或者#main的overflow: hidden是否被其他样式覆盖。这两个值也可以作为静态 HTML 页面在改版后是否出现横向滚动条的判断依据。本文还有配套的精品资源点击获取