Question

我正在尝试使用flexbox和css创建一个完整的模板。我是新来的...

我已经尝试了所有方法，但是我无法使代码显示在图形中（如果有意义）。请告知。

     <!DOCTYPE html>
     <html lang="en">
      <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Flexbox</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header class="flex-header">
        HEADER
    </header>
    <main class="flex-main">
        <nav class="flex-nav">
            SIDENAV
        </nav>
        <article class="flex-article">
            MAIN CONTENT
        </article>
        <aside class="flex-aside">
            SIDEBAR
        </aside>

    </main>
  <footer class="flex-footer">
    FOOTER
</footer> 

</body>
</html>

css文件：

* {
margin: 2px; 
}
body {
font-size: 24px;
color: white;`
height: 100vh;
text-align: center;
}
.flex-header {
background-color: #5070B5;
padding-top: 3rem;
padding-bottom: 3rem;   
}
.flex-main {

}
.flex-nav {
background-color: #B95F21;
padding-top: 3rem;
}
.flex-article {
background-color: #81A43C;
padding-top: 3rem;
}
.flex-aside {
background-color: #B95F21;
padding-top: 3rem;
}
.flex-footer {
background-color: #5070B5;
padding-top: 3rem;
scroll-padding-bottom: 3rem;
}

仅显示文本，不显示图形。

Answer 1

请检查CSS color: white;`的第6行。

该行的末尾有一个无效字符`。此类错误可能导致浏览器停止处理任何其他CSS。

为什么flexbox会这样？

1 个答案: