css-跨页面制作背景跨度？

Question

我正在尝试制作跨越页面的标题。

我看了整遍互联网并尝试了他们所说的工作，但事实并非如此。至少对我而言。

这就是我得到的：

这是我的代码：

/* USEFUL STUFF
green colour #1(like the .BigTitle): #00CC00
cream colour: #FFFFCC
*/
body{
  background-color:#FFFFCC;
}
.BigTitle{
  background-color: #00CC00;
  width: 100%;
  text-align: center;
}

<div class="BigTitle"><h1>Loriem Ipsum</h1></div>
<div class="sidebar">
  <ul>
    <b>
      <li>STUFF</li>
      <li>STUFF</li>
      <li>STUFF</li>
      <li>STUFF</li>
    </b>
  </ul>
</div>
<div class="what">
  <h1>Lorium Ipsum</h1>
  <p>Bacon ipsum dolor amet fugiat t-bone kevin prosciutto. Duis biltong filet mignon shankle bacon ground round, commodo salami do. Ex qui pastrami cow, aute anim alcatra. Jerky sausage ullamco tail, aliquip et nostrud excepteur beef ad cupidatat sint filet mignon chicken.</p>
  <p>Turducken meatloaf ham hock nulla meatball. Ullamco qui officia quis filet mignon fugiat. Flank irure pig, sausage consectetur shoulder ea incididunt. Aliqua eu kielbasa andouille aute mollit prosciutto enim shankle rump irure. Bresaola consectetur aute, laboris beef short loin dolore. Incididunt sed labore ad fatback, voluptate dolore mollit ea pancetta tongue.</p>
  <p>Lorem esse kevin dolor jowl eiusmod shoulder deserunt kielbasa swine nisi et pancetta sunt ribeye. Est aliqua flank dolore dolor pork chop turducken in ex. Fugiat shank pork belly jowl id, irure turducken pork loin pork velit laborum tri-tip. Tenderloin ribeye proident nulla hamburger irure mollit short ribs ball tip pastrami. Pork chicken ex pastrami.</p>
  <p>Nulla tempor pork chicken in ullamco eiusmod consectetur ut. Venison beef ribs drumstick, shank in tenderloin dolor. Boudin aute proident sed, cow deserunt tongue sirloin porchetta aliquip dolor dolore aliqua chicken. Alcatra ham laboris pig aute landjaeger in occaecat anim consectetur tempor. Brisket nostrud commodo magna reprehenderit, ribeye nisi pancetta esse qui. Ex hamburger quis, leberkas meatloaf turkey shoulder sint filet mignon picanha nulla sirloin.</p>
  <p>Veniam adipisicing meatloaf, esse lorem doner andouille sirloin est chuck ad pariatur. Aliqua enim ham labore brisket leberkas. Drumstick id tri-tip, fugiat sint bresaola aliqua hamburger ullamco pig anim chicken cow aliquip boudin. Cillum venison non, picanha incididunt esse ex bresaola andouille irure anim jerky. Dolor corned beef leberkas, velit voluptate pork loin sunt pork pariatur.</p>
</div>

Answer 1

在CSS正文{margin：0px}

中明确设置

Answer 2

这是

的工作DEMO

您需要在margin

中操纵CSS属性

Answer 3

有很多方法可以达到你所需要的。 最简单的是设置

body {
    margin: 0;
}

但是这样，内容中的文本将从页面的最边缘开始。因此，您还需要对文本内容本身或其包装器应用一些边距或填充。

另一种方法是重新定义标题的填充和边距，以便它超过身体的边缘。您需要做的就是编辑.BigTitle类，如下所示：

.BigTitle{
    background-color: #00CC00;
    width: 100%;

    padding-left: 8px;
    margin-left: -8px;
    padding-right: 8px;
    margin-right: -8px;
}

这取决于你选择的方式。

Answer 4

来自CSS Reset：

  

如果您不知道，每个浏览器都有自己的默认用户   代理'样式表，用于使无格式网站显得更多   清晰可辨。例如，大多数浏览器默认情况下将链接设为蓝色和   访问链接紫色，给表格一定数量的边框和   填充，将可变字体大小应用于H1，H2，H3等等   几乎所有东西的填充量。

由于您未重置CSS，因此您必须让浏览器的默认样式规则干扰您的CSS。

您可以使用CSS重置来解决您的问题，或者只是将margin: 0;应用于body元素。

body {
  background-color: #FFFFCC;
  margin: 0;
}