Question

我正在尝试在一个较大的框（如image中的框）中创建一个标题框，但是只有一张图片可以继续播放。

任何代码段将不胜感激。

Answer 1

.parent {
	border: 1px solid #ddd;
	background: #fff;
}
.heading {
	padding: 10px;
	background-color: #0A7CDD;
	color: #fff;
  margin-top: 0;
}

p {
	color: #333;
	font-size: 16px;
  padding: 0 10px;
}

<div class="parent">
	<h3 class="heading">Other terms</h3>
	<p>your text1 will go here,put all the text here.</p>
	<p>your text2 will go here,put all the text here.</p>	
</div>

尽管这是错误的提问方式，您必须自己尝试一些事情，但是我只是有空，所以这里适合您。

Answer 2

我之所以提供此帮助，是因为您似乎在努力入门，但是您确实应该记下并分析下面的代码，并尝试了解每个元素的作用。

请记住，StackOverflow不是编码服务，如果您对所要实现的目标不了解，将很难获得帮助。

.Box {
  display: flex;
  flex-direction: column;
}

.Head {
  background: #0a7cdd;
  color: #fff;
  padding: 10px;
}

.Body {
  border: 1px solid #ddd;
  padding: 10px;
}

<div class="Box">
  <div class="Head">
    <h2>Other Terms</h2>
  </div>
  <div class="Body">
    <p>My credits must remain intact at the bottom of the auction template.</p>
    <p>Please email me with any questions or if you need help with template installation.</p>
  </div>
</div>

您应查看的主要html元素为：

div h2 p

这里是一个不错的起点： https://www.w3schools.com/tags/tag_div.asp

Answer 3

不是您的“问题”的100％解决方案，您可以在其中逐步解决问题，而更多地是关于如何帮助自己解决问题的提示。

将视觉效果转换为代码时，我倾向于做的是“大声思考”我所看到的内容，并尽力将其转录为代码。在您的情况下，您会清楚地看到蓝色的标题部分，在其下方的是文本部分。它们都包裹在带有边框的框中。

通过定义这些不同的部分，就很容易获得关于如何在代码中进行结构化的想法：

<div class="box">
   <div class="header-section">
      <h1> Header Text </h1>
   </div>
   <div class="text-section">
      <p> Heres some text </p>
   </div>
</div>

然后继续按照自己的喜好对其样式进行设置。

如何在更大的盒子中创建标题框？

3 个答案: