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

Question

我最近开始学习HTML和CSS，但我似乎无法找出哪种方法是最好的完成某个任务。

我想在页面的顶部创建一个框，从左到右覆盖整个屏幕在一定的高度。在盒子里面，我希望有一个文本可以与盒子分开控制哪些属性。

所以如果已经创建了2个div并分配了2个ID，一个用于文本，一个用于框。并使用CSS来修改每个的属性。

我到目前为止工作的权利？

Answer 1

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

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

.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; 
 
}

<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>

Answer 2

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

例子：

<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; }