准备

首先进入github网站下载模板，点击Code->Download ZIP:

下载即可，没有GitHub账号的伙伴可以注册一个哦。

测试与改动

先看看这里面到底有什么东西：
index.html:前端布局文件
index.js:后端配置文件
README.md:说明文档

看看什么效果，点击index.html文件即可，大概效果如下：

html文件

如果我们想进行改动，则使用记事本(有的伙伴可能没有下载IDE，直接用记事本即可)打开index.html文件：右键点击该文件，选择打开方式，再选择记事本打开

然后看到记事本两个关键位置：

往上面第一个位置背景处可以加入以下代码中的一个：

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

往背景音乐那可以加入以下代码：
style代表展示类型，定义加载音频方式，这里就是无需加载，根据浏览器来
autoplay就是代表自动播放的意思
loop就是循环播放的意思
audio就是代表HTML中的音频标签
source代表音频来源与配置，src代表相对目录下的音频位置，我这里就是把happy.mp3（大家可以随便下载喜欢的MP3）放到了同目录下

type代表音视频流类型。

<audio style="display:none" autoplay loop><source src="happy.mp3" type="audio/mpeg"></audio>

当然，大家也可以在title那改变网页标题,最终代码改动如下：

js文件

主要看到两个地方：
1.祝福语句仿真：

我改为如下内容：

之后我们还需要改动仿真速率，按下ctrl+F键，查找what，可以找到如下行：

最终测试效果

点击index.html，即可看到本地运行的效果

部署到静态页面

上述的效果只能在本地电脑设备运行，如果要给其它小伙伴也能够运行，那么就得部署了：
1.首先进入到coding码云注册一个个人账号，然后进入。
2.创建项目，选择代码托管项目，其中的项目名称随便填，然后完成创建即可。

3.点击代码仓库，创建代码仓库：

进入到仓库选项界面：

上传你之前的所有文件：

上传成功了

然后回退到项目设置之前的仓库界面，选择持续部署，发布静态界面

最后网站名字随便写都行

最后点击部署，即可成功，然后我们就可以让这个网站给小伙伴看到啦！

如何快速制作一个漂亮的生日祝福网站相关推荐

如何制作一个漂亮的生日祝福网页
在线制作地址: http://blessing.code996.cn 开始前完成本教程需要以下技能要求: 熟悉Git 熟悉HTML及HTML5 熟悉Css及Css3 熟悉JavaScript 熟悉J ...
如何快速制作一个H5单页面网站
在没有自助建站之前,做单页面网站也需要耗费大量的时间,编写代码,调试,上传发布一个都不能少.而有了域名版的建站宝盒后,做单页面网站的时间可以缩短至20分钟左右,还不用花钱.下面给大家介绍操作方法,有需 ...
如何快速搭建一个属于自己的网站？
随着互联网的发展,网站建设的技术也越来越成熟,建站的方式也愈加丰富和多样.同时,互联网时代,无论是组织还是个人,无论是大企业还是小社团,拥有一个属于自己的网站,必不可少. 可是,不同的组织.不同的人, ...
【meng_项目】python+flask+html+css制作一个简单的生日祝福语网页
python+flask+html+css制作一个简单的生日祝福语网页一个py文件: test.py 一个html文件: birthday_index.html 一张图片: ...
HTML制作色带,PS简单制作一个漂亮的混合色带gif动画效果
今天为大家介绍PS简单制作一个漂亮的混合色带gif动画效果方法,方法很简单的,教程介绍的很详细,好了,下面我们来看看吧! 先来看看案例的最终效果: 混合颜色带是一种特殊的高级蒙版,它可以快速隐藏像素. ...
使用Django+MySQL快速搭建一个属于自己的网站
使用Django+MySQL快速搭建一个属于自己的网站 Hello小伙伴们,你们好啊~~ 又是日常get新技能的一天, 今天,咱们来整理一下如何使用VMware Workstation上进行openE ...
如何用JAVA制作一个漂亮的表格
如何用JAVA制作一个漂亮的表格表格图片: 选中一行时高亮显示,且字体变为红色: 在表格中添加数据: 代码如下: import java.awt.BorderLayout; import java. ...
html如何制作一个漂亮的表格？+ 列表制作 + 表单制作（干货！直接收代码）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录 html如何 ...
android 心形上漂动画,PowerPoint Viewer制作一个漂亮心形飞出动画的操作教程
各位使用PowerPoint Viewer的同学们,你们知道怎么制作一个漂亮心形飞出动画吗?在这篇教程内小编就为各位呈现了PowerPoint Viewer制作一个漂亮心形飞出动画的操作教程. Pow ...
小强的HTML5移动开发之路（5）——制作一个漂亮的视频播放器
在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识,下面我们开始真正的体验一下HTML5的优势,我们开始制作一个漂亮的视频播放器吧先别急,在开始制作之前先了解一下视频文件的基本知识. 一.视频 ...

如何快速制作一个漂亮的生日祝福网站

准备