Meine Seite hat einen Titel im HTML, der jedoch nicht sichtbar ist

Question

Ich habe also gerade erst mit dem Programmieren begonnen, also verurteile mich nicht. Ich versuche, meine Website mit vs-Code zu erstellen, ich verwende HTML und CSS, aber der Titel und die Schaltfläche, die ich in die obere linke Ecke des Codes einfügen möchte, werden im Browser nicht angezeigt Ich habe im Internet gesucht und kann es scheinbar nicht verstehen. Ich verwende den Google Chrome-Browser, um meinen Code zu debuggen.

Das ist der HTML-Teil:

 /* This is a reset stylesheet to ensure consistency across different browsers */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
    display: block;
 }
 body {
    line-height: 1;
 }
 ol, ul {
    list-style: none;
 }
 blockquote, q {
    quotes: none;
 }
 blockquote:before, blockquote:after,
 q:before, q:after {
    content: '';
    content: none;
 }
 table {
    border-collapse: collapse;
    border-spacing: 0;
 }
 /* Custom styles for the poster store website */
 body {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    background-color: white;
    color: #333;
   }

 header {
    background-color: #87CEFA;
    color: white;
    text-align: center;
    padding: 1em;
   }
 .header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
   }
 header h1 {
    margin: 0;
    font-size: 2em;
   }
 header .subtext {
    display: block;
    font-size: 1em;
    font-style: italic;
    color: white;
    margin-top: 10px;
   }

  
  

 nav {
    background-color: #87CEFA;
    padding: 0.5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed; /* this line adds */
    top: 0; /* this line adds */
    width: 100%; /* this line adds */
    z-index: 1; /* this line adds */
 }
 nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
 }
 nav li {
    margin-right: 1em;
 }
 nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
 }
 nav a:hover {
    color: #333;
 }

 /* Add this class to main section to create space for navigation bar */
 main {
    margin: 2em 0 0 0; /* this line changed */
 }


 main {
    margin: 2em;
 }

 section {
    margin-bottom: 2em;
 }

  h2 {
    margin-top: 1em;
    font-weight: normal;
 }

    ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }
    
    li {
    margin-bottom: 1em;
    flex: 1 0 30%;
    }
    
    img {
    width: 100%;
    max-width: 200px;
    height: auto;
    }
    
    button {
        background-color: #87CEFA;
        color: white;
        padding: 0.5em 1em;
        border: none;
        font-weight: bold;
        transition: all 0.3s ease;
        cursor: pointer;
        border-radius: 5px;
        box-shadow: 0px 2px 3px #888888;
        text-transform: uppercase;
        font-size: 0.9em;
    }
    
    button:hover {
        background-color: #4169E1;
        box-shadow: 0px 4px 6px #888888;
    }

    .menu-icon {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 30px;
        cursor: pointer;
    }
    .menu-icon:before,
    .menu-icon:after,
    .menu-icon div {
        position: absolute;
        top: 12px;
        right: 0;
        height: 3px;
        width: 30px;
        background: #333;
      }
    .menu-icon:before {
        transform: rotate(45deg);
      }
    .menu-icon:after {
        transform: rotate(-45deg);
      }

    
 .category-button {
    background-color: #87CEFA;
    color: white;
    padding: 0.5em 1em;
    border: none;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0px 2px 3px #888888;
    text-transform: uppercase;
    font-size: 0.9em;
    margin-right: 1em;
    display: block;
 }

 .category-button:hover {
    background-color: #4169E1;
    box-shadow: 0px 4px 6px #888888;
 }

    
    
    footer {
    background-color: #87CEFA;
    text-align: center;
    padding: 0.5em;
    color: #333;
    }
    
    /* Media Queries */
    @media (max-width: 767px) {
    nav ul {
    flex-direction: column;
    }
    nav li {
    margin-bottom: 0.5em;
    }
    section {
    flex: 1 0 100%;
    }
    li {
    flex: 1 0 100%;
    }
    }

<!DOCTYPE html>
<html>
  <head>
    <title>Poster Store</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <div class="header-container">
           <h1>Poster Store</h1>
           <div class="subtext">Inspiring and New</div>
      </div>
   </header>     
    <button class="menu-icon">
    </button>
       
      
    <nav>
      <ul>
        <li><a href="#featured">Featured Posters</a></li>
        <li><a href="#categories">Poster Categories</a></li>
        <li><a href="#about">About Us</a></li>
        <li><a href="#contact">Contact Us</a></li>
      </ul>
    </nav>
    <main>
      <section id="featured">
        <h2>Featured Posters</h2>
        <ul>
          <li>
            <h3>Poster 1</h3>
            <img src="https://i.etsystatic.com/27014418/r/il/dae7c0/2873452298/il_570xN.2873452298_j7zs.jpg" alt="Kid Cudi Man on the mood album cover poster">
            <p>Album cover poster</p>
            <button>Add to Cart</button>
          </li>
          <li>
            <h3>Poster 2</h3>
            <img src="https://images.squarespace-cdn.com/content/v1/5d210a3c8ae83700013f313b/1562529741621-YEQY08PGYXBIRU8EWBAV/Screen+Shot+2019-07-07+at+4.01.10+PM.png?format=2500w" alt="Kanye West MBDTF album cover poster">
            <p>Album cover poster</p>
            <button>Add to Cart</button>
          </li>
          <li>
            <h3>Poster 3</h3>
            <img src="https://i.ebayimg.com/images/g/hJoAAOSwNK5fEoCb/s-l1600.jpg" alt="Mac Miller Swimming album cover poster">
            <p>Album cover poster</p>
            <button>Add to Cart</button>
            <li>
            <h4>Poster 4</h4>
            <img src="https://d1csarkz8obe9u.cloudfront.net/themedlandingpages/tlp_hero_cool-posters-603bc3221337a524135e510d8ea4328a-1591125961.jpg" alt="cool">
            <p>Poster</p>
            <button>Add to Cart</button>
          </li>
          <li>
              <h5>Poster 5</h5>
              <img src="https://pbs.twimg.com/media/DwSC3wZUYAAQcUv.jpg" alt="cool">
              <p>Poster</p>
              <button>Add to Cart</button>
          </li>
        </ul>
      </section>
      <section id="categories">
        <h2>Poster Categories</h2>
        <ul>
          <li><a href="#" class="category-button">Lol</a></li>
          <li><a href="#" class="category-button">Category 2</a></li>
          <li><a href="#" class="category-button">Category 3</a></li>
        </ul>
      </section>
      <section id="about">
        <h2>About Us</h2>
        <p>A new poster store </p>
      </section>
      <section id="contact">
        <h2>Contact Us</h2>
        <p>feridtalibli854@gmail.com</p>
      </section>
    </main>
    <footer>
      <p>Copyright ©2022 Poster Store</p>
    </footer>
    <div class="menu-icon">
    </div>
  </body>
</html>

Als ich im Browser nachgesehen habe, gab es ein paar Dinge mit Linien darin, zum Beispiel habe ich einmal versucht, die Schriftart der Seite zu ändern und diese zu verwenden, aber ich glaube nicht, dass das das Problem ist...

Das ist der Teil (CSS):

body {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    background-color: white;
    color: #333;
   }

Ich versuche, oben in der Mitte der Seite so etwas zu sehen: „Poster Shop“ mit dem Untertext „Inspirierend und Original“.

Answer 1

标题在 Firefox 和 Chrome 中向我显示，我有“flex-direction：column;”添加以使元素一个在另一个之下。 该按钮为空，没有任何文字。

header {
  background-color: #87CEFA;
  color: white;
  text-align: center;
  padding: 1em;
}
.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100px;
}
header h1 {
  margin: 0;
  font-size: 2em;
}
header .subtext {
  display: block;
  font-size: 1em;
  font-style: italic;
  color: white;
  margin-top: 10px;
}

  

    
Poster Store
    
Inspiring and New