美文网首页CSS
【Web】网页页面样式丢失解决方法

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

作者: caokai001 | 来源:发表于2022-05-31 22:13 被阅读0次

背景

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

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

脚本下载的地址:

其他

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

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

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

欢迎评论交流~

相关文章

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

    背景 之前将几个页面整合到一个网页里面了,方便日常的工作使用; 最近突然发现,页面的样式都失效了,如下: 于是请教...

  • 让人惊掉下巴的CSS3

    众所周知HTML,CSS 和 JavaScript是 Web 页面的“三驾马车”,分别负责网页的结构、样式和行为,...

  • 只用 div 和 css 能玩出什么花来?请扶好下巴!

    HTML,CSS 和 JavaScript 是 Web 页面的“三驾马车”,分别负责网页的结构、样式和行为,共同组...

  • 网页构成

    1.Web构成 构成语言说明结构HTML页面元素和内容表现CSS网页元素的外观、位置等页面样式行为JS页面交互 2...

  • 网站品质很重要

    Web 品质样式表 Web 品质 - 样式表 使用样式表对于提升网页品质至关重要。 不要使用 标签!...

  • 20160910------JAVAWEB概述

    1、web应用程序 2、静态页面、动态页面 静态页面:网页中内容固定,不会更新。(HTML、CSS) 动态网页:网...

  • 学习笔记

    1.网页的组成 HTML:页面结构。 CSS:页面样式表现。 Java Script:交互行为 2.网页标签 he...

  • 就是JavaWeb(零)——JavaWeb概述

    1.Web概述 什么是web? web在计算机网页开发中就是网页的意思,网页是网站中的一个页面。通常我们浏览网页时...

  • HTML知识了解

    web时代 网页的组成:HTML:网页的内容和结构CSS:网页的样式(美化网页最重要的一块)JavaScript:...

  • Web页面性能优化项

    Web页面性能优化项: 将样式表放在顶部,将脚本放在底部;使用浏览器缓存;使目标网页重定向可缓存;内嵌小型 CSS...

网友评论

    本文标题:【Web】网页页面样式丢失解决方法

    本文链接:https://www.haomeiwen.com/subject/wwdtmrtx.html