HTML / CSS大前端
基于 HTML/CSS/JS 的非遗守艺人网站开发实战
基于 HTML5、CSS3、JavaScript 及 jQuery 构建静态网站的实战教程。内容涵盖项目结构搭建、基础资源准备、首页轮播图与 3D 翻转卡片实现、传统工艺时间轴布局、表单验证逻辑以及响应式设计适配。通过具体代码示例演示了如何完成从页面结构到交互功能的完整开发流程，包含导航栏、图片展示、分类筛选等功能模块，适合前端初学者参考学习。
基于 HTML5、CSS3、JavaScript 及 jQuery 构建静态网站的实战教程。内容涵盖项目结构搭建、基础资源准备、首页轮播图与 3D 翻转卡片实现、传统工艺时间轴布局、表单验证逻辑以及响应式设计适配。通过具体代码示例演示了如何完成从页面结构到交互功能的完整开发流程，包含导航栏、图片展示、分类筛选等功能模块，适合前端初学者参考学习。
本教程介绍使用 HTML5、CSS3、JavaScript 及 jQuery 开发一个非遗守艺人主题网站的完整过程。内容涵盖项目结构搭建、基础资源准备、首页轮播图与 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 - 加入我们（包含表单）先把这些空文件创建好，放在项目根目录下。
网站要用到轮播图功能，用 jQuery 会简单很多。去 jQuery 官网下载一个 1.11.0 版本（或者用 CDN 也行），下载好后放到 js/ 文件夹里，重命名为 jquery-1.11.0.js。
不同浏览器默认样式不一样，为了让网站显示一致，先写个重置样式。
在 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/ 文件夹里，后面用到的时候会说明。
打开 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">传承故事</>
加入我们
注意每个子页面都要有链接，这样从主页跳转到其他页面。
轮播图是首页的重点，用了三张非遗相关的图片。
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>
‹
›
这里用了背景图，图片路径要写对。三个 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;
}
关键点：
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，代码简洁很多。
这个效果挺喜欢的，鼠标放上去卡片会翻转，显示详细信息。
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" =>了解更多
关键是 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 空间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">
< =>所属工艺类别 *
请选择工艺类别
雕塑类
纸艺类
木艺类
刺绣类
留言内容 *
提交申请
表单验证（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;
});
这里用了正则表达式验证手机号。因为是静态页面，提交后只是弹出提示，没有真正发送数据。
为了所有页面风格统一，定了主色调：
所有页面都用这套配色，看起来就协调了。
头部和页脚的样式写在 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 以下（手机）时，布局会自动调整。
做这个项目的时候遇到了几个问题，记录一下：
backface-visibility: hidden，翻转时会出现两个面重叠，加上就好了。!important 临时解决（不推荐，最好优化选择器）。提交前检查一下：
index.html最后看看完整的项目结构：
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 开发的同学。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online