敦煌莫高窟：用代码打开千年艺术的大门
------一个零基础也能看懂的神奇项目
前言：当古老艺术遇上现代代码
想象一下，你坐在电脑前，指尖轻轻一点，就能穿越到敦煌莫高窟------看飞天的衣袂飘飘、听千年的驼铃声声。这不是科幻电影，而是一个用 HTML、CSS、JavaScript 搭建的网页项目！
如果你觉得编程高深莫测，这篇文章会告诉你：代码就像搭积木，组合对了，就能创造世界。哪怕你是电脑小白，看完也能明白这个"数字敦煌"是如何诞生的！
一、项目初探：网页的"骨架"与"灵魂"
这个网站就像一座房子，由三部分组成：
-
HTML（骨架）：决定房子里有几个房间（页面）、放什么家具（文字/图片）。
- 比如导航栏的按钮、轮播图的照片，都是HTML"画"出来的。
-
CSS（装修设计）：给房子刷墙漆（颜色）、摆家具的位置（布局）。
- 导航栏的棕色背景、艺术卡片的悬停动画，都是CSS的魔法。
-
JavaScript（电力系统）：让电灯亮起来、让门自动开关。
- 轮播图自动滑动、点击弹窗的互动效果，全靠它驱动。
二、跟着鼠标去旅行：核心功能大揭秘
1. 导航栏：敦煌的"导游地图"
-
小白视角：每个页面顶部都有一排按钮，像旅游地图的指引牌。
-
代码秘密：
-
用
<nav>标签画出导航栏，按钮其实是<a>链接。 -
鼠标悬停时按钮变金色，只需一句CSS：
css
复制
nav a:hover { color: #FFD700; } /* 金色代码 */ -
有趣发现：所有页面的导航栏代码都一样------就像每个房间都挂着同一幅地图。
-
2. 轮播图：自动翻页的"壁画长卷"
-
小白视角：首页的三张巨幅图片会自己滑动切换，像电子相册。
-
代码秘密：
-
HTML ：把三张图装进一个"画框"（
<div class="slides">）。 -
JavaScript：每隔5秒偷偷移动画框的位置：
javascript
复制
setInterval(nextSlide, 5000); // 5000毫秒=5秒 -
彩蛋：点击左右箭头时，代码会像算盘一样计算该滑到第几张图。
-
3. 艺术鉴赏：会"讲故事"的壁画卡片
-
小白视角：点击九色鹿卡片，弹出一个详细介绍的窗口。
-
代码秘密：
-
弹窗原理 ：平时弹窗是隐藏的（
display: none），点击后改成显示。 -
动态内容：用JavaScript把文字"塞"进弹窗，就像往信封里装信：
javascript
复制
content.innerHTML = `<h2>${detail.title}</h2>`; // 插入标题 -
趣味互动：鼠标悬停时卡片会"跳起来"------只需一句CSS过渡动画！
-
4. 门票预订：自动算钱的"驼队账本"
-
小白视角：选择门票类型后，调整人数时总价会实时变化。
-
代码秘密：
-
监听器：JavaScript时刻盯着"数量"输入框，一有变化就重新计算。
javascript
复制
quantity.addEventListener('change', updateTotal); -
数学题：总价 = 单价 × 数量，和菜市场算账一模一样！
-
三、新手也能动手：项目的"乐高式"搭建
第一步：创建文件
-
新建一个文件夹（比如
敦煌网站）。 -
在里面创建：
-
index.html（首页） -
styles.css（样式文件） -
script.js（交互代码） -
images文件夹（存放壁画图片）
-
第二步：复制粘贴代码
-
把用户提供的代码分别粘贴到对应文件。
-
小白技巧：不需要理解每行代码，就像拼乐高时先按说明书组装。
第三步：启动"魔法服务器"
-
用VS Code打开项目文件夹。
-
安装 Live Server 插件（一键安装）。
-
点击右下角的 Go Live，浏览器会自动打开网站！
四、彩蛋与延展：你的敦煌可以更酷！
新手友好改造
-
换图大法 ：把
images里的壁画换成你喜欢的图片（尺寸保持一致）。 -
改颜色 ：在
styles.css里搜索#8B4513（导航栏的棕色），改成其他颜色代码。 -
改文字：用记事本打开HTML文件，修改标题和描述内容。
