首页 > 解决方案 > 形式从主体继承颜色。帮助表示赞赏

问题描述

我是 CSS 方面的超级新手,我不明白为什么我的表单出现颜色问题。我将一个表单包裹在一个 div 中,但我仍然可以看到身体的背景颜色。我尝试了一切,包括分别为每个 div 着色。这不是一个好习惯,而且并不是所有的东西都是彩色的,所以我需要一个更好的解决方案。你能帮我把颜色分类一下吗?太感谢了。

下面的代码:

* {
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
  color: lightblue;
}

#upper-text {
  margin-bottom: 1em;
  margin-top: 1em;
  text-align: center;
}

.form_style {
  margin-bottom: 1em;
  background-color: white;
}

#container {
  display: block;
  height: 450px;
  max-width: 350px;
  margin: 0 auto;
  box-shadow: 0 0 3px grey;
  background-color: white;
}

#form_wrap {
  margin-top: 60px;
  display: block;
  position: relative;
  background-color: white;
}

#space {
  margin-bottom: 10em;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="./js.js"></script>
  <title>Form</title>
</head>

<body>
  <div id="space"></div>
  <div id="container">
    <div id="upper-text">
      <h1>I dare you to Sign Up</h1>
      <p>It's free * </p>
    </div>
    <div id="form_wrap">
      <div class="form_style">
        <label>First Name</label><br>
        <input type="text" placeholder="Filip">
      </div>
      <div class="form_style">
        <label>Last Name</label><br>
        <input type="text" placeholder="Nakrętka">
      </div>
      <div class="form_style">
        <label>Email</label><br>
        <input type="email" placeholder="filipnak@piesek.pl">
      </div>
      <div class="form_style">
        <label>Email Again</label><br>
        <input name="email" type="text" id="confemail" placeholder="filipnak@piesek.pl">
      </div>
      <div class="form_style">
        <label>Password</label><br>
        <input name="password" type="text" id="pass">
      </div>
      <div class="form_style">
        <div id="btn">
          <button type="submit">Submit</button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

标签: htmlcssformscolorsbackground-color

解决方案


推荐阅读