如何在頁面頂部創建一個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; }