用源码部署静态网站

一、下载材料包，材料包包含

1、一个可以实现《m3u8推流播放》功能的静态页面。

2、一个多余的js文件。

用源码部署静态网站

二、修复静态页面

材料包里的静态页面有点小问题，问题包含

1、没有正确的引用css+js文件，我们需要把script和link标签里的路径改成本地可访问的路径；

2、样式不好友，需要进行css微调，把播放器的宽度调成800px然后居中，把换平台按钮下方的下划线去掉；

3、缺少一个js文件，需要把材料包里多余的那个js文件引用到页面里面。

三、解决方案

1、解压材料包，将《HTML静态页面》目录下的静态源码放到本地网站的根目录文件夹下。

2、通过vscode代码编辑器打开网站根目录的《index.html》文件，找到js和css引用文件

<script src="js文件"></script>
<link rel="stylesheet" href="css文件">

将js文件改成本地地址。如

<script src="http://html.cm/zb_users/plugin/ytecn_video/dplayer/hls.min.js"></script>

这里的js地址不是本地路径，我们的本地的hls.min.js文件在根目录的dplayer文件夹的下，所以可以改成

<script src="dplayer/hls.min.js"></script>

css文件同理。这个时候问题1就已经解决了。

3、在index.html代码里的body里，给代码最外层添加一个div属性，比如设置成

<div class="ytecn-center">

然后在引用的css文件里面添加代码

.ytecn-center{
    width: 800px;
    margin: 0 auto;
}

这个时候，界面的宽度和居中效果就已经好了。

4、在浏览器打开前台页面，找到换直播风景的按钮，右键->检查，可以看到按钮所属类名为《.juji li a》，所在文件名为《style.css》。

鼠标放在《style.css》上，可以看到《style.css》文件所在的位置，在根目录找到这个文件，并通过vscode代码编辑器打开它。

按关键词《ctrl+f》打开搜索框，输入《.juji li a》，找到类名的位置，在类里面添加属性

text-decoration: none;

注：每个属性之间要用";"号隔开。

这个时候，平台按钮下面的下划线就已经消失了。

5、返回材料包，把材料包的《jquery-latest.min.js》文件放到网站根目录的任意位置。比如放到《script》文件夹下，然后回到index.html，在head里面添加新的调用

<script src="script/jquery-latest.min.js"></script>

6、完。