图标将不会在台式机的页脚中显示

问题描述 投票：-1回答：1

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

在我的桌面上，如果我将图标移到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="[email protected]" 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: $293,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: $2,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: $845,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>
html image icons footer main
1个回答
0
投票

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

关于路径，我使用完整域名输入了网站上Facebook图标的路径，并显示了该图标。它很大，所以我为您的社交图标图像添加了一个类以减小尺寸。根据您的图标大小调整或删除它。我看到的有关图标未出现的主要问题是，您需要更正代码中的文件路径。

希望这会有所帮助

* {
  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="[email protected]" 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: $293,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: $2,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: $845,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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.