问如何去除网页中各部分之间的背景
EN

Stack Overflow用户

提问于 2018-09-11 02:25:03

回答 3查看 123关注 0票数 1

我在弄清楚这件事上有点困难。在我正在工作的网站上，在两个部分和页脚之间，似乎有一个背景颜色显示的空白空间，我想不出如何摆脱它，所以部分和页脚坐在一起，它们之间没有空间。如果有人能检查一下代码，我将不胜感激。

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background-color: #5CDB95;
  font-family: 'Gamja Flower', sans-serif;
  line-height: 20px;
}

h1 {
  margin: 10px 0px 24px;
  font-family: 'Petit Formal Script', sans-serif;
  color: #2d3338;
  font-size: 69px;
  line-height: 54px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0px;
  text-shadow: none;
}

h2 {
  margin: 0px 0px 10px;
  font-size: 32px;
  line-height: 36px;
  font-weight: 400;
  text-shadow: none;
}

p {
  color: #05386B;
}

.button {
  width: 35%;
  height: 54px;
  background-color: #1abc9c;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
}

.subtitle {
  margin-right: 89px;
  margin-bottom: 63px;
  margin-left: 89px;
  font-family: 'Times New Roman';
  color: black;
  font-size: 25px;
  line-height: 31px;
  font-weight: 400;
}

.field {
  width: 70%;
  height: 54px;
  padding-left: 20px;
  border: 0px solid #000;
  font-size: 16px;
}

.sign-up-form {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  text-align: center;
}

.header-section {
  height: 100%;
  padding-top: 104px;
  background-color: #5CDB95;
  text-align: center;
}

.bars-wrapper {
  background-color: #1abc9c;
}

.bar {
  width: 14.285%;
  height: 7px;
  float: left;
  background-color: #1abc9c;
}

.bar._2 {
  background-color: #f2ca27;
}

.bar._3 {
  background-color: #e67e22;
}

.bar._4 {
  background-color: #16a085;
}

.bar._5 {
  background-color: #2980b9;
}

.bar._6 {
  background-color: #e74c3c;
}


/*will be using this to hide parts of image
    .image-crop {
      overflow: hidden;
      height: 260px;
    }
    */

.about-section {
  padding: 80px 0 80px;
  background-color: white;
  margin: 50px 0px 50px;
  font-size: 20px;
}

.about-section h2 {
  font-size: 40px;
  font-weight: 800;
  color: #033048;
  margin-bottom: 40px;
  text-align: center;
}

.about-book p {
  font-size: 22px;
  font-weight: 600;
}

.aboutus {
  padding: 80px 0 80px;
  background-color: white;
  margin: 50px 0px 50px;
  font-size: 20px;
  text-align: center;
}

footer {
  background-color: black;
  padding: 80px 0 80px;
  margin: 50px 0px 50px;
  text-align: center;
  font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
  <title>Raijin Studios</title>
</head>
<header>

  <body>
    <div class="bars-wrapper">
      <div class="bar"></div>
      <div class="bar _2"></div>
      <div class="bar _3"></div>
      <div class="bar _4"></div>
      <div class="bar _5"></div>
      <div class="bar _6"></div>
      <div class="bar"></div>
    </div>
    <div class="header-section">
      <h1 class="heading">Raijin Studios</h1>
      <p class="subtitle" onmouseover="changeColor(this)" onmouseout="changeColor(this)">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>

    </div>
    <div class="sign-up-form">
      <form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
    </div>
</header>

<!--This is where an image of the new book will go -->

<section class="about-section">
  <h2>About The Water King!</h2>
  <p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
    help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>


<section class="aboutus">
  <p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>

<footer>
  <p>©Raijin Studios 2018.</p>
  <!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>

</html>

html

css

回答 3

Stack Overflow用户

发布于 2018-09-11 02:51:00

1)只需删除sections的margins，增加填充即可；

或

2)您可以将正文背景设置为白色，然后更改add background color和padding bottom to sign-up-form

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: 'Gamja Flower', sans-serif;
  line-height: 20px;
}

h1 {
  margin: 10px 0px 24px;
  font-family: 'Petit Formal Script', sans-serif;
  color: #2d3338;
  font-size: 69px;
  line-height: 54px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0px;
  text-shadow: none;
}

h2 {
  margin: 0px 0px 10px;
  font-size: 32px;
  line-height: 36px;
  font-weight: 400;
  text-shadow: none;
}

p {
  color: #05386B;
}

.button {
  width: 35%;
  height: 54px;
  background-color: #1abc9c;
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  margin-top: 10px;
}

.subtitle {
  margin-right: 89px;
  margin-bottom: 63px;
  margin-left: 89px;
  font-family: 'Times New Roman';
  color: black;
  font-size: 25px;
  line-height: 31px;
  font-weight: 400;
}

.field {
  width: 70%;
  height: 54px;
  padding-left: 20px;
  border: 0px solid #000;
  font-size: 16px;
}

.sign-up-form {
  display: inline-block;
  width: 100%;
  font-size: 16px;
  text-align: center;
  background: #5CDB95;
  padding-bottom: 50px;
}

.header-section {
  height: 100%;
  padding-top: 104px;
  background-color: #5CDB95;
  text-align: center;
}

.bars-wrapper {
  background-color: #1abc9c;
}

.bar {
  width: 14.285%;
  height: 7px;
  float: left;
  background-color: #1abc9c;
}

.bar._2 {
  background-color: #f2ca27;
}

.bar._3 {
  background-color: #e67e22;
}

.bar._4 {
  background-color: #16a085;
}

