Github 页面没有加载 W3.CSS？

Question

我正在尝试使用 W3.CSS 中的 css 样式表创建一个 github 页面。

但是，当我尝试加载页面时，似乎没有加载任何 CSS 样式表。我在 stackoverflow 或其他任何地方都没有找到答案

也许我做错了什么，但我不知道是什么。

这是我的 index.html 文件的开始

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
.w3-sidenav a,.w3-sidenav h4 {padding: 12px;}
.w3-navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
}
</style>
<title>Amérique du Sud</title>
</head>

这里是the page in question

Answer 1

如果您查看浏览器控制台，您会看到一个错误

混合内容：“https://laurenthayez.github.io/#Argentine”处的页面通过 HTTPS 加载，但请求的样式表“http://www.w3schools.com/lib/w3.css”不安全。此请求已被阻止；内容必须通过 HTTPS 提供。

这意味着由于您的网站是https://，出于安全原因，它不会加载通过http:// 提供服务的资源。

解决方案是为您的资产使用https://www.w3schools.com/... 而不是http://www.w3schools.com/...。或者您可以只使用//www.w3schools.com/...，这将使用与您的站点相同的协议从站点请求资产。或者换句话说，如果你的网站是http://，它会请求http://，或者如果你的网站是https://，它会请求https://

所以把你的link标签改成

<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">

或

<link rel="stylesheet" href="//www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="//www.w3schools.com/lib/w3-theme-black.css">