STM32F103 SPI驱动SD卡与FatFS移植实现USB读卡器
2026/9/16 11:43:12
简介：这是一份面向学生群体的旅游景点网页设计模板，以“我的家乡广西梧州”为主题，采用DIV+CSS布局的静态HTML方式完成，配合Dreamweaver制作，适合网页设计课程作业或初学者练手。压缩包体积仅559KB，共10个文件，包含7张景点图片、2个HTM网页文件以及1个GIF顶部动图，结构简单，解压后直接用浏览器打开即可查看完整效果。页面共两个版面，首页通过顶部动图和左侧滚动文字展示梧州风光与特色信息，内页则以图文形式介绍具体景点，整体代码逻辑清晰，便于学习HTML与CSS的实际应用。已有9398人浏览学习，下载后可从素材图片选取、页面布局到动画引入，完整了解一个静态页面从设计到成型的过程，配合清晰的源码结构，没有复杂脚本，是初学者直观可参考的案例。
1. 静态 HTML 页面里的「学生作业级」DIV+CSS：为什么值得拆一遍
很多学生把 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 布局，DIV+CSS 的核心优势是结构与表现分离。表格式布局把行和列写死在 HTML 里，后面想调整左右宽度，必须改表格的width和colspan；浮动布局只需要改一处 CSS，比如把#sidebar从 300px 调到 240px，右侧内容区会自动保持剩余宽度。另外，table用在数据表格上语义正确，用在整页布局上会让屏幕阅读器和搜索引擎都很难理解页面重点，所以现在的主流静态 HTML 页面开发都默认用 div 做骨架。
2.2 首页布局的可复现结构
从 index.htm 里提炼出的骨架大致如下，这个结构也是绝大多数“我的家乡”主题网页设计模板的路数：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>广西梧州旅游景点 - 我的家乡</title> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- 整体容器：限制页面宽度并水平居中 --> <div id="container"> <!-- 顶部大图：GIF 动图展示梧州风貌 --> <div id="header"> <img src="dingbu.gif" alt="梧州风光" width="960" height="200"> </div> <!-- 主区：左侧滚动栏 + 右侧内容区 --> <div id="main"> <!-- 左侧文字滚动 --> <div id="sidebar"> <marquee direction="up" scrollamount="2" height="300"> 梧州骑楼城<br> 白云山公园<br> 中山公园<br> </marquee> </div> <!-- 右侧景点简介 --> <div id="content"> <h2>欢迎来到梧州</h2> <p>梧州位于广西东部，浔江、桂江、西江三江汇合处，是一座有着两千多年历史的岭南城市。</p> </div> </div> <div id="footer">Copyright © 2024 我的家乡梧州</div> </div> </body> </html>这段结构里最重要的不是标签，而是嵌套关系：#header、#main、#footer是兄弟节点，#sidebar和#content是#main的子节点。CSS 选择器正是利用这种父子关系来定位样式，比如#main #sidebar可以只命中主区里的左侧栏，不会误伤其他页面区块。marquee虽然已被 HTML5 标记为过时属性，但在静态页面作业里仍然能跑，direction="up"表示文字从下往上滚动，scrollamount="2"控制每次移动的像素数，数值越大滚动越快。
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文字离边 15px |
width | 内容区宽度 | #sidebar300px |
box-sizing: border-box | 把 padding 计入 width | 防止 300px+padding 超出容器 |
如果不想一个个元素算尺寸，可以直接给全部元素统一盒模型算法：
* { box-sizing: border-box; }这样300px就是真实占用的总宽度，padding和border不会再额外撑大盒子，调试起来省很多时间。需要注意，这行代码会改变所有元素的宽度算法，如果原模板里已经按内容宽度计算尺寸的元素，建议加完之后再回浏览器确认一遍。
3. 两个页面间的跳转：index.htm 与 jingdian.htm 的链接结构和图片路径
3.1 导航用 ul + li + a 实现，再给当前页加标记
首页顶部大图下方通常有一条导航，链接到index.htm和jingdian.htm。学生作业里最常见的错误是把导航写成孤立的<a>标签排成一行，没有语义结构，鼠标移入效果也很难做。我建议用无序列表包住链接，这是静态HTML页面开发里的标准写法：
<div id="nav"> <ul> <li><a href="index.htm">首页</a></li> <li><a href="jingdian.htm" class="current">景点介绍</a></li> <li><a href="#" onclick="return false;">旅游攻略</a></li> <li><a href="#" onclick="return 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 上写onclick="return false;"阻止默认跳转。如果不想在 HTML 里写 JS 事件，也可以用href="javascript:void(0)"达到同样效果。
3.2 相对路径：jingdian.htm 为什么能引用同一批图片
这份模板的压缩包里，1.jpg到6.jpg、jd.jpg、dingbu.gif都直接放在 MF20 文件夹根目录，和两个 htm 文件平级。因此首页里写<img src="1.jpg">，jingdian.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 class="spot"> <img src="jd.jpg" alt="骑楼城"> <div class="spot-text"> <h3>骑楼城</h3> <p>骑楼城位于梧州河东老城区，现存骑楼街道约 22 条，总长 7 公里，是岭南骑楼建筑的集中展示区。</p> <p><a href="jingdian.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 rel="stylesheet" href="styles.css"> | 取决于书写顺序 | 多页面统一风格 |
外部样式的标准写法：
<link rel="stylesheet" href="styles.css">href的值是相对路径，和图片路径一样，必须相对于当前 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>标签上的width="960"。 - 把左侧
marquee里的br文本换成自己家乡的景点和特产名称。 - 打开
jingdian.htm，把<img src="jd.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 控制滚动速度的参数不是 speed
marquee容易让人误以为有speed属性，实际上控制速度的是scrollamount，单位是像素。scrollamount="1"几乎是一帧一帧移动，scrollamount="5"才有明显滚动感。direction="up"与height="300"配合时，文字会被裁剪在 300px 高的区域里，超出部分再滚动出现。下面是完整参数化版本：
<marquee direction="up" scrollamount="2" behavior="scroll" height="300" onmouseover="this.stop()" onmouseout="this.start()"> 梧州特产：龟苓膏、六堡茶、纸包鸡<br> 梧州景点：骑楼城、白云山、龙母庙 </marquee>behavior="scroll"是默认行为，文字从底向上连续滚动；改成slide只滚动一次就停住；alternate会来回反弹。onmouseover="this.stop()"和onmouseout="this.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和clientHeight：
var sidebar = document.querySelector('#sidebar'); console.log('内容高度:', sidebar.scrollHeight, '可见高度:', sidebar.clientHeight);当scrollHeight大于clientHeight时，说明内容超出可视区域，但 marquee 本身会滚动，这种超出是预期行为；如果clientHeight比预想的大很多，检查#sidebar是否被内容撑高，或者#main的overflow: hidden是否被其他样式覆盖。这两个值也可以作为静态 HTML 页面在改版后是否出现横向滚动条的判断依据。
本文还有配套的精品资源，点击获取