Question

我最近开始学习html和css，但我似乎无法弄清楚哪种方法最适合完成某项任务。

我想在页面顶部创建一个框，在一定高度从左到右覆盖整个屏幕。在框内，我想要一个文本，可以从框中单独控制属性。

因此，如果创建了2个div并分配了2个ID，则一个用于文本，一个用于框。并使用CSS修改每个属性。

到目前为止我工作正常吗？

Answer 1

您必须添加包含该文本的任何标记。这是最好的解决方案。

示例：

<header>
   <div class="content">
        <p>some text</p>
   </div>
</header>

和CSS

header { width: 100%; padding: 20px 0; }
header .content { width: 1000px; margin: auto; }
header .content p { font-size: 22px; color: #000; }

Answer 2

你是对的。但是如果您使用类，您将能够在同一页面上多次重复使用它们而不会发生任何冲突。

当您在页面上设置任何样式时，您将使用包装元素和/或类/ id来控制它的显示方式。

＆＃13;

.outer {
  background: yellow;
  padding: 3em 0;
}
.outer.red {
  background: red;
  height: 60px;
}
.inner {
  background: green;
  width: 500px;
  margin: 0 auto;
  color: #fff
}
.inner p {
  border-bottom: 2px solid blue;
}

＆＃13;

<div class="outer">
  <div class="inner">
    <p>Did he speak to you? Would you just answer? What things? What people? A month ago, Gus was trying to kill both of us. And now, he pulls you out of the lab and employs you as... what... a, an assistant gunman? A tough guy? Does that make any sense
      to you? He says he sees something in you. What kind of game is he playing. Does he think you're that naïve? He can't truly think that you'd forget... let alone Gale, let alone Victor... and all the horror that goes along with all of that.</p>

    <p>It's enough. This is still the best way. You go after him with a gun, you'll never get out of it alive. But with this... you slip it into his food or drink, there shouldn't be any taste or smell... thirty-six hours later... poof. A man his age, working
      as hard as he does... no one will be surprised. Mike can have his suspicions, but that's all they'll be. Please, one homicidal maniac at a time.</p>
  </div>
</div>

<div class="outer red">
</div>

<div class="inner">
  <p>Did he speak to you? Would you just answer? What things? What people? A month ago, Gus was trying to kill both of us. And now, he pulls you out of the lab and employs you as... what... a, an assistant gunman? A tough guy? Does that make any sense to
    you? He says he sees something in you. What kind of game is he playing. Does he think you're that naïve? He can't truly think that you'd forget... let alone Gale, let alone Victor... and all the horror that goes along with all of that.</p>

  <p>It's enough. This is still the best way. You go after him with a gun, you'll never get out of it alive. But with this... you slip it into his food or drink, there shouldn't be any taste or smell... thirty-six hours later... poof. A man his age, working
    as hard as he does... no one will be surprised. Mike can have his suspicions, but that's all they'll be. Please, one homicidal maniac at a time.</p>
</div>

＆＃13;

如何在页面顶部创建一个HTML框？

2 个答案: