Question

我正在学习使用CSS中指定的参数创建div容器的基本知识。问题是，即使使用其他Web引擎打开，也不会相应显示。我正在尝试将其与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>

Answer 1

您必须使用如下所示的标准HTML模板包装<div>。

<!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:元素上放置width:或<div></div> CSS规则。他们只占用其内容的空间。由于他们目前没有任何内容，因此他们的样式不会显示在屏幕上。

因此，您需要在div内放置一些文本，以便浏览器呈现它们，然后您才能看到背景色。

再看看#content中的“ background-color：”规则。

希望这对您有所帮助，祝您黑客愉快！

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

1 个答案: