当我为我的网站选择“使用实时服务器打开”时，它看起来很棒。 CSS 工作正常，它正在做我想做的事。但是当我尝试直接从我的计算机(没有 VS 代码)打开其中一个页面的文件时，CSS 不会加载。我网站上的一个页面使用完全相同的代码连接到完全相同的 CSS 代码(除了用另一种语言编写之外，它是相同的)看起来很完美，但这个是垃圾。关于如何排除故障的任何想法？
* {
margin: 0px;
}
/* Extra-Small devices (small phones and whatnot, 600px and under) */
@media only screen and (max-width: 600px) {
.logo{
width:50%;
}
.tablelinks {
display: none;
}
.tdlinks {
display: none;
}
a,a:visited {
color:white;
text-decoration: none;
}
.menuimg{
width:10%;
height: auto;
float: right;
position: absolute;
top: 30px;
right: 15px;
display: none;
}
h3{
color: rgb(144,38,143);
}
.button{
top: 10px;
right: 10px;
position: absolute;
}
.dropdowncell{
font-family: Arial;
color:white;
font-size:2.7vw;
background-color: rgb(144,38,143);
padding: 10px;
text-align: center;
border-color: rgb(144,38,143);
margin:0px!important;
}
.dropdowntb{
border-collapse: collapse;
}
/*CONTENT*/
.boxmainmed{
display: none;
}
.boxmainsmall{
display: inline-block;
}
.kidsimage{
display: initial;
width: 100%;
margin-top: 20px;
}
h2 {
font-family:Arial;
color:rgb(0,121,194);
font-size: 2.2vw;
padding-top:20px;
line-height: 1.6;
text-align: center;
display: block;
}
p { /*line spacing*/
font-family:Arial;
color:black;
font-size:14px;
padding:10px 1vw;
line-height: 1.6;
text-align: center;
}
.whatwedo{
display: initial;
}
.txtbox{
border-top:3px solid rgb(0,121,194);
border-bottom:3px solid rgb(0,121,194);
margin: 40px;
padding-bottom: 30px;
}
/*SPONSORS*/
.sponsors {
display: inline-block;
background-color: rgb(144,38,143);
width: 100%;
}
h1 {
font-family:Arial;
color:white;
font-size:100%!important;
}
.chinesethankyou{
padding-top: 10px;
font-size: 100%;
text-align: center;
}
.plklogo{
width: 25vw;
height: auto;
}
.ubslogo{
width: 19.308vw;
height: auto;
}
.cell{
display: table-cell;
width: 33%;
text-align: center;
}
}
/* Small devices (tablets and whatnots, 600px and up)*/
@media only screen and (min-width: 600px) {
.logo{
width:30%;
}
.tablelinks {
display: none;
}
.tdlinks {
display: none;
}
a,a:visited {
color:white;
text-decoration: none;
}
.menuimg{
width:10%;
height: auto;
float: right;
position: absolute;
top: 30px;
right: 15px;
display: none;
}
h3{
color: rgb(144,38,143);
}
.button{
top: 20px;
right: 20px;
position: absolute;
}
.dropdowncell{
font-family: Arial;
color:white;
font-size:2.3vw;
background-color: rgb(144,38,143);
padding: 10px 15px;
text-align: center;
border-color: rgb(144,38,143);
margin:0px!important;
}
.dropdowntb{
border-collapse: collapse;
}
/*CONTENT*/
.boxmainsmall{
display:none;
}
.kidsimage{
width: 100%;
height: auto;
position: static;
top: 0px;
}
h2 {
font-family:Arial;
color:rgb(0,121,194);
font-size: 2.2vw;
padding:20px 1vw;
line-height: 1.6;
display: inline;
font-weight: 700;
}
p { /*line spacing*/
font-family:Arial;
color:black;
font-size:14px;
line-height: 1.6;
padding:0px 10px;
display: inline-block;
border:1px solid white;
}
.txtbox{
width: 100%;
display: initial;
position: relative;
}
.whatwedo{
padding:30px 5vw;
width: 100vw;
display: table;
z-index: inherit;
column-width: 50%;
margin: 40px 0px;
}
/*SPONSORS*/
.sponsors {
display: inline-block;
background-color: rgb(144,38,143);
width: 100%;
position: relative;
}
h1 {
font-family:Arial;
color:white;
font-size:100%!important;
text-align: center;
}
.chinesethankyou{
padding-top: 10px;
font-size: 100%;
text-align: center;
}
.plklogo{
width: 25vw;
height: auto;
}
.ubslogo{
width: 19.308vw;
height: auto;
}
.cell{
display: table-cell;
width: 33%;
text-align: center;
}
}
/* Large devices (laptops/desktops, 992px and up)*/
@media only screen and (min-width: 992px) {
/*HEADER*/
.logo{
height: auto;
width: 21%;
display: initial;
}
.tablelinks {
margin:1.8vw 1.8vw 0px 0px;
width: 77%;
float: right;
position: absolute;
top:0px;
right:0px;
display: table;
}
.tdlinks {
font-family:Arial;
color:rgb(144,38,143);
font-size: 1.75vw;
font-weight: bold;
text-align: center;
width: auto;
padding: .7vmin 1vmin;
display: table-cell;
}
a,a:visited {
color: rgb(144,38,143);
text-decoration: none;
display: inline;
min-inline-size: 50px;
}
.dropdownmenu{
display: none;
}
/*CONTENT*/
.boxmainmed{
display: none;
}
.boxmainsmall{
display: inline-block;
position: relative;
height: 600px;
width: 100%;
}
.kidsimage{
overflow: hidden;
width: auto;
height: inherit;
display: inline-block;
z-index:-2;
position: relative;
}
h2 {
font-family:Arial;
color:rgb(0,121,194);
font-size: 2.2vw;
padding:15px 0px;
line-height: 1.6;
display: inline;
text-align: center;
font-weight: 700;
}
p { /*line spacing*/
font-family:Arial;
color:black;
font-size:14px;
line-height: 1.6;
padding:10px 1vw;
display: inline;
border: none;
}
.txtbox{
width: 48%;
height: inherit;
float: right;
display: initial;
position: absolute;
left:65vw;
margin-right: 30px;
min-width: 410px;
background-color: rgba(255,255,255,1);
}
.whatwedo{
padding-left:30px;
margin:auto;
width:75%;
min-width: 375px;
height: inherit;
display: table;
z-index: inherit;
float: left;
top: 0px;
}
/*SPONSORS*/
.sponsors {
display: inline-block;
background-color: rgb(144,38,143);
width: 100%;
margin: auto;
position: relative;
}
h1 {
font-family:Arial;
color:white;
font-size:30px!important;
}
.plklogo{
width: 250px;
height: auto;
margin: auto;
}
.cell{
display: table-cell;
text-align: center;
margin: auto;
}
}
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>LTP | Aims & Objectives</title>
<link rel="shortcut icon" href="ltpicon.ico" type="image/x-icon"/>
<meta name="description" content="Welcome to Language Training Programme">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta name="Microsoft Theme" content="none, default">
<meta name="Microsoft Border" content="none, default">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="stylingaims.css" type="text/css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!--WHY SPACING SOMETIMES WRONG??-->
</head>
<body>
<header>
<a href="indexwip.html"><img class="logo" src="ltplogo.PNG"></a>
<nav>
<table class="tablelinks">
<tr>
<td class="tdlinks"><a href="aimsobjecwip.html">Aims & Objectives</a></td>
<td class="tdlinks"><a href="newswip.html">News</a></td>
<td class="tdlinks"><a href="careerswip.html">Careers</a></td>
<td class="tdlinks"><a href=photogalwip.html>Photo Gallery</a></td>
<td class="tdlinks"><a href="contactwip.html">Contact Us</a></td>
</tr>
<tr>
<td class="tdlinks"><a href="aimsobjecschinesewip.html">宗旨</a></td>
<td class="tdlinks"><a href="newschinesewip.html">最新消息</a></td>
<td class="tdlinks"><a href="careerschinesewip.html">職位空缺</a></td>
<td class="tdlinks"><a href="photogalchinesewip.html">圖片集</a></td>
<td class="tdlinks"><a href="contactchinesewip.html">聯絡我們</a></td>
</tr>
</table>
<div class="w3-container dropdownmenu">
<button onclick="myFunction('Demo1')" class="w3-btn button"><h3>Menu</h3><img class="menuimg" src="Hamburger_icon.png"></button>
<div id="Demo1" class="w3-hide w3-jumbotron">
<table class="dropdowntb">
<tr>
<td class="dropdowncell"><a href="aimsobjecwip.html">Aims & Objectives</a></html></td>
<td class="dropdowncell"><a href="newswip.html">News</a></html></td>
<td class="dropdowncell"><a href="careerswip.html">Careers</a></html></td>
<td class="dropdowncell"><a href=photogalwip.html>Photo Gallery</a></html></td>
<td class="dropdowncell"><a href="contactwip.html">Contact Us</a></td>
</tr>
<tr>
<td class="dropdowncell"><a href="aimsobjecschinesewip.html">宗旨</a></html></td>
<td class="dropdowncell"><a href="newschinesewip.html">最新消息</a></html></td>
<td class="dropdowncell"><a href="careerschinesewip.html">職位空缺</a></html></td>
<td class="dropdowncell"><a href="photogalchinesewip.html">圖片集</a></html></td>
<td class="dropdowncell"><a href="contactchinesewip.html">聯絡我們</a></html></td>
</tr>
</table>
</div>
</div>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
}
else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</nav>
</header>
<div class="boxmainsmall">
<img class="kidsimage" src="ltpstcokphoto_nofade.jpeg"> <!--GET LTP PICTURE-->
<div class="txtbox">
<table class="whatwedo">
<tr><td><h2>Aims and Objectives</h2></td></tr>
<tr><td>
<p>The LTP aims to help every child aged 3 to 18 years in residential care at Po Leung Kuk to become biliterate (able to read and write Chinese and English) and trilingual (able to speak and understand Cantonese, Putonghua, and English). We strive to achieve this through</p>
<ul>
<li><p>Formal English classes for children and young people from K 1 through Secondary levels,</p></li>
<li><p>Elective sessions for Secondary students to develop business and study skills and hobbies through English,</p></li>
<li><p>Formal Putonghua classes for children from K 1 to P 6 levels,</p></li>
<li><p>Storyteller sessions for all children and young people aged 2 – 18 years,</p></li>
<li><p>Informal activities to allow the children and young people to practice their language, and</p></li>
<li><p>Celebrations of social and cultural festivals</p></li>
</ul>
</td></tr>
</table>
</div>
</div>
<div class="boxmainmed">
<img class="kidsimage" src="ltpstcokphoto_nofade.jpeg"> <!--GET LTP PICTURE-->
<div class="txtbox">
<table class="whatwedo">
<tr><td><h2>Aims and Objectives</h2></td></tr>
<tr><td>
<p>The LTP aims to help every child aged 3 to 18 years in residential care at Po Leung Kuk to become biliterate (able to read and write Chinese and English) and trilingual (able to speak and understand Cantonese, Putonghua, and English). We strive to achieve this through</p>
<ul>
<li><p>Formal English classes for children and young people from K 1 through Secondary levels,</p></li>
<li><p>Elective sessions for Secondary students to develop business and study skills and hobbies through English,</p></li>
<li><p>Formal Putonghua classes for children from K 1 to P 6 levels,</p></li>
<li><p>Storyteller sessions for all children and young people aged 2 – 18 years,</p></li>
<li><p>Informal activities to allow the children and young people to practice their language, and</p></li>
<li><p>Celebrations of social and cultural festivals</p></li>
</ul>
</td></tr>
</table>
</div>
</div>
</div>
<table class="sponsors" width="100%" id="plswork">
<tr>
<td class="cell" style="width:33%;"><h1>Thank You Sponsors</h1></td>
<td class="cell" style="width:33%;"><h1>谢谢赞助商</h1></td>
<td class="cell" style="width:33%;"><a href="https://www.poleungkuk.org.hk/"><img src="Po-Leung-Kuk-logo.png" class="plklogo"></a></td>
<!--LOOKS BAD IN EXPLORER??-->
</tr>
</table>
</body>最佳答案
我遇到了同样的问题。就我而言，这是由我的 css 文件路径中的拼写错误引起的。我不知道为什么肝服务器会忽略它并正确放置文件。
问题是我有:
<link href="/style.css">
代替:
<link href="style.css">
因此请检查您的文件路径。也许问题就在那里。
关于html - Visual Studio Code Live Server 看起来不错，但 CSS 无法在浏览器中加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59559687/