手把手教你做一个非遗守艺人网站——Web课程作业完整实战

Ne0inhk

— 14 min read
手把手教你做一个非遗守艺人网站——Web课程作业完整实战
最近在做Web开发技术的课程作业，老师要求做一个完整的网站，包括主页和至少3个子页面。我选的主题是"我的家乡非遗守艺人"，今天就把整个制作过程记录下来，希望能帮到也在做作业的同学。

项目预览

先看看最终效果吧，这是我做出来的网站首页：

请添加图片描述


请添加图片描述

整个网站包含：

  • 首页（带轮播图和3D翻转卡片）
  • 守艺名录页面（可以分类筛选）
  • 传统工艺页面（时间轴展示）
  • 传承故事页面（文章列表）
  • 加入我们页面（表单收集信息）

技术栈：HTML5 + CSS3 + JavaScript + jQuery（纯前端，不需要后端）

第一步：搭建项目结构

最开始我也是一头雾水，不知道从哪里下手。后来想明白了，先搭好框架，后面慢慢填充内容就行。

创建文件夹

在电脑上新建一个文件夹，名字叫 html非遗守艺人模板1（你也可以用其他名字）。然后在这个文件夹里创建三个子文件夹：

html非遗守艺人模板1/ ├── css/ # 放样式文件 ├── js/ # 放JavaScript文件 └── img/ # 放图片

这样分类清楚，后面找文件也方便。

准备需要的页面

按照作业要求，需要至少1个主页+3个子页面。我准备做：

  • index.html - 首页（这个必须有，名字必须是index.html）
  • artisans.html - 守艺名录
  • crafts.html - 传统工艺
  • story.html - 传承故事
  • contact.html - 加入我们（包含表单）

这样就有5个页面了，绝对够用。先把这些空文件创建好，放在项目根目录下。

第二步：准备基础资源

下载jQuery

网站要用到轮播图功能，用jQuery会简单很多。去jQuery官网下载一个1.11.0版本（或者用CDN也行），下载好后放到 js/ 文件夹里，重命名为 jquery-1.11.0.js。

创建CSS重置文件

不同浏览器默认样式不一样，为了让网站显示一致，先写个重置样式。

在 css/ 文件夹下新建 reset.css，内容如下：

