【Web】网页页面样式丢失解决方法

背景

之前将几个页面整合到一个网页里面了，方便日常的工作使用；

image.png

最近突然发现，页面的样式都失效了，如下：

于是请教了一下大佬，原来是网络请求的文件无法访问

1.查找原因

打开谷歌浏览器，一般按F12, 查看网络请求问题；结果可以看到很多文件访问失败。

image.png

实际上是页面调用的bootstrap.css,js文件，不想下载到本地就是用官方推荐的免费的CDN加速服务

image.png

自己直接复制这个文件，确实无法访问

2.解决方法

于是乎查找知乎，果然遇到了相同的问题；

image.png

思路：

1.使用其他的CDN服务

    <!-- CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <!-- JS  -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

2使用本地的css,js文件;通过相对路径进行调用脚本

image.png

脚本下载的地址：

• jquery下载地址：https://www.jq22.com/jquery-info122

• bootstrap下载地址：https://v4.bootcss.com/docs/getting-started/download/

其他

https://zhuanlan.zhihu.com/p/447713250

https://www.bootcdn.cn/twitter-bootstrap/

https://www.bootcdn.cn/jquery/3.5.1/

欢迎评论交流~