准备

首先进入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.点击代码仓库,创建代码仓库:

进入到仓库选项界面:

上传你之前的所有文件:

上传成功了



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

最后网站名字随便写都行

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

更多推荐

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