最近在做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结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的家乡非遗"守艺人" – 首页</title>
<link href="css/reset.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<script src="js/jquery-1.11.0.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<!– 页面内容 –>
</body>
</html>
这里引入了三个CSS文件：
- reset.css – 重置样式
- main.css – 公共样式（头部、页脚等）
- index.css – 首页专用样式
还有两个JS文件，后面再写。
写头部导航
我设计的头部是深棕色的，比较符合传统文化的调调。在body里添加：
<header class="header">
<div class="container">
<div class="logo">
<h1>非遗守艺人</h1>
<p>Heritage Craftsman</p>
</div>
<nav class="nav">
<ul>
<li><a href="index.html" class="active">首页</a></li>
<li><a href="artisans.html">守艺名录</a></li>
<li><a href="crafts.html">传统工艺</a></li>
<li><a href="story.html">传承故事</a></li>
<li><a href="contact.html">加入我们</a></li>
</ul>
</nav>
</div>
</header>
注意每个子页面都要有链接，这样老师检查的时候才能从主页跳转到其他页面。
第四步：实现轮播图
轮播图是首页的重点，我用了三张非遗相关的图片。
HTML结构：
<section class="banner">
<div class="banner-slider">
<div class="slide active" style="background-image: url('img/p9.jpg');"></div>
<div class="slide" style="background-image: url('img/p10.webp');"></div>
<div class="slide" style="background-image: url('img/p11.jpg');"></div>
</div>
<div class="banner-content">
<h2>传承千年技艺</h2>
<p>记录那些即将消失的传统手工艺</p>
</div>
<div class="banner-dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="banner-arrows">
<span class="arrow prev">‹</span>
<span class="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);
function nextSlide() {
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结构：
<section class="artisans-section">
<div class="container">
<h2 class="section-title">守艺名录</h2>
<div class="artisans-grid">
<div class="artisan-card">
<div class="card-inner">
<div class="card-front" style="background-image: url('img/i1 (1).png');">
<div class="card-number">01</div>
<h3>泥塑大师</h3>
<p>张师傅</p>
</div>
<div class="card-back">
<h4>张师傅</h4>
<p>从事泥塑工艺40余年，擅长人物雕塑，作品栩栩如生。</p>
<a href="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：
<div class="crafts-timeline">
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-content">
<div class="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：
<form id="contactForm" class="contact-form">
<div class="form-group">
<label for="name">姓名 <span class="required">*</span></label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="phone">联系电话 <span class="required">*</span></label>
<input type="tel" id="phone" name="phone" required>
</div>
<div class="form-group">
<label for="craft">所属工艺类别 <span class="required">*</span></label>
<select id="craft" name="craft" required>
<option value="">请选择工艺类别</option>
<option value="sculpture">雕塑类</option>
<option value="paper">纸艺类</option>
<option value="wood">木艺类</option>
<option value="embroidery">刺绣类</option>
</select>
</div>
<div class="form-group">
<label for="message">留言内容 <span class="required">*</span></label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<div class="form-group">
<button type="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('请输入您的姓名');
return false;
}
// 手机号验证
var phoneReg = /^1[3-9]\\d{9}$/;
if (!phoneReg.test(phone)) {
alert('请输入正确的手机号码');
return false;
}
alert('感谢您的申请！我们会在3个工作日内与您联系。');
this.reset();
return false;
});
这里用了正则表达式验证手机号。因为是静态页面，提交后只是弹出提示，没有真正发送数据（作业要求应该不需要后端）。
第八步：统一样式和配色
为了所有页面风格统一，我定了主色调：
- 主色：#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以下（手机）时，布局会自动调整。
踩坑总结
做这个项目的时候遇到了几个问题，记录一下：
图片路径问题：一开始用绝对路径，后来改成相对路径才正常。HTML文件和图片的相对位置要算清楚。
3D翻转效果：第一次写没加 backface-visibility: hidden，翻转时会出现两个面重叠，加上就好了。
jQuery未加载：轮播图不工作，检查发现jQuery文件路径错了。记得检查控制台报错。
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 #课程作业