.bar._5 {
  background-color: #2980b9;
}

.bar._6 {
  background-color: #e74c3c;
}


/*will be using this to hide parts of image
    .image-crop {
      overflow: hidden;
      height: 260px;
    }
    */

.about-section {
  padding: 80px 0 80px;
  background-color: white;
  margin: 50px 0px 50px;
  font-size: 20px;
}

.about-section h2 {
  font-size: 40px;
  font-weight: 800;
  color: #033048;
  margin-bottom: 40px;
  text-align: center;
}

.about-book p {
  font-size: 22px;
  font-weight: 600;
}

.aboutus {
  padding: 80px 0 80px;
  background-color: white;
  margin: 50px 0px 50px;
  font-size: 20px;
  text-align: center;
}

footer {
  background-color: black;
  padding: 80px 0 80px;
  margin: 50px 0px 50px;
  text-align: center;
  font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Gamja+Flower" rel="stylesheet">
  <title>Raijin Studios</title>
</head>
<header>

  <body>
    <div class="bars-wrapper">
      <div class="bar"></div>
      <div class="bar _2"></div>
      <div class="bar _3"></div>
      <div class="bar _4"></div>
      <div class="bar _5"></div>
      <div class="bar _6"></div>
      <div class="bar"></div>
    </div>
    <div class="header-section">
      <h1 class="heading">Raijin Studios</h1>
      <p class="subtitle">Raijin Studios is excited to announce our new upcoming novella, The Water King.</p>

    </div>
    <div class="sign-up-form">
      <form name="sign-up"><input type="email" name="email" placeholder="Enter Your Email" maxlength="256" required="" class="field"><input class="button" type="submit" value="Get Notified"></form>
    </div>
</header>

<!--This is where an image of the new book will go -->

<section class="about-section">
  <h2>About The Water King!</h2>
  <p class="about-book">Beginning in a fictional realm, one heir to the worlds throne is casted to earth by his best friend - his brother, the one he trusted most. When losing his memory causes the mysterious man to forget who he his and where he came from, he turns to the
    help of a strange girl who finds him and helps him remeber who he was and where he came from.</p>
</section>


<section class="aboutus">
  <p>This section will be about the fictionous company. Similar to the about pages on websites.</p>
</section>

<footer>
  <p>©Raijin Studios 2018.</p>
  <!--i will be added more features and elements to both the footer and the sections of the website. For intereactivity, I am going to try to make the color bar at the top fade in and out as well -->
</footer>
</body>

</html>

票数 2

Stack Overflow用户

发布于 2018-09-11 02:33:05

使用margin: 0px;节的页边距

票数 1

Stack Overflow用户

发布于 2018-09-11 02:42:23

这就对了。

   * {
        box-sizing: border-box;
        margin: 0;
    }

    body {
        background-color: #5CDB95;
        font-family: 'Gamja Flower', sans-serif;
        line-height: 20px;
    }

    h1 {
        margin: 10px 0px 24px;
        font-family: 'Petit Formal Script', sans-serif;
        color: #2d3338;
        font-size: 69px;
        line-height: 54px;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0px;
        text-shadow: none;
    }

    h2 {
        margin: 0px 0px 10px;
        font-size: 32px;
        line-height: 36px;
        font-weight: 400;
        text-shadow: none;
    }

    p {
        color: #05386B;
    }

    .button {
        width: 35%;
        height: 54px;
        background-color: #1abc9c;
        color: #fff;
        font-size: 16px;
        font-weight: 300;
        margin-top: 10px;
    }

    .subtitle {
        margin-right: 89px;
        margin-bottom: 63px;
        margin-left: 89px;
        font-family: 'Times New Roman';
        color: black;
        font-size: 25px;
        line-height: 31px;
        font-weight: 400;
    }

    .field {
        width: 70%;
        height: 54px;
        padding-left: 20px;
        border: 0px solid #000;
        font-size: 16px;
    }

    .sign-up-form {
        display: inline-block;
        width: 100%;
        font-size: 16px;
        text-align: center;
    }

    .header-section {
        height: 100%;
        padding-top: 104px;
        background-color: #5CDB95;
        text-align: center;
    }

    .bars-wrapper {
        background-color: #1abc9c;
    }

    .bar {
        width: 14.285%;
        height: 7px;
        float: left;
        background-color: #1abc9c;
    }

    .bar._2 {
        background-color: #f2ca27;
    }

    .bar._3 {
        background-color: #e67e22;
    }

    .bar._4 {
        background-color: #16a085;
    }

    .bar._5 {
        background-color: #2980b9;
    }

    .bar._6 {
        background-color: #e74c3c;
    }


    /*will be using this to hide parts of image
        .image-crop {
            overflow: hidden;
            height: 260px;
        }
        */

    .about-section {
        padding: 80px 0 80px;
        background-color: white;
        font-size: 20px;
    }

    .about-section h2 {
        font-size: 40px;
        font-weight: 800;
        color: #033048;
        text-align: center;
    }

    .about-book p {
        font-size: 22px;
        font-weight: 600;
    }

    .aboutus {
        padding: 80px 0 80px;
        background-color: white;
        font-size: 20px;
        text-align: center;
        margin-top:-50px;
    }

    footer {
        background-color: black;
        padding: 80px 0 80px;
        margin: 50px 0px 50px;
        text-align: center;
        font-size: 20px;
    }

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52263475

复制

相似问题

问如何去除网页中各部分之间的背景
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何去除网页中各部分之间的背景EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何去除网页中各部分之间的背景
EN