图标不会显示在桌面计算机的页脚中

Question

下午好！我有一个奇怪的问题。我正在创建一个网页只是为了测试我的新手技能。我创建了一个包含一些图像（社交媒体图标）的页脚。每当我在桌面上时，这些图像绝对不会出现在页脚中。每当我在笔记本电脑上时，它们都会完美显示。

在我的桌面上，如果我将图标移到 html 的 <main> 中，它们就会显示。当我把它们放在我的 <footer> 区域时，它们就消失了。有人运行以前参与过这个吗？有人可以帮忙吗？

这是 HTML 代码...

* {
  box-sizing: border-box;
}

body {
  background-color: rgb(219, 219, 219);
  margin: 0;
}


/*Header CSS code*/

header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  width: 125px;
  height: 125px;
  border: 2px solid black;
  border-radius: 50%;
  margin-top: 10px;
}

.under-logo {
  display: flex;
  padding: 10px;
}

.lambo-logo {
  width: 145px;
  height: 80px;
  border-radius: 20px;
  padding: 10px;
}

.title {
  font-family: 'Merriweather', serif;
}


/*Navigation Bar CSS code*/

nav {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background-color: rgb(70, 70, 70);
  border: 2px solid black;
}

.nav-links {
  color: white;
  font-size: 25px;
  padding: 10px 20px;
}

.nav-links:hover {
  background-color: rgb(0, 0, 150);
  cursor: pointer;
  transition: 0.5s;
  border-radius: 50%;
}


/*Signup Form CSS code*/

.signup-title {
  text-align: center;
}

form {
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  border: 2px solid black;
  border-radius: 40px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 10px;
  background-color: rgb(0, 0, 150);
  color: white;
}

fieldset {
  border: 2px solid black;
  border-radius: 40px;
  width: 400px;
  height: 210px;
  padding: 20px;
  font-size: 25px;
  font-weight: bold;
  margin-right: auto;
  margin-left: auto;
  background-color: rgb(219, 219, 219);
  color: black;
}

input[type="text"],
[type="email"] {
  width: 100%;
  font-size: 15px;
  height: 30px;
  padding-left: 5px;
}

button[type="submit"] {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;
  border: 2px solid black;
  border-radius: 40px;
  background-color: rgb(0, 0, 150);
  color: white;
}

button[type="submit"]:hover {
  cursor: url(Images/pagani-cursor.png) 55 55, auto;
  background-color: green;
  color: white;
  transition: .5s;
}


/*Car CSS code - Main content of page*/

.cars {
  display: flex;
  flex-direction: column;
}

.car-name {
  margin-top: 0px;
}

.car-stats {
  margin-top: 0px;
  margin-bottom: 5px;
}

.car-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: 20px;
  border: 2px solid black;
  border-radius: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.car {
  width: 300px;
  border-radius: 40px;
  border: 2px solid black;
}


/*Footer CSS code*/

footer {
  background-color: rgb(70, 70, 70);
  height: 75px;
  width: 100%;
  position: absolute;
  border: 2px solid black;
  display: flex;
  justify-content: center;
}

.footer-text {
  color: white;
  margin-top: 0;
  font-family: 'Merriweather', serif;
}

.social-icons {
  display: flex;
}


/*Code for larger screens*/

@media screen and (min-width: 800px) {
  .cars {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 20px;
  }
}

<!DOCTYPE html>
<html lang="en">
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Venny's Cars</title>
  <link href="main.css" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" rel="stylesheet">
</head>

