时间戳

首页 > 解决方案 > CSS div 元素容器参数未相应显示

html - CSS div 元素容器参数未相应显示

问题描述

我正在学习使用 CSS 中指定的参数创建 div 容器的基础知识。问题是，即使使用不同的网络引擎打开它，它也不会相应地显示出来。我正在练习将它与 clear 和 float 标签对齐。

#menu {
  background-color: #990000;
  height: 50%;
  width: 20%;
  float: left;
  border: 10px solid black;
  padding: 20px;
  text-align: left;
}

#content {
  bacground-color: green;
  height: 50%;
  width: 75%;
  float: right;
  border: 5px dashed rgb(0, 38, 153);
}

#footer {
  background-color: blue;
  height: 25%;
  width: 100%;
  clear: both;
  text-align: center;
}
<div id="menu">
  <h2>Music Genres</h2>
  <ul>
    <li>Rock</li>
    <li>Jazz</li>
    <li>Instrumental</li>
    <li>Pop</li>
  </ul>
</div>

<div id="content"></div>

<div id="footer"></div>

标签： htmlcss

解决方案

<div>您必须使用看起来像这样的标准 HTML 样板来包装您的 s。

<!DOCTYPE html>
<html>
  <head>
  <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

然后你必须将 CSS 连接到 HTML。

您可以在此处了解有关将 CSS 连接到 HTML 的不同方法的更多信息。

https://www.w3schools.com/css/css_howto.asp

使用上面文章中提到的“内部样式表”方法，它看起来像这样。

<!DOCTYPE html>
<html>
  <head>
    <title>repl.it</title>
    <style>

      #menu {
        background-color: #990000;
        height: 50%;
        width: 20%;
        float: left;
        border: 10px solid black;
        padding: 20px;
        text-align: left;
      }

      #content {
        bacground-color: green;
        height: 50%;
        width: 75%;
        float: right;
        border: 5px dashed rgb(0, 38, 153);
      }

      #footer {
        background-color: blue;
        height: 25%;
        width: 100%;
        clear: both;
        text-align: center;
      }
    </style>
  </head>
  <body>
      <div id="menu">
        <h2>Music Genres</h2>
      <ul>
        <li>Rock</li>
        <li>Jazz</li>
        <li>Instrumental</li>
        <li>Pop</li>
      </ul>
    </div>

    <div id="content"></div>

    <div id="footer"></div>
  </body>
</html>

请记住，您不会看到#footer 的蓝色背景或#content 的背景，因为除非您在元素上放置height:CSS规则width:。<div></div>它们只占用其内容的空间。由于它们当前没有任何内容，因此它们的样式不会呈现到屏幕上。

因此您需要在 div 中放置一些文本以供浏览器呈现它们，您将能够看到背景颜色。

再看一下#content 中的“background-color:”规则。

希望这会有所帮助，快乐的黑客！

推荐阅读