如何为文本创建背景框,例如这个?

时间:2017-03-04 22:56:36

标签: html css

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

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

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

2 个答案:

答案 0 :(得分:2)

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

&#13;
&#13;
.alert {
  background-color: #ff9800;
  padding: 10px;
}
&#13;
<div class="alert">
  <p>Warning: This website is in development.</p>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我想你的意思是(黑色)背景上的位置。这是一种可能性: 黑色背景是身体的背景。身体有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>