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">

Github页面没有加载W3.CSS？

1 个答案: