简介面向大学生HTML5期末作业与Web前端初学者的旅游类网页设计成品以“蜘蛛旅行社”为案例完整包含首页、关于我们、旅游路线、客户反馈、联系方式5个页面覆盖HTML5语义化标签、CSS3样式美化以及基础JS交互适合用于课程设计、期末提交或仿站练习。压缩包共42个文件体积10.67MB其中5个html页面、4个css样式表、30张jpg/png图片素材及1个json配置文件分类清晰可直接打开浏览并参考修改。已有230人学习下载。整套资源从页面布局、导航设计到图片素材一体配套便于对照学习响应式布局、页面结构规范与视觉风格统一同时提供预览地址有助于理解完整站点效果并可作为前端开发流程中的阶段性练习作品。1. 蜘蛛旅行社的5个页面赢在结构而不是花哨大学生HTML5期末作业里“htmlcss网页设计”这个方向看着简单真正动手才发现图片一多就乱导航做着做着对不上5个页面凑完已经不想再碰代码。蜘蛛旅行社这个题目比较讨巧——旅游网站天然需要首页、线路列表、详情、关于我们和留言页逻辑顺畅老师一看就懂而且纯HTMLCSS就能完成不需要动JavaScript。这篇笔记按我平时带项目的习惯把“蜘蛛旅行社”拆成一套可以直接照做的静态站方案从页面骨架、公共头部底部到卡片布局、表单和避坑清单全部用html5css3的写法落地。新手能跟着敲熟手可以跳过基础直接看第5章的坑。2. 搭好全站公共骨架目录、头部、底部与CSS样式引入2.1 五个页面怎么组织超链接的相对路径别写错我一般会把5个页面平铺在站点根目录图片单独放一个images文件夹样式单独放一个css文件夹。这样做的好处是相对路径写起来短交给老师时整个文件夹一拷就能打开不会出现“为什么我的作业在别人电脑上图片全裂了”的尴尬。travel-spider/ index.html 首页 trip.html 旅游线路列表 detail.html 线路详情 about.html 关于我们 message.html 在线留言 images/ 存放所有图片 css/ style.css 全站样式页面之间的链接用相对路径而不是从本地磁盘复制的绝对路径。比如在index.html里写a hreftrip.html旅游线路/a浏览器会从当前文件所在目录找trip.html。如果你写的是file:///C:/Users/xxx/Desktop/travel-spider/trip.html换台电脑就废了。作业里最容易扣分的不是样式不够炫而是三个以上链接点了没反应原因基本都是路径问题。2.2 公共头部与底部一份HTML模板控制全站5个页面共享同一套导航和页脚是最省力的做法。头部放Logo和主导航底部放版权信息和备案号占位中间内容区域各自替换。这样老师点来点去结构一致性一下子就能看出来。!-- index.html -- !DOCTYPE html html langzh-CN head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title蜘蛛旅行社 - 首页/title link relstylesheet hrefcss/style.css /head body header classsite-header div classlogo a hrefindex.html img srcimages/logo.png alt蜘蛛旅行社 /a /div nav classmain-nav ul lia hrefindex.html classactive首页/a/li lia hreftrip.html旅游线路/a/li lia hrefdetail.html线路详情/a/li lia hrefabout.html关于我们/a/li lia hrefmessage.html在线留言/a/li /ul /nav /header !-- 每个页面在这里替换自己的主体内容 -- footer classsite-footer p© 2024 蜘蛛旅行社 版权所有 | 地址示例市大学城文汇路 100 号/p /footer /body /html这段模板里有几个关键点。meta charsetutf-8必须放在head里最靠前的位置否则中文容易乱码具体原因在第5章细说。langzh-CN告诉浏览器页面语言对老师检查代码规范性是加分项。classactive标记当前页导航高亮哪个页面就把它加到对应的a上。2.3 CSS样式引入方式外部样式表与字体、文本位置CSS有三种引入方式行内样式、内嵌style、外部链接。期末作业我建议外部链接一个style.css管全站改一处全站生效。行内样式千万别用——老师让你改个字体颜色你得翻5个页面逐个找纯属给自己挖坑。外部样式表不需要写style标签文件里直接写CSS规则通过link relstylesheet hrefcss/style.css引进来。/* css/style.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Microsoft YaHei, PingFang SC, Helvetica Neue, sans-serif; color: #333; background-color: #f6f6f6; } .site-header { height: 70px; background-color: #1a7f6a; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; } .main-nav ul { list-style: none; display: flex; gap: 28px; } .main-nav a { color: #fff; text-decoration: none; font-size: 15px; line-height: 70px; } .main-nav a.active, .main-nav a:hover { color: #ffe08a; } .site-footer { background-color: #2b2b2b; color: #aaa; text-align: center; padding: 20px 0; }这里有个细节值得说导航文字垂直居中不是用margin-top硬挤的我给a设置line-height: 70px行高和父容器header一样高文字自然垂直居中。这是“怎么调整css容器里的文本位置”最常见的解法之一——水平用text-align垂直用line-height两者配合基本能应付作业里80%的对齐需求。字体方面font-family从微软雅黑、苹方到通用sans-serif依次排学校机房是Windows优先保证雅黑显示正常。如果你偏要用rem也可以1rem默认等于16px但期末作业用px最直白省得换算。3. 首页和线路列表页用CSS摆平Banner、卡片与图文对齐3.1 首页首屏图片上的文字怎么定位容器高度怎么稳住旅游网站的首屏几乎都有一张大图配一句slogan蜘蛛旅行社的首页也不能少。常见做法是把img铺满容器再用一层div classbanner-text绝对定位放在图片上方。注意父容器必须position: relative绝对定位的子元素才跑不出边界。section classbanner img srcimages/banner.jpg alt蜘蛛旅行社主题横幅 div classbanner-text h1探索世界从蜘蛛出发/h1 p精选线路 · 纯玩无购物 · 大学生专属优惠/p /div /section.banner { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; overflow: hidden; } .banner img { width: 100%; height: 380px; object-fit: cover; display: block; } .banner-text { position: absolute; left: 60px; top: 50%; transform: translateY(-50%); color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }object-fit: cover是个好东西它能保证图片无论原图比例如何都被裁切填满380px高度不会变形。transform: translateY(-50%)配合top: 50%让文字在图片垂直方向上居中水平位置用left: 60px控制。很多同学栽在Banner上是因为给图片设了固定height: 380px却没给父容器设高度一旦图片加载失败或换图整个版面就塌了。所以我给.banner加了overflow: hidden图片撑不开容器时也能兜底。3.2 线路列表卡片式布局用flex三列一行随手排列表页放6条主线产品一行3张卡片用flex布局最稳。旧教材喜欢float排列卡片但float后父容器高度会塌必须额外写清除浮动的代码。flex完全不用管这些flex-wrap: wrap加gap就能自动换行和留白。section classtrip-list wrap h2热门线路/h2 div classcards a hrefdetail.html classcard img srcimages/trip-1.jpg alt川西环线 div classcard-info h3川西环线 5 日游/h3 p成都出发 · 纯玩小团 · 摄影领队/p span classprice¥1280 起/span /div /a !-- 后续卡片结构相同替换图片和文案即可 -- /div /section.cards { display: flex; flex-wrap: wrap; gap: 20px; } .card { width: calc((100% - 40px) / 3); background-color: #fff; border-radius: 8px; overflow: hidden; text-decoration: none; color: #333; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); } .card img { width: 100%; height: 180px; object-fit: cover; display: block; } .card-info { padding: 14px 16px 16px; } .card-info h3 { font-size: 18px; margin-bottom: 6px; } .price { display: inline-block; margin-top: 8px; color: #e07b2a; font-weight: bold; }width: calc((100% - 40px) / 3)计算的是三列宽度容器总宽减去两处gap各20px合计40px再除以3。如果gap改成24px被减数要同步改。整张卡片用a包裹意思是点卡片任意位置都能进详情页这对旅游网站的转化很关键。有一个容易被忽略的点是display: block加在img上——行内元素默认底部会有几像素空隙不加的话卡片图片下方会有条白缝。3.3 图片和文字一行垂直对齐的三种写法与坑线路卡片的标签栏、房价行、底部联系方式都会遇到“小图标和文字怎么让它们在一条线上”的问题。最常见的写法是vertical-align: middle但它只对行内元素有效而且经常被img的baseline基准搞得差几个像素。我自己在作业里常用的有三种写法按可靠性排序。/* 写法一vertical-align 用于行内元素 */ .price-line img { width: 18px; height: 18px; vertical-align: middle; margin-right: 6px; } /* 写法二flex 配合 align-items容器内所有子项垂直居中 */ .price-line { display: flex; align-items: center; gap: 6px; } /* 写法三给图片相对定位微调几个像素 */ .price-line img { position: relative; top: 2px; }第一种是默认首选图标尺寸小、和文字字号接近时效果很好。如果图标偏大或字体偏高用第二种flexalign-items: center直接让图标和文字都相对容器中线对齐这是最不依赖“玄学”的方案。第三种是急救方案适合某些奇特的素材怎么都对不齐、又找不到原因的时候手动top: 2px微调。注意如果图片宽高很大比如60px的图标配14px的文字那不存在完美的对齐正确做法是先限制图片尺寸再谈对齐。4. 详情页、关于我们与留言页表单、锚点和半透明面板4.1 详情页图文混排面包屑、图片环绕与清除浮动详情页是5个页面里最容易写“干”的我一般会加三样东西面包屑导航、图文环绕、行程表格。面包屑让用户知道自己在哪一级目录也给老师一个“这个页面不是凑数”的印象。nav classbreadcrumb a hrefindex.html首页/a gt; a hreftrip.html旅游线路/a gt; span川西环线 5 日游/span /nav article classdetail-content img srcimages/detail-1.jpg alt川西高原风景 classdetail-img p本条线路从成都出发经康定、新都桥、稻城亚丁全程约1500公里。适合学生群体结伴出行领队会随车携带便携氧气瓶并安排藏地民宿体验。/p p行程第三天安排徒步短线往返约2小时海拔爬升约200米。体力一般的同学可以选择骑马项目费用自理。/p /article.breadcrumb { padding: 12px 0; font-size: 14px; color: #888; } .breadcrumb a { color: #1a7f6a; text-decoration: none; } .detail-img { float: left; width: 320px; margin: 4px 20px 12px 0; border-radius: 6px; } .detail-content::after { content: ; display: block; clear: both; }这段代码的核心是float: left加clearfix。图片浮在左侧文字自动环绕它这是htmlcss阶段最能体现“布局能力”的写法。但float会脱离文档流父容器.detail-content会忽略图片高度导致下方元素紧贴上来。所以在父容器上追加伪元素::after并设置clear: both把浮动影响清除父容器高度才能被文字撑起来。容易踩的坑是只给图片设了float忘了清浮动结果页脚爬到图片下面去。4.2 留言页表单控件对齐、焦点样式与必填提示留言页是旅游网站的标配纯CSS也能做出不错的效果。表单的重点不是功能——action随便写或留空都行——而是控件对齐。用flex就能让label和输入框对齐比老式float省心得多。form action# methodpost classmsg-form p label forname姓名/label input typetext idname namename required /p p label fortel电话/label input typetel idtel nametel /p p label forcontent留言内容/label textarea idcontent namecontent rows5 required/textarea /p p label classform-btn/label button typesubmit提交留言/button /p /form.msg-form { max-width: 640px; margin: 30px auto; background-color: #fff; padding: 30px; border-radius: 8px; } .msg-form p { display: flex; align-items: center; margin-bottom: 18px; } .msg-form label { width: 90px; text-align: right; margin-right: 12px; flex-shrink: 0; } .msg-form input, .msg-form textarea { flex: 1; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; font-family: inherit; } .msg-form input:focus, .msg-form textarea:focus { border-color: #1a7f6a; outline: none; box-shadow: 0 0 0 2px rgba(26, 127, 106, 0.2); } .msg-form button { background-color: #1a7f6a; color: #fff; border: none; padding: 10px 24px; border-radius: 4px; cursor: pointer; }label里的for属性关联了输入框的id点击“姓名”两个字光标自动跳进输入框这是HTML5的细节加分点。required让浏览器在提交时自动校验非空期末答辩时老师点提交按钮会看到浏览器弹出提示比你自己做JS校验更像“成品”。outline: none去掉输入框默认黑边换上自定义的绿色边框。4.3 关于我们页半透明面板与回顶部的纯HTML做法关于我们页最容易空。我一般会放一段公司背景、一个团队卡片区、一张营业地址地图占位图。背景用一张大图文字放在半透明的面板上视觉上立刻有层次。.about-wrap { background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../images/about-bg.jpg) center/cover no-repeat; padding: 60px 40px; color: #fff; } .about-box { max-width: 720px; margin: 0 auto; background-color: rgba(255, 255, 255, 0.92); color: #333; padding: 36px 40px; border-radius: 10px; }顺带加一个返回顶部的链接这是“html一键返回顶部算法”里最朴素也最可靠的做法。不用JS一段锚点加一行CSS就够了。a href# classback-top返回顶部/ahtml { scroll-behavior: smooth; } .back-top { position: fixed; right: 24px; bottom: 60px; width: 44px; height: 44px; line-height: 44px; text-align: center; background-color: rgba(26, 127, 106, 0.85); color: #fff; border-radius: 50%; text-decoration: none; font-size: 13px; z-index: 99; }href#的语义是回到文档顶部scroll-behavior: smooth让页面平滑滚动而不是瞬间跳上去。如果想要回到某个区块把#换成区块的id即可比如href#contact。固定定位position: fixed保证滚到任何位置按钮都浮在右下角。5. 期末作业翻车重灾区5条高频坑与排查清单5.1 图片路径不对整页红叉甚至白屏现象页面文字都在但图片位置全是裂图图标更严重的是CSS也加载不出来整页变成纯文本堆叠。 原因img srcimages/banner.jpg里的相对路径是从当前HTML文件所在目录出发的。如果你的HTML在根目录图片在images/里那images/banner.jpg是对的但如果你把HTML放在了子文件夹路径就要写成../images/banner.jpg。还有人是直接从资源管理器复制图片绝对路径交作业时路径里还带着自己电脑的用户名老师一打开全废。 解决统一建images文件夹所有图片引用写成相对路径。检查方法在浏览器按F12切到Console面板404报错会直接告诉你哪个文件找不到。平时预览建议用VSCode的Live Server插件别直接双击HTML用file://浏览有些浏览器对本地文件有安全限制。5.2 中文变乱码charset没放在第一个现象页面上的中文变成“锘″″¤??”之类的乱码或者浏览器自动选择GBK编码导致显示异常。 原因meta charsetutf-8的位置不对或者文件本身保存成了ANSI编码。浏览器解析HTML头时如果在前面遇到非ASCII字符就会猜编码猜错就乱码。 解决把meta charsetutf-8放在head的最顶部在title之前编辑器右下角确认文件编码是UTF-8。还有一个容易犯的错把CSS文件也存成了GBKCSS里的中文注释或content内容会乱CSS文件同样要存UTF-8。5.3 横向滚动条宽度溢出的三个来源现象页面底部出现横向滚动条整体往右能拖出一截空白或者某张图片把版面撑破。 原因最常见的是图片固定了宽度比如width: 1200px而屏幕只有1366px减去滚动条后实际视口可能只有1349px其次是盒模型问题width: 100%再加padding和border实际宽度超出容器还有内容区里有个很长的连续英文或数字串没有换行机会。 解决全局加上* { box-sizing: border-box; }让width包含padding和border图片不要写死宽用max-width: 100%长字符串加word-break: break-all。排查横向滚动条来源的方法临时在CSS里加body { outline: 1px solid red; }然后挨个给可疑容器加背景色或者直接用浏览器开发者工具选中body看它的实际宽度和视口宽度差在哪。5.4 改了CSS没效果先查缓存和路径再查语法现象明明改了style.css里的字体颜色刷新浏览器却还是老样子或者新加的样式完全没生效连背景色都没变。 原因两种情况。一是浏览器缓存了旧的CSS文件尤其是学校机房按了F5有时是伪刷新二是link标签的href路径不对CSS根本没加载或者CSS文件里某个规则前面少了一个闭合花括号导致后续规则全被吞掉。 解决先按Ctrl F5强制刷新排除缓存。再看浏览器开发者工具里的Network面板确认style.css状态是200而不是404。最后检查CSS文件花括号是否成对。提醒一下外部CSS文件里不要写style标签它只需要纯CSS规则这是新手经常绕不清的地方。5.5 页面凑不够5个用列表页与详情页拆分补位现象想做的栏目只有三四个硬凑第五个页面内容重复老师一眼看穿。 原因对“5个页面”的理解太死板以为必须五个完全不同的主题。其实旅游网站天然可以拆成“列表页”和“详情页”这是两套独立模板内容各有侧重。 解决蜘蛛旅行社按这个结构做最稳——index.html首页、trip.html线路列表、detail.html某条线路的详情、about.html关于我们、message.html在线留言。如果你有富余的精力可以把详情页做成两套不同线路的模板这样实际是6个页面但导航里还是5个入口。需要警惕的是别把5个页面做成同一个模板只换换文字老师考察的恰恰是不同页面有不同的主要布局。6. 让验收更顺利语义化、打印样式与交作业前的自检期末作业的风格往往是“能打开就算成功”但如果你想拿高分有三件小事性价比极高。第一件是HTML语义化用header、nav、main、section、article、footer替代满屏的div对老师来说扫一眼就知道你理解html5而不是只会套模板。第二件是给img写全alt属性图片加载失败时显示的文字说明大多数同学都会漏。第三件是加一份打印样式老师可能会直接CtrlP看纸质版导航和Banner在纸上毫无意义。media print { .site-header, .site-footer, .back-top, .banner { display: none; } body { background-color: #fff; color: #000; font-size: 12pt; } .card { break-inside: avoid; } }交作业前建议按下面这张表过一遍比反复用肉眼刷新靠谱检查项检查方式通过标准导航互通从任意页面点遍5个导航链接都能到达对应页面并能返回当前页高亮看每个页面的导航active类跟随当前页面图片完整逐个检查页面中的图片无红叉、无变形拉伸横向滚动条缩小浏览器窗口至1280px宽无横向滚动编码规范查看页面源码!DOCTYPE html、langzh-CN、charset齐全最后一招是用浏览器打印预览把每个页面导出成PDF自己从头翻一遍。PDF里看到的排版问题基本就是老师批改时会看到的问题。我这几年带学生做课程设计见得太多的不是技术难点而是细节翻车路径错、编码乱、图片压变形。希望这份笔记能把蜘蛛旅行社这个题目变成你手里一套真正能交付的作业也希望帮你在Web前端的第一步走稳——别急着追框架先把htmlcss的结构功底打扎实以后学什么都快。本文还有配套的精品资源点击获取