You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
# 我的花艺瓶：一个用于学习 HTML、CSS 和使用 JS 操作 DOM 的项目 🌵🌱
|
|
|
|
|
|
|
|
|
|
|
|
思考构建一个的具有拖放交互的小程序，只需要很少的 HTML、CSS 和 JS 代码，你就可以构建一个被美化的，且具有交互功能的 Web 页面。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# 教程
|
|
|
|
|
|
|
|
|
|
|
|
1. [HTML 简介](../1-intro-to-html/translations/README.zh-tw.md)
|
|
|
|
|
|
2. [CSS 简介](../2-intro-to-css/translations/README.zh-tw.md)
|
|
|
|
|
|
3. [DOM 简介与 JS 闭包](../translations/3-intro-to-DOM-and-closures/README.zh-tw.md)
|
|
|
|
|
|
|
|
|
|
|
|
## 参与人员
|
|
|
|
|
|
|
|
|
|
|
|
由 [Jen Looper](https://www.twitter.com/jenlooper) 充满着 ♥️ 编写。
|
|
|
|
|
|
|
|
|
|
|
|
使用 CSS 来编写一个花艺瓶的灵感来自于 Jakub Mandra 的玻璃瓶 [CodePen](https://codepen.io/Rotarepmi/pen/rjpNZY)。
|
|
|
|
|
|
|
|
|
|
|
|
上面的手绘插画由 [Jen Looper](http://jenlooper.com) 使用 Procreate 绘制。
|
|
|
|
|
|
|
|
|
|
|
|
## 部署你的花艺瓶
|
|
|
|
|
|
|
|
|
|
|
|
你可以使用 Azure Static Web Apps 部署并发布你的花艺瓶到网络上。
|
|
|
|
|
|
|
|
|
|
|
|
1. Fork 这个仓库
|
|
|
|
|
|
|
|
|
|
|
|
2. 点击下方的按钮
|
|
|
|
|
|
|
|
|
|
|
|
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
|
|
|
|
|
|
|
|
|
|
|
|
3. 按照指引创建你的应用。请确保你的程序根目录为 `/solution` 或者是你自己代码项目的根目录。这个应用不需要使用任何 API，因此你不用担心需要去调用什么额外的内容。.github 目录会在你 fork 的仓库中创建，它将帮助 Azure Static Web Apps 的构建服务构建并发布你的应用到一个新的地址。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
