CSS在其他人的电脑上被解释为纯文本,但在我的电脑上却在工作



我一直在开发主页,一切都很顺利。然而,每当我把它发送给其他人时,CSS都无法正常工作。当我在他们的笔记本电脑上检查代码时,它似乎没有被注册为代码,而是被注册为纯文本。我已经包含了我的整个代码,以防另一部分出现问题。对于上下文,我将其保存为Firefox上的.html文档。加载时没有任何错误,CSS就是不起作用。我对HTML和CSS很陌生,所以它可能很简单。

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style type="text/css">
a:link {
color: black;
}

a:visited {
color: black;
}

a:hover {
color: #327da8;
}

.name {
font-size: 20px;
font-color: black;
font-family: montserrat;
text-decoration: none;
position: absolute;
margin-top: 360px;
text-align: left;
border-width: 1px;
border-style: solid;
border-color: lightgray;
padding: 27.5px;
border-radius: 0px 0px 15px 15px;
}

a img {
border-radius: 50%;
display: block;
border: none;
}

.navbar {
text-decoration: none;
padding-left: 30px;
padding-right: 30px;
font-family: montserrat;
font-weight: 150;
}

body {
background-image: url("file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/The%20Lost%20Dogs%20Home.png");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
background-size: 200px, 600px;
}

a:hover~.name {
color: #327da8;
border-color: #327da8;
}

img {
border: 10px solid black;
}
</style>
</head>
<body>
<nav>
<table style="margin-left:190px;margin-right:auto; margin-top:45px; font-size:20px;">
<tr>
<th><a class="navbar" href="PupLove.html">Home</a></th>
<th><a class="navbar" href="PupLoveDonate.html">Donate</a></th>
<th><a class="navbar" href="PupLoveCare.html">How to take care of a dog</a></th>
<th><a class="navbar" href="PupLoveContacts&FAQ's.html">Contacts and FAQ's</a></th>
<th><a class="navbar" href="PupLoveBlog.html">Blog</a></th>
</nav>
</tr>
</table>
<div>
<a href="PupLoveNala.html"><img style="position:absolute; margin-top:60px; margin-left:50px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/goldenretrieversf1.jpg" height="300" width="200"></a>
<a class="name" style="margin-left:50px;" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveNala.html">Nala <br><br> Breed: Golden <br> Retriever <br><br> Sex: Female</a></div>
<div>
<a href="PupLoveBillie.html"><img style="position:absolute; margin-top:60px; margin-left:350px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/greatdanesf5.jpg" height="300" width="200"></a>
<a class="name" style="margin-left:350px; padding:36.5px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveBillie.html">Billie <br><br> Breed: Great <br> Dane <br><br> Sex: Male</a></div>
<div>
<a href="PupLoveBendi.html"><img style="position:absolute; margin-top:60px; margin-left:650px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-AB/australiancattledogsf1.jpg" height="300" width="200"></a>
<a class="name" style="margin-left:650px; padding:41px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveBendi.html">Bendi <br><br> Breed: Blue <br> Heeler <br><br> Sex: Male</a></div>
<div>
<a href="PupLoveRufus.html"><img style="position:absolute; margin-top:60px; margin-left:950px; border-radius:15px 15px 0px 0px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Bearded_collie_and_a_rope.jpg/640px-Bearded_collie_and_a_rope.jpg" height="300" width="200"></a>
<a class="name" style="margin-left:950px; padding:21px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveRufus.html"><br>Rufus <br><br> Breed: Bearded <br> Collie <br><br> Sex: Male<br>ㅤ</a>
</div>
</body>
</html>

我不知道这是否是原因,但您的标签关闭得很糟糕,我已经更正了你的代码,说标准:

<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<style>
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: #327da8;
}
.name {
font-size:20px;
color:black;
font-family:montserrat;
text-decoration:none; position:absolute;
margin-top: 360px; text-align:left; border-width:1px;
border-style:solid; border-color:lightgray;
padding: 27.5px;
border-radius:0px 0px 15px 15px;
}
a img {
border-radius: 50%;
display: block;
border: none;
}
.navbar {
text-decoration:none; padding-left:30px; padding-right:30px; font-family:montserrat; font-weight:150;
}
body {
background-image: url("file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/The%20Lost%20Dogs%20Home.png");
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
background-size: 200px, 600px;
}
a:hover ~ .name { 
color: #327da8; 
border-color: #327da8;
}
img {
border:10px solid black;
}
</style>
</head>
<body>
<nav>
<table style="margin-left:190px;margin-right:auto; margin-top:45px; font-size:20px;">
<tr>
<th><a class="navbar" href="PupLove.html">Home</a></th>
<th><a class="navbar" href="PupLoveDonate.html">Donate</a></th>
<th><a class="navbar" href="PupLoveCare.html">How to take care of a dog</a></th>
<th><a class="navbar" href="PupLoveContacts&FAQ's.html">Contacts and FAQ's</a></th>
<th><a class="navbar" href="PupLoveBlog.html">Blog</a></th>
</tr>
</table>
</nav>
<div><a href="PupLoveNala.html"><img style="position:absolute; margin-top:60px; margin-left:50px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/goldenretrieversf1.jpg" height="300" width="200"></a>
<a class="name" style="margin-left:50px;" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveNala.html">Nala <br><br> Breed: Golden <br> Retriever <br><br> Sex: Female</a></div>
<div><a href="PupLoveBillie.html"><img style="position:absolute; margin-top:60px; margin-left:350px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-EFGH/greatdanesf5.jpg" height="300" width="200"></a>
<a class="name" style="margin-left:350px; padding:36.5px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveBillie.html">Billie <br><br> Breed: Great <br> Dane <br><br> Sex: Male</a></div>
<div><a href="PupLoveBendi.html"><img style="position:absolute; margin-top:60px; margin-left:650px; border-radius:15px 15px 0px 0px;" src="https://www.yourpurebredpuppy.com/dogbreeds/photos-AB/australiancattledogsf1.jpg" height="300" width="200"></a>
<a class="name" style="margin-left:650px; padding:41px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveBendi.html">Bendi <br><br> Breed: Blue <br> Heeler <br><br> Sex: Male</a></div>
<div><a href="PupLoveRufus.html"><img style="position:absolute; margin-top:60px; margin-left:950px; border-radius:15px 15px 0px 0px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Bearded_collie_and_a_rope.jpg/640px-Bearded_collie_and_a_rope.jpg" height="300" width="200"></a>
<a class="name" style="margin-left:950px; padding:21px" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveRufus.html"><br>Rufus <br><br> Breed: Bearded <br> Collie <br><br> Sex: Male<br>ㅤ</a></div>
</body>
</html>

相关内容

最新更新