<body>
  <!--Below is the logo and title for the website-->
  <header class="header">
    <img src="Images\VennyDolphin.jpg" alt="Venny with dolphin" class="logo">
    <div class="under-logo">
      <img src="Images/lambo-logo-reverse.png" alt="outline of car" class="lambo-logo">
      <h1 class="title">Venny's Cars</h1>
      <img src="Images/lambo-logo.png" alt="reverse outline" class="lambo-logo">
    </div>
  </header>
  <!--Below is the Navigation Bar-->
  <nav class="navbar">
    <div class="nav-links"><a href: "#">Link</a></div>
    <div class="nav-links"><a href: "#">2nd Link</a></div>
    <div class="nav-links"><a href: "#">3rd Link</a></div>
  </nav>
  <!--Here is the signup form-->
  <main>
    <form class="signup-form" action="newsletter.html" method="POST">
      <h1 class="signup-title">Sign Up for our Newsletter!</h1>
      <fieldset class="name-email-input">
        <div>
          <label>First Name:</label>
          <input type="text" id="firstname" name="firstname" placeholder="John" required>
        </div>
        <div>
          <label>Email:</label>
          <input type="email" id="email" name="email" placeholder="John@123.com" required>
        </div>
        <!--Signup Button-->
        <div class="button">
          <button type="submit" id="button">Sign Up!</button>
        </div>
      </fieldset>
    </form>
    <!--Below is our section for the cars-->
    <div class="cars">
      <!--Porsche 911 GT2 RS-->
      <div class="car-display">
        <h1 class="car-name">Porsche 911 GT2 RS</h1>
        <img src="Images\gt2rs.jpg" class="car gt2rs" alt="Porshe 911 GT2 RS">
        <ul>
          <h2 class="car-stats">Car Stats</h2>
          <li>Engine: 3.8-liter Twin-Turbo Flat 6</li>
          <li>HP: 690hp @ 7000rpm</li>
          <li>Torque: 553 lb-ft @ 2500rpm</li>
          <li>Price: 3,200</li>
        </ul>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/PwAhAFyMwk8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <!--Koenigsegg One:1-->
      <div class="car-display">
        <h1 class="car-name">Koenigsegg One:1</h1>
        <img src="Images\k1.jpg" class="car k1" alt="Koenigsegg One:1">
        <ul>
          <h2 class="car-stats">Car Stats</h2>
          <li>Engine: 5.0-liter Twin-Turbo V8</li>
          <li>HP: 1341hp @ 7500rpm</li>
          <li>Torque: 1010 lb-ft @ 6000rpm</li>
          <li>Price: ,850,000</li>
        </ul>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/7X1z-1xwquk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <!--Porsche 918 Spyder-->
      <div class="car-display">
        <h1 class="car-name">Porsche 918 Spyder</h1>
        <img src="Images8.jpg" class="car 918" alt="Porshe 918 Spyder">
        <ul>
          <h2 class="car-stats">Car Stats</h2>
          <li>Engine: 4.6-liter V8 Hybrid</li>
          <li>HP: 887hp @ 8600rpm</li>
          <li>Torque: 944 lb-ft @ 5000rpm</li>
          <li>Price: 5,000</li>
        </ul>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/nSqzp3kdAm4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </main>
  <!--Below is the footer-->
  <footer>
    <h2 class="footer-text">Follow me for new additions!</h2>
    <div class="social-icons">
      <a href="#" target="_blank"><img src="Images/facebook.png" alt="facebook"></a>
      <a href="#" target="_blank"><img src="Images/insta.png" alt="insta"></a>
    </div>
  </footer>
  <script src="script.js"></script>
  <!--Link to Javascript-->
  <script src="action.js"></script>
</body>

</html>

Answer 1

测试您的代码后，这是一个路径问题，但您的代码中确实还有其他一些错误需要解决。您在顶部的链接已发布为 <a href:"#" >Link 1</a> 等；用冒号代替等号。将链接中的“:”替换为“=”，即使链接是空白的。此外，正如已经指出的那样，在许多地方你有反斜线，而斜线应该指向前方。（只有一些已经更正）。出于片段的目的，我注释掉了头部样式表的链接，因为 css 单独列出。

关于路径，我在一个网站上用完整的域名输入了一个facebook图标的路径，图标显示出来了。它相当大，所以我为您的社交图标图像添加了 class 以减小尺寸。根据您的图标大小，根据您认为合适的方式调整或删除它。我看到的关于图标未显示的主要问题是您需要更正代码中的文件路径。

希望这对您有所帮助

* {
  box-sizing: border-box;
}

body {
  background-color: rgb(219, 219, 219);
  margin: 0;
}


/*Header CSS code*/

header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  width: 125px;
  height: 125px;
  border: 2px solid black;
  border-radius: 50%;
  margin-top: 10px;
}

.under-logo {
  display: flex;
  padding: 10px;
}

.lambo-logo {
  width: 145px;
  height: 80px;
  border-radius: 20px;
  padding: 10px;
}

.title {
  font-family: 'Merriweather', serif;
}


/*Navigation Bar CSS code*/

nav {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background-color: rgb(70, 70, 70);
  border: 2px solid black;
}

.nav-links {
  color: white;
  font-size: 25px;
  padding: 10px 20px;
}

.nav-links:hover {
  background-color: rgb(0, 0, 150);
  cursor: pointer;
  transition: 0.5s;
  border-radius: 50%;
}


/*Signup Form CSS code*/

.signup-title {
  text-align: center;
}

form {
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  border: 2px solid black;
  border-radius: 40px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 10px;
  background-color: rgb(0, 0, 150);
  color: white;
}

fieldset {
  border: 2px solid black;
  border-radius: 40px;
  width: 400px;
  height: 210px;
  padding: 20px;
  font-size: 25px;
  font-weight: bold;
  margin-right: auto;
  margin-left: auto;
  background-color: rgb(219, 219, 219);
  color: black;
}

input[type="text"],
[type="email"] {
  width: 100%;
  font-size: 15px;
  height: 30px;
  padding-left: 5px;
}

button[type="submit"] {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;
  border: 2px solid black;
  border-radius: 40px;
  background-color: rgb(0, 0, 150);
  color: white;
}

button[type="submit"]:hover {
  cursor: url(Images/pagani-cursor.png) 55 55, auto;
  background-color: green;
  color: white;
  transition: .5s;
}


/*Car CSS code - Main content of page*/

