如何在 HTML5 中创建一个包含一段文本的框

Question

我一直在做一个学校项目，我正在为学校设计一个网页，我一直在尝试创建一个包含一段文本的框。我怎么做？我试过在网上看，但我仍然很难创建一个。

这是段落框的 band.css 样式表中的信息：

div {
   width: 80%;
   padding: 10px;
   border: 5px solid gray;
   margin: 0;
}

这里是程序中我想放在一个框中的段落的代码：

<p style="text-align: center">
    Manfred Mann's Earth Band is an English rock band founded by Manfred Mann, a musician from South Africa. 
    <br> They are known for doing covers of Bruce Springsteen songs.
</p>

Answer 1

您需要将 p 标签放在 div 容器中，并创建一个类或 id 来标识用于样式化的 div。

<!-- html -->
<div class="text-box">
 <p style="text-align: center">Manfred Mann's Earth Band is an English rock band founded by Manfred Mann, a musician from South Africa. 
 <br> They are known for doing covers of Bruce Springsteen songs.
 </p>
</div>

<!-- css -->
div.text-box {
 width: 80%;
 padding: 10px;
 border: 5px solid gray;
 margin: 0;
}

https://jsfiddle.net/jasonbruce/efLbp1y7/1/

Answer 2

div {
   width: 80%;
   padding: 10px;
   border: 5px solid gray;
   margin: 0;
}

在这里，您将此样式赋予您将在 HTML 中使用的每个

<div>

元素，因此每次您使用

<div>

元素时，它都会以上述样式出现
所以你可以用

<p>

元素包裹你的

<div>

元素：

<div>
  <p style="text-align: center">
    Manfred Mann's Earth Band is an English rock band founded by Manfred Mann, a musician from South Africa. 
    <br> They are known for doing covers of Bruce Springsteen songs.
  </p>
</div>

更好的方法是创建一个自定义类并将其提供给您想要的

div

：

.custom {
   width: 80%;
   padding: 10px;
   border: 5px solid gray;
   margin: 0;
}

并以这种方式使用它：

<div class="custom">
  <p style="text-align: center">
    Manfred Mann's Earth Band is an English rock band founded by Manfred Mann, a musician from South Africa. 
    <br> They are known for doing covers of Bruce Springsteen songs.
  </p>
</div>