简介这份《HTML静态网页设计-期末大作业-明星》资源包面向正在完成网页设计期末作业或练习个人网页制作的学生。压缩包内共609个文件以430张jpg图片、77个html页面、51个png和14个gif动图为主辅以12个css样式表、10个js脚本、5个psd源文件及3个mp3音乐整体约58.07MB目录中按薛之谦、胡歌、鹿晗、杨洋等明星划分独立页面页面均采用H5标准编写。素材中不仅有静态页面还包含轮播特效、登录功能和留言板等交互模块能够演示HTML配合CSS与JavaScript实现动态效果的关键思路。对于希望快速搭建一个完整个人明星站点、并参考真实大作业结构来完善自己项目的学习者这套素材能提供直观的页面布局、视觉设计和特效实现范例从首页到子页的清晰目录也能帮助按模块拆解学习。目前已有3541人学习下载适合作为期末大作业的模板或网页设计进阶练习。1. 明星主题的HTML静态网页设计到底在考什么期末大作业选“明星”主题是HTML静态网页设计课程里最容易被低估的一道题。把一个艺人页面做成“能打开”半天就够但答辩时老师问一句“这套页面换个名字是不是也能交”不少同学就答不上来。真正决定成绩的不是图片清晰度也不是动画数量而是你有没有把HTML的文档结构、CSS盒子体系和基础JS交互串成一套自洽的实现。下面的内容不提供成品源码而是顺着“明星静态页面”这个场景把搭建、参数设置到验收检查的完整路径讲一遍。适合正在做期末大作业、想拿到良好以上成绩的初学者也适合帮同学检查作业、想快速指出关键问题的老手读完可以直接在自己的VS Code里复现并且知道每一行代码为什么存在。2. HTML静态网页设计的骨架DOCTYPE、meta与语义化标签2.1 为什么期末作业里的HTML必须写齐DOCTYPE和meta在VS Code里新建index.html第一行通常是!DOCTYPE html但很多同学嫌它碍眼直接删了。不写DOCTYPE浏览器会进入Quirks Mode怪异模式盒模型计算方式完全改变你在CSS里写的width: 50%可能比预期宽出几个像素明星卡片对不齐、图片溢出、footer跑位很多都是从这里开始的。作业的HTML静态网页设计首先要让浏览器知道“这是一个html5文档”!DOCTYPE html就是在做这件事。html langzh-cn声明页面语言是简体中文浏览器翻译插件、屏幕阅读器和搜索引擎都会读这个属性。热词搜索里常见!doctype htmlhtml langzh-cnheadmeta charsetutf-8这套固定开头不是随便拼的它是HTML5静态网页的标准前置代码。meta charsetutf-8决定字符编码如果忘记写页面里明星介绍的中文可能变成乱码尤其是从Word复制带格式的获奖信息时更容易出现nbsp;、#x之类的转义问题。!DOCTYPE html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title明星主题 · 期末静态网页设计/title meta namedescription contentHTML静态网页设计期末大作业以明星为主题展示个人简介、代表作品与获奖记录。 link relstylesheet hrefcss/style.css /head body !-- 页面内容 -- script srcjs/main.js/script /body /html这段模板里需要给老师讲清楚的参数有三个。widthdevice-width让页面宽度等于设备宽度initial-scale1.0是初始缩放比期末作业如果只在电脑上演示可以省略但只要老师提到“页面在手机上能不能看”这一行就是基础分。link relstylesheet的href用相对路径css/style.css别学着教材里的绝对路径写C:/Users/...交到老师机器上路径不同直接找不到样式。script放在/body前是让元素先渲染再执行JS避免querySelector拿不到节点。2.2 明星页面的信息分层header、main、section、article、footer写body之前先画信息架构明星主题页面通常分四块顶部导航、主角介绍、作品壁纸墙或获奖时间线、底部版权信息。用div从头包到尾也能出来但期末作业的评分标准里常有“结构清晰”语义化标签就是直观给分点。我一般用这套结构body header classsite-header h1明星资料站/h1 nav a href#intro个人简介/a a href#works代表作品/a a href#timeline获奖记录/a /nav /header main section idintro classcard-profile img srcimages/star-01.jpg alt明星宣传照 h2艺人姓名/h2 p出生地、出道时间、粉丝昵称等关键信息/p /section section idworks classcard-grid article classcard h3作品一/h3 p剧名、年份、饰演角色/p /article article classcard h3作品二/h3 p剧名、年份、饰演角色/p /article /section section idtimeline classtimeline ol li2020年 获得某奖项提名/li li2022年 粉丝突破千万/li /ol /section /main footer p页面仅用于课程设计图片版权归原作者所有/p /footer /body这里值得在答辩时展开的三个点main标签每个页面只能出现一次代表主体内容section自带主题语义配合id可以让导航里的a标签做锚点跳转作品卡片用article因为每张卡片都可以独立成文。下面这张表可以直接写进实验报告标签适用区域为什么不用divheader顶部导航区明确页面头部语义main页面主体每个页面唯一section简介、作品区、时间线带有主题区块含义article单张作品卡片可独立复用footer版权、免责声明明确底部语义div不是不能用但满屏div class会让结构层和表现层混在一起。老师审查源码时语义化标签一眼就能看出你有没有理解HTML的文档结构这一项在评分细则里通常叫“页面结构清晰”。2.3 图片标签的路径、alt与懒加载参数明星页面的图片通常占页面体积大头。网上下载一张1920x1080的宣传照可能超过2MB期末作业的整个html文件夹如果因此超过几百MBU盘拷贝都慢。图片先用工具压缩到宽1200px、大小200KB以内再放进images目录。src不要写成images/明星.jpg文件名里别带中文和空格课程演示环境是Linux时中文文件名很容易404常见做法是把文件名改成star-01.jpg这种小写加连字符的形式。alt属性是容易被忽略的给分项它描述图片内容图片加载失败时显示这段文字屏幕阅读器也会读它。比如img srcimages/star-01.jpg alt歌手在演唱会现场的照片穿黑色外套 loadinglazyloadinglazy让图片在滚动到可视区域附近时才加载首屏只加载第一张明星大头照下面的作品壁纸墙滚动到哪加载到哪。这个参数写在静态页面里不加一行JS就能减少至少一半的初始请求期末答辩时可以说这是“性能优化的一点实践”。注意直接放在section里的图片要先在CSS里限制宽度否则浏览器按原始像素显示一张1200px的图会把手机端页面撑破具体控制方法在下一章的盒子模型里展开。3. 明星主题的CSS布局盒子模型、Flex与响应式卡片3.1 先把盒子的四个参数写对再谈好看明星页面里的每张卡片、每张头像、每个按钮在浏览器里都是一个矩形盒子。盒子的从内到外是content内容、padding内边距、border边框、margin外边距这就是常说的“html盒子”。很多期末作业对不齐就是因为忘了统一box-sizing。先用一行reset把所有标签的默认间距清掉* { margin: 0; padding: 0; box-sizing: border-box; }margin: 0; padding: 0;清掉浏览器默认的8px外边距和列表缩进这是静态页面开发最常见的起步写法。box-sizing: border-box的意思是width包含了padding和border的宽度如果没有这一行浏览器默认是content-box那么.card { width: 200px; padding: 20px; border: 1px solid #ccc; }实际占据宽度是242px三张这样的小卡片放进Flex容器就会挤到换行。确认了盒子模型再看明星卡片的具体参数.card { width: 280px; padding: 16px; border: 1px solid #eee; border-radius: 12px; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }这里的border-radius: 12px是圆角box-shadow的四个值分别是水平偏移0、垂直偏移4px、模糊半径12px、颜色rgba(0,0,0,0.08)。阴影越往下越淡卡片就有轻微悬浮感。如果阴影放在整站统一变量里效果会更一致。这里要注意rgba的a是透明度0.08是很淡的阴影期末答辩时投影仪上不会糊成一片。3.2 用Flex把明星卡片排成响应式的一行卡片样式定义好之后需要一个容器来排列它们。作品与作品之间最常见的是等宽卡片墙用Flex写最小实现.card-grid { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; padding: 40px; }display: flex让子元素沿水平主轴排列flex-wrap: wrap是允许换行否则所有卡片会被压缩在一行。gap: 24px同时控制行间距和列间距不要再用margin-right挨个加最后一张卡片多出右边距反而要写:last-child清除。justify-content: center让整行居中卡片少时不会全部挤在左侧。想让卡片在窗口变窄时自动伸缩可以给卡片自身设置弹性简写flex: 1 1 220px;。第一个值1是放大比例第二个值1是缩小比例第三个值220px是基础宽度。配合max-width: 300px;窗口宽时卡片最多300px窄时最小220px自动换行。这样写连媒体查询都不用手机和电脑打开都是整齐的网格。3.3 超过三张卡时尝试CSS Grid的repeat和minmax如果作品有六张或八张用Flex的wrap也能换行但最后一行只有一张卡时卡片会被拉伸得很宽。更精确的做法是用Grid.card-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }repeat(auto-fill, minmax(220px, 1fr))是这条规则的核心让浏览器计算当前宽度能容纳几列每列最小220px剩余空间平均分给各列。auto-fill和auto-fit的区别在于当卡片填不满一行时auto-fill保留空列轨道auto-fit会折叠空列期末作业里展示整数张卡片用auto-fill更直观。下面这张表是我自己取舍时的参照布局对象推荐方案原因导航栏里的链接Flex数量固定一行排开作品卡片墙Grid auto-fill自动换行且每列等宽获奖时间线block或ol纵向阅读不需要弹性用Grid时注意gap的浏览器兼容性现代浏览器都支持但课程机房如果还是老版IE需要退回到margin方案。如果是个人笔记本演示Grid没有问题。3.4 响应式断点与rem单位期末答辩通常用一台笔记本但老师可能顺手打开手机预览。给页面补一个媒体查询就很加分media (max-width: 768px) { .site-header { flex-direction: column; text-align: center; } .card-profile img { width: 100%; height: auto; } .card-grid, .card-wall { grid-template-columns: 1fr; } }max-width: 768px是当前最常见的平板断点意思是视口宽度小于等于768px时应用这些覆盖样式。flex-direction: column让导航从横排变竖排避免链接挤在一行。.card-profile img的width: 100%; height: auto;是让图片跟随容器宽度缩放且保持宽高比这就是明星头像在手机端不出框的关键。字号方面推荐在根元素设置html { font-size: 16px; }标题用1.5rem正文用1remrem永远相对于根字号不会因为父级字号嵌套而越变越小和em的差别是em逐级继承在多层嵌套里容易算错。4. 让明星页面动起来轮播、Tab切换与一键返回顶部算法4.1 用transform做最小可用的图片轮播明星页面的首屏放一张轮播图是很多参考作业的标配。完整的轮播要考虑左右按钮、小圆点、手势滑动期末作业里先做一个自动切换的最简版本就够了。HTML结构是三张图片被一个track包裹div classcarousel idcarousel div classcarousel-track img srcimages/banner-1.jpg alt宣传照1 img srcimages/banner-2.jpg alt宣传照2 img srcimages/banner-3.jpg alt宣传照3 /div /divCSS部分的核心是让track横向排列并隐藏容器之外的区域.carousel { width: 900px; max-width: 100%; overflow: hidden; } .carousel-track { display: flex; width: 100%; transition: transform 0.5s ease; } .carousel-track img { flex: 0 0 100%; height: 500px; object-fit: cover; }flex: 0 0 100%的意思是子项不放大、不缩小基础宽度占满track宽度的100%。因为track宽度就是carousel容器宽度所以每张图片都等于容器宽度三张图片横向排成三屏。overflow: hidden把超出部分隐藏transition让transform变化平滑过渡。之后用JS定时器每隔三秒切换到下一张const track document.querySelector(.carousel-track); const images track.children; let index 0; setInterval(() { index (index 1) % images.length; const step images[0].offsetWidth; // 单张图片的当前宽度 track.style.transform translateX(-${index * step}px); }, 3000);这里不用固定写死900px而是在每次切换前读取第一张图片的offsetWidth窗口变化后也能正确计算位移。index (index 1) % images.length是取模运算index到3时回到0实现循环。translateX是沿X轴平移负值表示向左移动一张图。如果演示时发现图片被压缩变形检查CSS里height和object-fit: covercover会让图片保持比例并裁剪多余部分。4.2 事件委托管理作品卡片的“想看详情”按钮作品卡片很多时不要用for循环给每张卡绑事件闭包和重复绑定都是坑。常见做法是在容器上挂一个监听器通过事件委托判断点击的是哪个子元素document.querySelector(.card-grid).addEventListener(click, (e) { const card e.target.closest(.card); if (!card) return; const intro card.querySelector(.card-intro); intro.hidden !intro.hidden; });e.target.closest(.card)会从被点击的元素向上找最近的.card祖先这样即使点击的是卡片里的图片或标题也能正确找到整张卡片。intro.hidden !intro.hidden是切换隐藏属性的布尔值等价于显示/隐藏详情。用事件委托后新增一张卡片不需要额外绑定所有已存在和未来的.card都自动生效。这就是HTMLCSSJS基础语法里经常提到的“事件冒泡”在实际页面里的价值。4.3 一键返回顶部算法smooth、scrollTo和requestAnimationFrame“html一键返回顶部算法”是静态页面里被问得最多的交互之一。最简单的是调用浏览器原生平滑滚动backTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });window.scrollTo接受一个配置对象top: 0表示纵坐标滚到0behavior: smooth是平滑滚动。这个写法兼容所有现代浏览器一行代码完成。但如果想控制滚动速度或者演示环境对smooth支持不佳就自己用requestAnimationFrame实现指数衰减滚动backTop.addEventListener(click, () { function step() { const y window.scrollY; if (y 0) { const nextY Math.max(0, y - Math.max(8, y / 10)); window.scrollTo(0, nextY); requestAnimationFrame(step); } } requestAnimationFrame(step); });这版算法的关键是Math.max(8, y / 10)。y / 10是每次移动当前距离的十分之一滚动越快每次移动越多后面会越来越慢形成缓动效果。Math.max(8, ...)是保底每次至少移动8px避免最后几像素因为除法结果小于1而永远滚不到顶部。requestAnimationFrame会告诉浏览器在下一帧执行step性能比setInterval稳定页面切到后台时会自动暂停不浪费CPU。按钮本身的显示逻辑可以加一个滚动监听window.addEventListener(scroll, () { backTop.hidden window.scrollY 400; })当页面滚过400px后才出现返回按钮。5. 期末验收前用开发者工具做三件小事布局、配色与SEO可见信息5.1 用DevTools快速定位明星卡片的溢出按下F12打开开发者工具点左上角的箭头图标再点击页面里那张对不齐的明星卡片右侧Styles面板会显示当前所有CSS规则Computed标签页里有完整的盒子模型图。绿色是padding橙色是margin蓝色是content。如果卡片实际宽度比设计宽出20px先看这里是不是box-sizing: content-box导致padding被加到了width外面。另一个高频问题是水平滚动条把DevTools底部横向滚动条拖到最右看是哪个元素超宽直接在Console里执行document.querySelectorAll(*)批量查scrollWidth比较耗时间更快的做法是临时给所有元素加* { outline: 1px solid red; }超宽元素会立刻标出红框。找出问题后删掉这条临时样式不要留在作业里。5.2 用CSS变量统一明星主题配色期末作业最怕页面里同时出现五种以上的颜色。用CSS变量可以把配色收敛到一处后期换主题只改一行。在style.css顶部定义:root { --primary: #6c5ce7; --bg-light: #f8f9fa; --text-dark: #333333; } .site-header { background: var(--primary); } .nav a { color: var(--text-dark); } .nav a:hover { color: var(--primary); }:root是HTML根元素相当于写了一个全站作用域的变量表。var(--primary)在任意规则里读取变量值答辩时老师问“主题色怎么统一调整”当着老师面把--primary改成#e17055整个页面的头部、按钮、高亮文字一起变色这个演示效果比任何口头解释都有说服力。对比度也要提前检查浅色背景上不要用浅灰文字深色背景下正文用#f8f9fa不要用纯白#fff长时间看会刺眼。5.3 检查title、description和favicon浏览器标签页上显示的标题来自title但很多作业直到验收时title还叫“新建文本文档”。在head里补全三行东西SEO和体验都会改善title写明“XX明星 - HTML静态网页设计期末大作业”meta namedescription用一句话描述页面内容link relicon hreffavicon.ico设置标签页小图标。favicon图标可以用任意一张明星头像缩小成16x16像素命名必须全小写和href完全一致。把这三行放在meta charsetutf-8之后保存后在浏览器里按CtrlF5强制刷新看到标签页出现小图标就说明路径正确如果图标没出现优先检查favicon.ico是否真的在项目根目录、文件名大小写是否写反。本文还有配套的精品资源点击获取