.cars {
  display: flex;
  flex-direction: column;
}

.car-name {
  margin-top: 0px;
}

.car-stats {
  margin-top: 0px;
  margin-bottom: 5px;
}

.car-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  padding: 20px;
  border: 2px solid black;
  border-radius: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.car {
  width: 300px;
  border-radius: 40px;
  border: 2px solid black;
}


/*Footer CSS code*/

footer {
  background-color: rgb(70, 70, 70);
  height: 75px;
  width: 100%;
  position: absolute;
  border: 2px solid black;
  display: flex;
  justify-content: center;
}

.footer-text {
  color: white;
  margin-top: 0;
  font-family: 'Merriweather', serif;
}

.social-icons {
  display: flex;
}

.social-icons a img {
  max-width: 26px;
  height: auto;
  margin: 2px 5px;
}


/*Code for larger screens*/

@media screen and (min-width: 800px) {
  .cars {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 20px;
  }
}

<!DOCTYPE html>
<html lang="en">
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Venny's Cars</title>
  <!--  <link href="main.css" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" rel="stylesheet">-->
</head>

<body>
  <!--Below is the logo and title for the website-->
  <header class="header">
    <img src="Images/VennyDolphin.jpg" alt="Venny with dolphin" class="logo">
    <div class="under-logo">
      <img src="Images/lambo-logo-reverse.png" alt="outline of car" class="lambo-logo">
      <h1 class="title">Venny's Cars</h1>
      <img src="Images/lambo-logo.png" alt="reverse outline" class="lambo-logo">
    </div>
  </header>
  <!--Below is the Navigation Bar-->
  <nav class="navbar">
    <div class="nav-links"><a href="#">Link</a></div>
    <div class="nav-links"><a href="#">2nd Link</a></div>
    <div class="nav-links"><a href="#">3rd Link</a></div>
  </nav>
  <!--Here is the signup form-->
  <main>
    <form class="signup-form" action="newsletter.html" method="POST">
      <h1 class="signup-title">Sign Up for our Newsletter!</h1>
      <fieldset class="name-email-input">
        <div>
          <label>First Name:</label>
          <input type="text" id="firstname" name="firstname" placeholder="John" required>
        </div>
        <div>
          <label>Email:</label>
          <input type="email" id="email" name="email" placeholder="John@123.com" required>
        </div>
        <!--Signup Button-->
        <div class="button">
          <button type="submit" id="button">Sign Up!</button>
        </div>
      </fieldset>
    </form>
    <!--Below is our section for the cars-->
    <div class="cars">
      <!--Porsche 911 GT2 RS-->
      <div class="car-display">
        <h1 class="car-name">Porsche 911 GT2 RS</h1>
        <img src="Images\gt2rs.jpg" class="car gt2rs" alt="Porshe 911 GT2 RS">
        <ul>
          <h2 class="car-stats">Car Stats</h2>
          <li>Engine: 3.8-liter Twin-Turbo Flat 6</li>
          <li>HP: 690hp @ 7000rpm</li>
          <li>Torque: 553 lb-ft @ 2500rpm</li>
          <li>Price: 3,200</li>
        </ul>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/PwAhAFyMwk8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <!--Koenigsegg One:1-->
      <div class="car-display">
        <h1 class="car-name">Koenigsegg One:1</h1>
        <img src="Images/k1.jpg" class="car k1" alt="Koenigsegg One:1">
        <ul>
          <h2 class="car-stats">Car Stats</h2>
          <li>Engine: 5.0-liter Twin-Turbo V8</li>
          <li>HP: 1341hp @ 7500rpm</li>
          <li>Torque: 1010 lb-ft @ 6000rpm</li>
          <li>Price: ,850,000</li>
        </ul>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/7X1z-1xwquk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <!--Porsche 918 Spyder-->
      <div class="car-display">
        <h1 class="car-name">Porsche 918 Spyder</h1>
        <img src="Images/918.jpg" class="car 918" alt="Porshe 918 Spyder">
        <ul>
          <h2 class="car-stats">Car Stats</h2>
          <li>Engine: 4.6-liter V8 Hybrid</li>
          <li>HP: 887hp @ 8600rpm</li>
          <li>Torque: 944 lb-ft @ 5000rpm</li>
          <li>Price: 5,000</li>
        </ul>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/nSqzp3kdAm4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
    </div>
  </main>
  <!--Below is the footer-->
  <footer>
    <h2 class="footer-text">Follow me for new additions!</h2>
    <div class="social-icons">
      <a href="#" target="_blank"><img src="http://www.msskincarebeautysalon.com/images/facebook-button-blue.png" alt="facebook"></a>
      <a href="#" target="_blank"><img src="Images/insta.png" alt="insta"></a>
    </div>
  </footer>
  <script src="script.js"></script>
  <!--Link to Javascript-->
  <script src="action.js"></script>
</body>

</html>

图标不会显示在桌面计算机的页脚中

Icons will NOT show in footer on desktop computer

html

icons

main

image

footer