Question

我是HTML的新手，请原谅我，如果这个问题很愚蠢。我试图搜索，但我没有得到我寻找的结果。

以下是我正在寻找的图片的链接：https://i.gyazo.com/b2a8584eeb1841a71d023c605078f581.png

我不知道如何制作这样一个黄色的盒子（显然是通过css，但更多的是盒子方面，而不是颜色）。帮助

Answer 1

这种盒子基本上只是一个标准的<div>。

＆＃13;

.alert {
  background-color: #ff9800;
  padding: 10px;
}

＆＃13;

<div class="alert">
  <p>Warning: This website is in development.</p>
</div>

＆＃13;

Answer 2

我想你的意思是（黑色）背景上的位置。这是一种可能性：黑色背景是身体的背景。身体有100％的宽度（可以是任何值）。然后是一个带边距的div（黑色背景可见）和填充（在文本周围创建空间）和橙色背景。

除了将黑色背景赋予身体外，您还可以使用这些设置创建第二个DIV，并将其作为父元素包裹在第一个DIV周围。这非常有用，特别是如果你想要黑色背景不能编码整个窗口，那么你只需要将外部DIV设置为80％（或任何适合您需要的百分比或像素值）并给它一定的高度（百分比或像素））。

body {
  background: black;
  height: 100%;
}

.x {
  margin: 20px;
  padding: 20px;
  background: orange;
  line-height: 18px;
  height: 18px;
  font-size: 18px;
}

<div class="x">
  Warning: This website is in development.
</div>

如何为文本创建背景框，例如这个？

2 个答案: