如何制作一个浪漫的表白网页

在线制作地址：

http://blessing.code996.cn/

开始前

完成本教程需要以下技能要求：

1. 熟悉Git

2. 熟悉HTML及HTML5

3. 熟悉Css及Css3

4. 熟悉JavaScript

5. 熟悉JQuery

6. 了解PhotoShop

7. 了解SVG动画

如果您拥有以上技能，可在3到5小时内完成作品。

正式开始

步骤一：网页制作

1. 收集素材
2. 制作html页面
3. 添加样式
4. 添加照片
5. 添加音乐
6. 添加其他
7. 本地预览
8. 调整样式
9. 支持微信

步骤二：上传到静态服务器：

1. 注册任意一个代码托管网站，如码云，地址：https://gitee.com/
2. 创建项目仓库，参考：https://gitee.com/help/articles/4120
3. 下载安装git，上传你的代码，git命令参考：https://www.code996.cn/post/2016/git-base/
4. 打开pages服务，参考： https://gitee.com/help/articles/4136
5. 等待部署成功，打开项目地址，查看。
6. 完成

步骤详解

1. 素材包括生日快乐歌，做背景音乐；漂亮的图片；相片；动画；好看的字体文件等 请在各素材网站根据口味获取，这里就不提供了。

2. HTML框架

3.手机端隐藏滚动条

<meta name="viewport" content="width=device-width, initial-scale=1">

4.手机端防止拖动

5.mp3播放相关函数

6.烟花

7.蛋糕动画svg

8.背景图片样式

9.样式

略

10.HTML

HTML是超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

CSS是层叠样式表 (Cascading Style Sheets)样式定义如何显示HTML元素，样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题，外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是脚本语言，JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

11.码云 码云是开源中国社区2013年推出的基于 Git 的完全免费的代码托管服务，这个服务是基于 Gitlab 开源软件所开发的，我们在 Gitlab 的基础上做了大量的改进和定制开发，目前已经成为国内最大的代码托管系统，致力于为国内开发者提供优质稳定的托管服务。

码云主要功能 码云除了提供最基础的 Git 代码托管之外，还提供代码在线查看、历史版本查看、Fork、Pull Request、打包下载任意版本、Issue、Wiki 、保护分支、代码质量检测、PaaS项目演示等方便管理、开发、协作、共享的功能。

码云 Pages 是一个免费的静态网页托管服务，您可以使用 码云 Pages 托管博客、项目官网等静态网页。如果您使用过 Github Pages 那么您会很快上手使用码云的 Pages服务。目前码云 Pages 支持 Jekyll、Hugo、Hexo编译静态资源。

12.Git Git是一种版本控制工具，是一种记录一个或若干文件内容变化，以便将来查阅特定版本修订情况的系统。在本书所展示的例子中，我们仅对保存着软件源代码的文本文件作版本控制管理，但实际上，你可以对任何类型的文件进行版本控制。如果你是位图形或网页设计师，可能会需要保存某一幅图片或页面布局文件的所有修订版本（这或许是你非常渴望拥有的功能）。采用版本控制系统（VCS）是个明智的选择。有了它你就可以将某个文件回溯到之前的状态，甚至将整个项目都回退到过去某个时间点的状态。你可以比较文件的变化细节，查出最后是谁修改了哪个地方，从而找出导致怪异问题出现的原因，又是谁在何时报告了某个功能缺陷等等。使用版本控制系统通常还意味着，就算你乱来一气把整个项目中的文件改的改删的删，你也照样可以轻松恢复到原先的样子。但额外增加的工作量却微乎其微。

详情参考： http://git.oschina.net/progit/

命令参考：