简介
给媳妇制作一个生日惊喜网页。
原材料：
网页基础：
https://github.com/hackerzhou/Love
照片插件：
https://dishiduo.coding.net/public/hcj/hcj/git/files
地址：2020-11/2020-11-8/录制
搭建过程
将网页仓库下载下来，部署在nginx服务器中的
/var/www/html
nginx会自动找到index.html文件作为主页展示在80端口上
在阿里云的部署请移步上一篇blog
HTML+CSS+JS
简单入了个门。html是主体，css负责装饰，js负责实现计算任务
html中 <head> 部分类比c中的头文件，可以确定标题、引入css和js文件
<body>部分放要显示出来的内容
绝对位置
在基础网页上对元素位置大小进行更改，因为搞不懂相对位置的设置，所以直接进行绝对位置部署
例子：
<html>
<head>
<style type="text/css"> /*设置图片的属性*/
img{
position:absolute; /*绝对位移*/
left:300px; /*距离左侧300px*/
top:150px; /*距离顶部150px*/
}
</style>
</head>
<body>
<img src="./1.jpg" width="800" height="800" />
</body>
嵌入css
此外，关于嵌入css，最好的办法就是使用link链接式方法，方便css与html解耦。
链接式通过 HTML 的 <link> 标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应用最多的方式，同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。
加入新插件
我选用的照片插件如简介所示。
将插件的css用link方式链接进html后，在css中调整插件的大小及位置。
网易云音乐外链
打开网易云音乐PC版，每首歌曲都能找到生成外链的代码：
复制后可直接在本地html中生成网易云播放器。
注意：chrome浏览器中无法自动播放，这是浏览器的原因。
IE可以自动播放。