Web-Dev-For-Beginners 之 Terrarium 项目HTML、CSS 与 DOM 拖放交互实战及 Azure Static Web Apps 部署指南【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本项目是 Web-Dev-For-Beginners 课程第三单元「3-terrarium」的完整解决方案用纯 HTML、CSS 与原生 JavaScript 构建了一个可交互的「虚拟植物玻璃罐」界面14 株植物分列两侧可被自由拖拽放入玻璃罐中任意位置。本指南以解决方案文档translations/de/3-terrarium/solution/README.md为主线结合仓库内的 index.html、style.css、script.js 源码讲解项目结构、三个核心技术环节HTML 语义结构、CSS 玻璃罐绘制、基于闭包的 Pointer Events 拖放实现并完整还原将项目部署到 Azure Static Web Apps 的步骤读完即可亲手运行、改造并发布自己的 Terrarium。项目概览一个代码冥想式的小型全栈练习从解决方案文档可知这个项目被作者定义为 a small drag and drop code-meditation——一个短小精悍、可用于冥想式练习的拖放项目只需要少量 HTML、JavaScript 和 CSS就能完成「构建网页界面 → 美化样式 → 添加交互」的完整闭环。它之所以适合入门是因为没有任何构建工具、框架或后端依赖三个静态文件加一个图片目录即可运行文件作用核心知识点index.html页面结构与内容语义化标签、容器布局、图片引入style.css全部视觉样式绝对定位、CSS 绘制玻璃罐、响应式导航script.js拖放交互逻辑DOM 操作、Pointer Events、JavaScript 闭包其中植物插画由作者 Jen Looper 使用 Procreate 手绘玻璃罐外观则参考了 Jakub Mandra 的 CSS 玻璃罐作品——这正好呼应了课程的三个子章节1-intro-to-html、2-intro-to-css、3-intro-to-DOM-and-closures。解决方案文档同时注明本翻译版由 AI 翻译服务生成若需权威内容应以英文原版3-terrarium/solution/README.md为准。从源码看三大部分的实现细节1. HTML语义化结构是交互的地基打开 index.html 可以看到页面遵循 HTML5 标准文档结构head中声明utf-8字符集、viewport移动端适配并通过link relstylesheet href./style.css /与script src./script.js defer/script分别引入样式与脚本——其中defer属性确保脚本在 DOM 解析完成后才执行避免getElementById找不到元素。页面主体包含三个区块导航栏navHome、Plants、Care Tips、About、Contact 五个链接均搭配 Font Awesome 图标植物陈列区#left-container与#right-container各容纳 7 个plant-holder容器每个容器内是一张带唯一idplant1plant14的植物图片plantN.png玻璃罐区#terrarium由jar-top、jar-walls内含jar-glossy-long/jar-glossy-short两个高光元素、dirt、jar-bottom组成。关键设计在于每株植物都拥有全局唯一 ID这是后续 JavaScript 通过document.getElementById(plant1)精准绑定拖放行为的必要前提同一页面上 ID 不可重复。2. CSS用绝对定位与半透明形状画出玻璃罐style.css 展现了「不用一张图片、纯 CSS 绘制容器」的技巧.container采用position: absolute固定左右侧栏宽度 15%背景#eee.plant图片position: absolute且max-width/height: 150%、z-index: 2确保植物浮在罐子之上玻璃罐由四个元素拼合jar-walls高 80%、宽 60%、border-radius: 1rem、背景#d1e1df、opacity: 0.5、jar-top、jar-bottom以及dirt泥土层#3a241d、z-index: -1置于罐后jar-glossy-long/jar-glossy-short两根白色圆角细条#ddfbff模拟玻璃反光让罐子更真实后半部分还补充了导航栏渐变背景、hover/focus 态、页脚样式以及media (max-width: 700px)下导航栏纵向堆叠的响应式适配。这一节对应课程2-intro-to-css中「层叠cascade、选择器优先级、盒模型与定位」的知识点正是position: absolutez-indexopacity的组合让平面 div 变成了半透明玻璃罐。3. JavaScript闭包 Pointer Events 实现多对象独立拖放script.js 是整个交互的核心只有 64 行却演示了两个重要概念1通过闭包为每株植物维护私有状态。文件顶部先对 14 个植物元素逐一调用dragElement(document.getElementById(plantN))。而dragElement函数内部声明了pos1~pos4四个局部变量并定义了pointerDrag、elementDrag、stopElementDrag三个内部函数。由于闭包特性每次调用dragElement都会创建一份独立的pos变量副本——这 14 株植物因此各自记得自己的坐标互不干扰这正是「每株植物拥有独立数据记录」的实现机制。2Pointer Events 统一鼠标与触屏。事件流完整覆盖了拖放生命周期function pointerDrag(e) { e.preventDefault(); // 阻止文本选中等默认行为 pos3 e.clientX; pos4 e.clientY; // 记录按下点坐标 document.onpointermove elementDrag; // 挂载移动监听挂在 document 上 document.onpointerup stopElementDrag; } function elementDrag(e) { pos1 pos3 - e.clientX; // 本次水平位移 pos2 pos4 - e.clientY; // 本次垂直位移 pos3 e.clientX; pos4 e.clientY; // 更新基准点 terrariumElement.style.top (terrariumElement.offsetTop - pos2) px; terrariumElement.style.left (terrariumElement.offsetLeft - pos1) px; } function stopElementDrag() { document.onpointerup null; // 清理监听防止内存泄漏 document.onpointermove null; }这里的两个工程细节值得注意一是onpointermove/onpointerup挂载在document上而非植物元素上这样指针移出植物甚至移出窗口时拖拽仍不中断二是拖放结束后将两个监听置空避免事件监听器累积导致性能问题。源码注释也标明此方案借鉴了 w3schools 的可拖拽 HTML 元素示例适合作为进一步学习的参考起点。本地运行与体验项目无任何构建步骤运行方式极其简单二选一即可直接双击打开3-terrarium/solution/index.html浏览器会以file://协议渲染页面起一个本地静态服务器推荐便于后续模拟真实部署环境cd 3-terrarium/solution python3 -m http.server 8000 # 浏览器访问 http://localhost:8000验证交互时按住任意植物拖动观察其跟随指针移动松开后停留在新位置用鼠标或触屏均可操作这正是 Pointer Events 带来的跨设备一致性。从源码结构看代码没有预设放置区限制用户可以把植物摆到页面上任意位置——这是有意的设计赋予用户完全的创作自由。部署到 Azure Static Web Apps解决方案文档给出了将 Terrarium 发布到公网的官方途径Azure Static Web Apps。这是一项专为静态站点设计的托管服务天然适合本项目这种无 API、纯前端的应用。完整步骤如下Fork 本仓库到自己的 GitHub 账号下需要先把代码放到自己的 GitHub 仓库中创建 Azure Static Web App进入 Azure 门户创建 Static Web App 资源原文档中提供了 Deploy to Azure 一键部署按钮可直接跳转到创建向导走完创建向导关键配置为App root应用根目录设置为/solution或设置为你的代码根目录——Terrarium 的全部静态资源都位于该目录下设置错误将导致发布后无法加载页面API 可跳过本项目没有任何后端 API向导中无需配置向导完成后Azure 会在你的 fork 仓库中自动创建一个.github工作流目录其中包含 Azure Static Web Apps 的构建/发布配置后续每次推送到对应分支CI 都会自动重新构建并部署到新生成的 URL。部署完成后Azure 会分配一个形如https://app-name.azurestaticapps.net的公网地址你的 Terrarium 即可分享给任何人访问。延伸练习建议结合课程3-intro-to-DOM-and-closures的课后任务完成基础拖放后可以尝试以下扩展进一步巩固 DOM 与状态管理能力双击置顶通过修改z-index让双击的植物浮到最上层拖拽边界限制植物不能移出玻璃罐区域#terrarium的边界判定位置持久化用localStorage保存每株植物的坐标刷新后还原布局重置功能页面加载时记录初始位置提供按钮配合 CSS 过渡动画让植物平滑回到侧栏hover 反馈指针悬停时给植物添加微弱发光效果提升交互质感。小结从translations/de/3-terrarium/solution/README.md这份解决方案文档出发结合仓库源码可以看到Terrarium 用最少的工具链串起了 Web 开发入门最核心的三块拼图——HTML 语义结构、CSS 视觉呈现、基于闭包与 Pointer Events 的 DOM 交互而 Azure Static Web Apps 的部署流程则补全了开发 → 发布的最后一环。这套源码同时是3-terrarium三个子章节1-intro-to-html、2-intro-to-css、3-intro-to-DOM-and-closures的标准答案适合边读课程边对照验证。更详细的拖放原理讲解可继续阅读 3-intro-to-DOM-and-closures/README.md玻璃罐 CSS 的视觉参考可查看 2-intro-to-css/README.md。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Web-Dev-For-Beginners 之 Terrarium 项目HTML、CSS 与 DOM 拖放交互实战及 Azure Static Web Apps 部署指南【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners本项目是 Web-Dev-For-Beginners 课程第三单元「3-terrarium」的完整解决方案用纯 HTML、CSS 与原生 JavaScript 构建了一个可交互的「虚拟植物玻璃罐」界面14 株植物分列两侧可被自由拖拽放入玻璃罐中任意位置。本指南以解决方案文档translations/de/3-terrarium/solution/README.md为主线结合仓库内的 index.html、style.css、script.js 源码讲解项目结构、三个核心技术环节HTML 语义结构、CSS 玻璃罐绘制、基于闭包的 Pointer Events 拖放实现并完整还原将项目部署到 Azure Static Web Apps 的步骤读完即可亲手运行、改造并发布自己的 Terrarium。项目概览一个代码冥想式的小型全栈练习从解决方案文档可知这个项目被作者定义为 a small drag and drop code-meditation——一个短小精悍、可用于冥想式练习的拖放项目只需要少量 HTML、JavaScript 和 CSS就能完成「构建网页界面 → 美化样式 → 添加交互」的完整闭环。它之所以适合入门是因为没有任何构建工具、框架或后端依赖三个静态文件加一个图片目录即可运行文件作用核心知识点index.html页面结构与内容语义化标签、容器布局、图片引入style.css全部视觉样式绝对定位、CSS 绘制玻璃罐、响应式导航script.js拖放交互逻辑DOM 操作、Pointer Events、JavaScript 闭包其中植物插画由作者 Jen Looper 使用 Procreate 手绘玻璃罐外观则参考了 Jakub Mandra 的 CSS 玻璃罐作品——这正好呼应了课程的三个子章节1-intro-to-html、2-intro-to-css、3-intro-to-DOM-and-closures。解决方案文档同时注明本翻译版由 AI 翻译服务生成若需权威内容应以英文原版3-terrarium/solution/README.md为准。从源码看三大部分的实现细节1. HTML语义化结构是交互的地基打开 index.html 可以看到页面遵循 HTML5 标准文档结构head中声明utf-8字符集、viewport移动端适配并通过link relstylesheet href./style.css /与script src./script.js defer/script分别引入样式与脚本——其中defer属性确保脚本在 DOM 解析完成后才执行避免getElementById找不到元素。页面主体包含三个区块导航栏navHome、Plants、Care Tips、About、Contact 五个链接均搭配 Font Awesome 图标植物陈列区#left-container与#right-container各容纳 7 个plant-holder容器每个容器内是一张带唯一idplant1plant14的植物图片plantN.png玻璃罐区#terrarium由jar-top、jar-walls内含jar-glossy-long/jar-glossy-short两个高光元素、dirt、jar-bottom组成。关键设计在于每株植物都拥有全局唯一 ID这是后续 JavaScript 通过document.getElementById(plant1)精准绑定拖放行为的必要前提同一页面上 ID 不可重复。2. CSS用绝对定位与半透明形状画出玻璃罐style.css 展现了「不用一张图片、纯 CSS 绘制容器」的技巧.container采用position: absolute固定左右侧栏宽度 15%背景#eee.plant图片position: absolute且max-width/height: 150%、z-index: 2确保植物浮在罐子之上玻璃罐由四个元素拼合jar-walls高 80%、宽 60%、border-radius: 1rem、背景#d1e1df、opacity: 0.5、jar-top、jar-bottom以及dirt泥土层#3a241d、z-index: -1置于罐后jar-glossy-long/jar-glossy-short两根白色圆角细条#ddfbff模拟玻璃反光让罐子更真实后半部分还补充了导航栏渐变背景、hover/focus 态、页脚样式以及media (max-width: 700px)下导航栏纵向堆叠的响应式适配。这一节对应课程2-intro-to-css中「层叠cascade、选择器优先级、盒模型与定位」的知识点正是position: absolutez-indexopacity的组合让平面 div 变成了半透明玻璃罐。3. JavaScript闭包 Pointer Events 实现多对象独立拖放script.js 是整个交互的核心只有 64 行却演示了两个重要概念1通过闭包为每株植物维护私有状态。文件顶部先对 14 个植物元素逐一调用dragElement(document.getElementById(plantN))。而dragElement函数内部声明了pos1~pos4四个局部变量并定义了pointerDrag、elementDrag、stopElementDrag三个内部函数。由于闭包特性每次调用dragElement都会创建一份独立的pos变量副本——这 14 株植物因此各自记得自己的坐标互不干扰这正是「每株植物拥有独立数据记录」的实现机制。2Pointer Events 统一鼠标与触屏。事件流完整覆盖了拖放生命周期function pointerDrag(e) { e.preventDefault(); // 阻止文本选中等默认行为 pos3 e.clientX; pos4 e.clientY; // 记录按下点坐标 document.onpointermove elementDrag; // 挂载移动监听挂在 document 上 document.onpointerup stopElementDrag; } function elementDrag(e) { pos1 pos3 - e.clientX; // 本次水平位移 pos2 pos4 - e.clientY; // 本次垂直位移 pos3 e.clientX; pos4 e.clientY; // 更新基准点 terrariumElement.style.top (terrariumElement.offsetTop - pos2) px; terrariumElement.style.left (terrariumElement.offsetLeft - pos1) px; } function stopElementDrag() { document.onpointerup null; // 清理监听防止内存泄漏 document.onpointermove null; }这里的两个工程细节值得注意一是onpointermove/onpointerup挂载在document上而非植物元素上这样指针移出植物甚至移出窗口时拖拽仍不中断二是拖放结束后将两个监听置空避免事件监听器累积导致性能问题。源码注释也标明此方案借鉴了 w3schools 的可拖拽 HTML 元素示例适合作为进一步学习的参考起点。本地运行与体验项目无任何构建步骤运行方式极其简单二选一即可直接双击打开3-terrarium/solution/index.html浏览器会以file://协议渲染页面起一个本地静态服务器推荐便于后续模拟真实部署环境cd 3-terrarium/solution python3 -m http.server 8000 # 浏览器访问 http://localhost:8000验证交互时按住任意植物拖动观察其跟随指针移动松开后停留在新位置用鼠标或触屏均可操作这正是 Pointer Events 带来的跨设备一致性。从源码结构看代码没有预设放置区限制用户可以把植物摆到页面上任意位置——这是有意的设计赋予用户完全的创作自由。部署到 Azure Static Web Apps解决方案文档给出了将 Terrarium 发布到公网的官方途径Azure Static Web Apps。这是一项专为静态站点设计的托管服务天然适合本项目这种无 API、纯前端的应用。完整步骤如下Fork 本仓库到自己的 GitHub 账号下需要先把代码放到自己的 GitHub 仓库中创建 Azure Static Web App进入 Azure 门户创建 Static Web App 资源原文档中提供了 Deploy to Azure 一键部署按钮可直接跳转到创建向导走完创建向导关键配置为App root应用根目录设置为/solution或设置为你的代码根目录——Terrarium 的全部静态资源都位于该目录下设置错误将导致发布后无法加载页面API 可跳过本项目没有任何后端 API向导中无需配置向导完成后Azure 会在你的 fork 仓库中自动创建一个.github工作流目录其中包含 Azure Static Web Apps 的构建/发布配置后续每次推送到对应分支CI 都会自动重新构建并部署到新生成的 URL。部署完成后Azure 会分配一个形如https://app-name.azurestaticapps.net的公网地址你的 Terrarium 即可分享给任何人访问。延伸练习建议结合课程3-intro-to-DOM-and-closures的课后任务完成基础拖放后可以尝试以下扩展进一步巩固 DOM 与状态管理能力双击置顶通过修改z-index让双击的植物浮到最上层拖拽边界限制植物不能移出玻璃罐区域#terrarium的边界判定位置持久化用localStorage保存每株植物的坐标刷新后还原布局重置功能页面加载时记录初始位置提供按钮配合 CSS 过渡动画让植物平滑回到侧栏hover 反馈指针悬停时给植物添加微弱发光效果提升交互质感。小结从translations/de/3-terrarium/solution/README.md这份解决方案文档出发结合仓库源码可以看到Terrarium 用最少的工具链串起了 Web 开发入门最核心的三块拼图——HTML 语义结构、CSS 视觉呈现、基于闭包与 Pointer Events 的 DOM 交互而 Azure Static Web Apps 的部署流程则补全了开发 → 发布的最后一环。这套源码同时是3-terrarium三个子章节1-intro-to-html、2-intro-to-css、3-intro-to-DOM-and-closures的标准答案适合边读课程边对照验证。更详细的拖放原理讲解可继续阅读 3-intro-to-DOM-and-closures/README.md玻璃罐 CSS 的视觉参考可查看 2-intro-to-css/README.md。【免费下载链接】Web-Dev-For-Beginners24 Lessons, 12 Weeks, Get Started as a Web Developer项目地址: https://gitcode.com/GitHub_Trending/we/Web-Dev-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