*{margin: 0;padding: 0;box-sizing: border-box;}html, body{font-family:"Microsoft YaHei", Arial, sans-serif;font-size: 14px;color: #333;line-height: 1.6;}ul, ol{list-style: none;}a{text-decoration: none;color: inherit;}img{max-width: 100%;height: auto;display: block;}

这个文件主要是清除浏览器默认样式，让所有浏览器显示效果一样。

准备图片素材

网上找一些非遗相关的图片，或者用占位图也行。我把图片都放在了 img/ 文件夹里，后面用到的时候会说明。

第三步：开始写首页HTML结构

打开 index.html，先写基础的HTML结构：

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>我的家乡非遗"守艺人" - 首页</title><linkhref="css/reset.css"rel="stylesheet"><linkhref="css/main.css"rel="stylesheet"><linkhref="css/index.css"rel="stylesheet"><scriptsrc="js/jquery-1.11.0.js"></script><scriptsrc="js/main.js"></script></head><body><!-- 页面内容 --></body></html>

这里引入了三个CSS文件：

  • reset.css - 重置样式
  • main.css - 公共样式（头部、页脚等）
  • index.css - 首页专用样式

还有两个JS文件，后面再写。

写头部导航

我设计的头部是深棕色的，比较符合传统文化的调调。在body里添加：

<headerclass="header"><divclass="container"><divclass="logo"><h1>非遗守艺人</h1><p>Heritage Craftsman</p></div><navclass="nav"><ul><li><ahref="index.html"class="active">首页</a></li><li><ahref="artisans.html">守艺名录</a></li><li><ahref="crafts.html">传统工艺</a></li><li><ahref="story.html">传承故事</a></li><li><ahref="contact.html">加入我们</a></li></ul></nav></div></header>

注意每个子页面都要有链接，这样老师检查的时候才能从主页跳转到其他页面。

第四步：实现轮播图

轮播图是首页的重点，我用了三张非遗相关的图片。

HTML结构：

<sectionclass="banner"><divclass="banner-slider"><divclass="slide active"style="background-image:url('img/p9.jpg');"></div><divclass="slide"style="background-image:url('img/p10.webp');"></div><divclass="slide"style="background-image:url('img/p11.jpg');"></div></div><divclass="banner-content"><h2>传承千年技艺</h2><p>记录那些即将消失的传统手工艺</p></div><divclass="banner-dots"><spanclass="dot active"></span><spanclass="dot"></span><spanclass="dot"></span></div><divclass="banner-arrows"><spanclass="arrow prev">‹</span><spanclass="arrow next">›</span></div></section>

这里用了背景图，图片路径要写对。三个slide分别对应三张图片，第一张默认加上 active 类。

CSS样式（写在 css/main.css 里）：

.banner{position: relative;height: 500px;overflow: hidden;}.banner-slider{position: relative;width: 100%;height: 100%;}.slide{position: absolute;width: 100%;height: 100%;opacity: 0;transition: opacity 1s ease-in-out;background-size: cover;background-position: center;}.slide.active{opacity: 1;}

关键点：

  • 所有slide绝对定位，重叠在一起
  • 用opacity控制显示隐藏
  • transition让切换有动画效果

JavaScript功能（写在 js/main.js 里）：

$(document).ready(function(){var currentSlide =0;var slides =$('.slide');var dots =$('.dot');var totalSlides = slides.length;// 自动轮播var timer =setInterval(function(){nextSlide();},4000);functionnextSlide(){ slides.eq(currentSlide).removeClass('active'); dots.eq(currentSlide).removeClass('active'); currentSlide =(currentSlide +1)% totalSlides; slides.eq(currentSlide).addClass('active'); dots.eq(currentSlide).addClass('active');}// 点击箭头切换$('.arrow.next').click(function(){nextSlide();});$('.arrow.prev').click(function(){prevSlide();});});

逻辑很简单：每4秒自动切换到下一张，点击箭头手动切换。这里用到了jQuery，代码简洁很多。

第五步：制作3D翻转卡片

这个效果我挺喜欢的，鼠标放上去卡片会翻转，显示详细信息。

HTML结构：

<sectionclass="artisans-section"><divclass="container"><h2class="section-title">守艺名录</h2><divclass="artisans-grid"><divclass="artisan-card"><divclass="card-inner"><divclass="card-front"style="background-image:url('img/i1 (1).png');"><divclass="card-number">01</div><h3>泥塑大师</h3><p>张师傅</p></div><divclass="card-back"><h4>张师傅</h4><p>从事泥塑工艺40余年，擅长人物雕塑，作品栩栩如生。</p><ahref="artisan-detail.html"class="btn-more">了解更多</a></div></div></div><!-- 其他卡片类似 --></div></div></section>

关键是CSS的3D效果：

.artisan-card{perspective: 1000px;/* 3D视角 */height: 300px;}.card-inner{position: relative;width: 100%;height: 100%;transition: transform 0.6s;transform-style: preserve-3d;/* 保持3D效果 */}.artisan-card:hover .card-inner{transform:rotateY(180deg);/* 翻转180度 */}.card-front, .card-back{position: absolute;width: 100%;height: 100%;backface-visibility: hidden;/* 背面不可见 */}.card-back{transform:rotateY(180deg);/* 背面默认翻转 */}

原理：

  • perspective 设置3D视角
  • transform-style: preserve-3d 保持3D空间
  • 鼠标悬停时，卡片旋转180度
  • backface-visibility: hidden 隐藏背面，翻转时只显示正面

这个效果我第一次写也搞了半天，多试几次就明白了。

第六步：时间轴展示传统工艺

传统工艺页面用了时间轴布局，看起来更有历史感。

HTML：

<divclass="crafts-timeline"><divclass="timeline-item"><divclass="timeline-marker"></div><divclass="timeline-content"><divclass="timeline-image"style="background-image:url('img/i1 (1).jpg');"></div><h3>泥塑工艺</h3><p>泥塑是中国民间传统的一种古老常见的民间艺术...</p></div></div><!-- 其他时间轴项目 --></div>

CSS：

.crafts-timeline{position: relative;padding-left: 50px;}.crafts-timeline:before{content:'';position: absolute;left: 20px;top: 0;bottom: 0;width: 3px;background:linear-gradient(to bottom, #8B4513, #D2691E);}.timeline-marker{position: absolute;left: -38px;width: 20px;height: 20px;border-radius: 50%;background-color: #8B4513;}

用伪元素 :before 画了一条竖线，每个时间节点用圆点标记。这样看起来就是一条时间轴了。

第七步：实现表单页面

作业要求必须有表单页面，我做了个"加入我们"的表单。

HTML：

<formid="contactForm"class="contact-form"><divclass="form-group"><labelfor="name">姓名 <spanclass="required">*</span></label><inputtype="text"id="name"name="name"required></div><divclass="form-group"><labelfor="phone">联系电话 <spanclass="required">*</span></label><inputtype="tel"id="phone"name="phone"required></div><divclass="form-group"><labelfor="craft">所属工艺类别 <spanclass="required">*</span></label><selectid="craft"name="craft"required><optionvalue="">请选择工艺类别</option><optionvalue="sculpture">雕塑类</option><optionvalue="paper">纸艺类</option><optionvalue="wood">木艺类</option><optionvalue="embroidery">刺绣类</option></select></div><divclass="form-group"><labelfor="message">留言内容 <spanclass="required">*</span></label><textareaid="message"name="message"rows="5"required></textarea></div><divclass="form-group"><buttontype="submit"class="submit-btn">提交申请</button></div></form>

表单验证（JavaScript）：

$('#contactForm').submit(function(e){ e.preventDefault();var name =$('#name').val().trim();var phone =$('#phone').val().trim();if(!name){alert('请输入您的姓名');returnfalse;}// 手机号验证var phoneReg =/^1[3-9]\d{9}$/;if(!phoneReg.test(phone)){alert('请输入正确的手机号码');returnfalse;}alert('感谢您的申请！我们会在3个工作日内与您联系。');this.reset();returnfalse;});

这里用了正则表达式验证手机号。因为是静态页面，提交后只是弹出提示，没有真正发送数据（作业要求应该不需要后端）。

第八步：统一样式和配色

为了所有页面风格统一，我定了主色调：

  • 主色：#8B4513（深棕色）
  • 辅色：#A0522D（中棕色）
  • 强调色：#CD853F（浅棕色）

所有页面都用这套配色，看起来就协调了。

头部和页脚的样式写在 main.css 里，这样每个页面引用这个文件就能统一风格。

.header{background:linear-gradient(135deg, #8B4513 0%, #A0522D 100%);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);position: sticky;top: 0;z-index: 1000;}.footer{background:linear-gradient(135deg, #654321 0%, #8B4513 100%);color: #FFF;padding: 60px 0 30px;margin-top: 100px;}

position: sticky 让头部滚动时固定在顶部，这个技巧很实用。

第九步：完善其他页面

首页做好了，其他页面就简单了，基本结构都差不多。

守艺名录页面

这个页面用了分类筛选功能：

$('.tab-btn').click(function(){$('.tab-btn').removeClass('active');$(this).addClass('active');var category =$(this).data('category');if(category ==='all'){$('.artisan-item').fadeIn();}else{$('.artisan-item').each(function(){if($(this).data('category')=== category){$(this).fadeIn();}else{$(this).fadeOut();}});}});

点击不同分类，对应的守艺人卡片显示或隐藏。用 fadeIn() 和 fadeOut() 有点淡入淡出效果，看起来更流畅。

传统工艺页面

用了左右交替布局：

.craft-item:nth-child(even){flex-direction: row-reverse;}

nth-child(even) 选择偶数项，让布局不单调。

第十步：响应式设计

现在用手机的人多了，网站也要能在手机上正常显示。

主要用媒体查询：

@media(max-width: 768px){.artisans-grid{grid-template-columns:repeat(2, 1fr);/* 手机显示2列 */}.banner-content h2{font-size: 32px;/* 字体缩小 */}}

768px以下（手机）时，布局会自动调整。

踩坑总结

做这个项目的时候遇到了几个问题，记录一下：

  1. 图片路径问题：一开始用绝对路径，后来改成相对路径才正常。HTML文件和图片的相对位置要算清楚。
  2. 3D翻转效果：第一次写没加 backface-visibility: hidden，翻转时会出现两个面重叠，加上就好了。
  3. jQuery未加载：轮播图不工作，检查发现jQuery文件路径错了。记得检查控制台报错。
  4. CSS优先级：有时候样式不生效，可能是优先级问题，用 !important 临时解决（不推荐，最好优化选择器）。

项目完成检查清单

提交前检查一下：

  • 文件夹命名：学号+姓名（按老师要求）
  • 主页文件名必须是 index.html
  • 至少包含3个子页面
  • 有表单页面
  • 所有页面可以互相跳转
  • 包含文字、图片、列表、超链接等元素
  • 图片路径正确，能正常显示
  • JavaScript功能正常（轮播图、表单验证等）
  • 在多个浏览器测试过（Chrome、Firefox、Edge）

项目文件结构

最后看看完整的项目结构：

html非遗守艺人模板1/ ├── index.html # 首页 ├── artisans.html # 守艺名录 ├── crafts.html # 传统工艺 ├── story.html # 传承故事 ├── contact.html # 加入我们 ├── artisan-detail.html # 详情页 ├── css/ │ ├── reset.css # 重置样式 │ ├── main.css # 主样式 │ ├── index.css # 首页样式 │ ├── artisans.css # 守艺名录样式 │ ├── crafts.css # 传统工艺样式 │ ├── story.css # 传承故事样式 │ ├── contact.css # 表单样式 │ └── artisan-detail.css # 详情页样式 ├── js/ │ ├── jquery-1.11.0.js # jQuery库 │ └── main.js # 项目脚本 └── img/ # 图片资源 ├── p9.jpg ├── p10.webp ├── p11.jpg └── ...（其他图片）

写在最后

这个项目做了大概一个星期，从最开始的懵懵懂懂，到后来慢慢理解CSS布局和JavaScript交互，感觉收获挺大的。

虽然只是课程作业，但每一步都认真做了，包括配色、布局、交互效果。最后看到成品的时候还是有点成就感的。

需要注意的：

  • 代码要自己理解，不能直接复制粘贴
  • 可以借鉴别人的思路，但要有自己的创意
  • 多做注释，方便以后看代码

希望这篇文章能帮到也在做Web作业的同学。如果有问题，欢迎评论区交流。

完整项目源码：项目已上线，可以直接访问 代码小库 获取完整源码。

如果觉得有用，点个赞支持一下~

#Web开发 #前端 #HTML #CSS #JavaScript #课程作业

请添加图片描述


请添加图片描述


请添加图片描述


请添加图片描述

Read more

Windows 环境下 Clawdbot Gateway 持久化运行避坑指南

Windows 环境下 Clawdbot Gateway 持久化运行避坑指南 环境：Windows 11 + Node.js 24.9.0 + Clawdbot 2026.1.24-3 目标：实现 Clawdbot Gateway 开机自启、后台持久运行 核心结论：绕过 .cmd 包装器，直接启动 JS 入口 + 启动文件夹脚本 = 100% 可靠方案 📌 问题背景 在 Windows 环境开发 Clawdbot 时，遇到以下连锁问题： 问题表现根本原因Gateway 服务安装失败schtasks create failed: 拒绝访问需管理员权限创建系统服务PM2 启动 .cmd 失败SyntaxError: Invalid or

By Ne0inhk
白话 HBM 第一季 第一篇：3D 堆叠架构 TSV 与 Microbumps 互连

白话 HBM 第一季 第一篇：3D 堆叠架构 TSV 与 Microbumps 互连

前言： 为什么内存颗粒越来越贵？ 最近两件科技热门大事：一个是 AI 大模型的疯狂爆发，另一个就是随之而来内存颗粒价格的史诗级暴涨。 如果你关注过 NVIDIA 的 H100 或 B200 这些“算力怪兽”GPU，你会发现它们抢手的核心原因，除了那颗强大的 GPU 核心，更在于旁边那几颗不起眼的黑色方块——HBM (High Bandwidth Memory)。它现在已经成了AI 芯片的“硬通货”，不仅产能被抢空(三天一失火，五天一地震)，价格更是水涨船高。 那么，到底什么是 HBM？它作为内存，和我们在电脑里插的 DDR、手机里用的 LPDDR 到底有什么区别？ 说白了，它们都是存储数据的“仓库” (DRAM)，核心的基本单元都是电容和晶体管，都要不停地刷新（Refresh）来保住数据。但它们的“

By Ne0inhk
SpringBoot + Vue 前后端分离项目实战：权限 + 工作流 + 报表

SpringBoot + Vue 前后端分离项目实战：权限 + 工作流 + 报表

✨道路是曲折的，前途是光明的！ 📝 专注C/C++、Linux编程与人工智能领域，分享学习笔记！ 🌟 感谢各位小伙伴的长期陪伴与支持，欢迎文末添加好友一起交流！ 📚 目录 * 前言 * 一、项目背景与技术选型 * 二、系统架构设计 * 三、权限管理模块 * 四、工作流引擎集成 * 五、报表系统实现 * 六、核心代码实现 * 七、部署与运维 * 八、总结 前言 前后端分离架构已成为企业级应用开发的主流选择。本文将通过一个完整的企业管理系统实战项目，详细介绍如何使用 SpringBoot + Vue 技术栈，实现权限管理、工作流引擎和报表系统三大核心功能。 项目特色 * 前后端分离：RESTful API 设计，便于扩展和维护 * RBAC权限模型：细粒度的权限控制体系 * Flowable工作流：可视化流程设计与执行 * 动态报表：灵活配置的数据可视化方案 一、项目背景与技术选型 1.

By Ne0inhk
【MySQL飞升篇】分库分表避坑指南：垂直分库vs水平分表，分片键选对才不踩雷

【MySQL飞升篇】分库分表避坑指南：垂直分库vs水平分表，分片键选对才不踩雷

🍃 予枫：个人主页 📚 个人专栏: 《Java 从入门到起飞》《读研码农的干货日常》 💻 Debug 这个世界，Return 更好的自己！ 引言 当业务数据量突破千万、亿级门槛，单库单表的性能瓶颈会如期而至——查询卡顿、写入超时、扩容困难，每一个问题都足以让后端开发者头大。分库分表（Sharding）作为核心解决方案，却常常让人陷入纠结：垂直分库和水平分表该怎么选？分片键选错会有什么后果？分表后分布式ID、跨库分页、跨库JOIN这些难题又该如何破解？本文从核心概念到实战难题，带你吃透分库分表全流程策略。 文章目录 * 引言 * 一、分库分表核心认知：为什么必须做？ * 1.1 单库单表的性能瓶颈根源 * 1.2 分库分表的两大核心方向 * 二、核心拆分策略：垂直分库 vs 水平分表实战 * 2.1 垂直分库：按业务“瘦身”

By Ne0inhk