Question

我想创建一个在中心有背景的网站，它的高度是整个网站，在背景的最后我要调整一个表单，所以我放大我们的网站仍然响应并且表单将大小更改为背景并仍位于相同位置

＆＃13;

@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Exo:100,200,400);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300);
html, body {
  height:4400px;
  width: 100%;
}

*
{
  margin:0;
  padding:0;
}
body
{
  background-color: white;
  background-image: url(images/myimage.jpg);
  background-size: auto 100%;

  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
}


#login-form
{
  margin-top: 3700px;
  position: relative;

}
table
{
  padding:10px;
  background: transparent  ;
  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
table tr,td
{
  padding:2px;
  //border:solid #e1e1e1 1px;
}
table tr td input[type=text]
{
  width:97%;
  height:45px;
  border:solid #e1e1e1 1px;
  border-radius:3px;
  padding-left:10px;
  font-family:'Exo', sans-serif;
  font-size:16px;
  background: transparent  ;

  transition-duration:0.5s;
  box-shadow: inset 0px 0px 1px rgba(0,0,0,0.4);
}
textarea {
  width: 97%;
  height: 135px;
  resize: none;
  border:solid #e1e1e1 1px;
  border-radius:3px;
  padding-left:10px;
  font-family:'Exo', sans-serif;
  font-size:16px;
  background: transparent  ;
  color: #909


    transition-duration:0.5s;
  box-shadow: inset 0px 0px 1px rgba(0,0,0,0.4);
}
table tr td input[type=checkbox]
{
  width:5%;
  height:15px;

}

table tr td input[type=submit]
{
  width:100%;
  height:45px;
  border:solid #e1e1e1 1px;
  border-radius:3px;
  padding-left:10px;
  font-family:'Exo', sans-serif;
  font-size:20px;
  background: #128195  ;
  color: #e63b5f;

  transition-duration:0.5s;
  box-shadow: inset 0px 0px 1px rgba(0,0,0,0.4);
}

table tr td button
{
  width:100%;
  height:45px;
  border:0px;
  background:rgba(12,45,78,11);
  background:-moz-linear-gradient(top, #595959 , #515151);
  border-radius:3px;
  box-shadow: 1px 1px 1px rgba(1,0,0,0.2);
  color:#f9f9f9;
  font-family:'Exo', sans-serif;
  font-size:18px;
  font-weight:bolder;
  text-transform:uppercase;
}
table tr td button:active
{
  position:relative;
  top:1px;
}
table tr td a
{
  text-decoration:none;
  color:#00a2d1;
  font-family:'Exo', sans-serif;
  font-size:18px;
}
label
{
  height: auto;
  text-decoration:none;
  color:#00a2d1;
  font-family:'Exo', sans-serif;
  font-size:18px;
}

＆＃13;

<div id="thesite">
  <center>
    <div id="login-form">
      <form action="" method="post">
        <table align="center" width="30%" border="0">
          <tr>
            <td><input class='inputs' type="text" placeholder="Full Name" name="first_name"></td>
          </tr>
          <tr>
            <td><input class='inputs' type="text" placeholder="Enter your Email" name="email"></td>
          </tr>
          <tr>
            <td><textarea  name="message" placeholder="Enter your Order"></textarea></td>
          </tr>
          <tr>
            <td><label><input type="checkbox" name="copy" value="value1">Send me copy from the order</label></td>
          </tr>
          <tr>
            <td><input type="submit" name="submit" value="Submit"></td>
          </tr>
        </table>
      </form>
    </div>
  </center>
</div>

＆＃13;

Answer 1

放大/缩小和使用表单时出现的问题来自HTML代码。您在__name__ == "__main__" - 元素中设置了width - 属性。通过HTML属性设置table元素已经过时，您应该使用CSS代替。此外，还应删除width和align等其他属性。

简单地改变：

border

为：

<table align="center" width="30%" border="0">

此类属性应仅使用CSS设置。删除那些修复了我的缩放问题（Chrome）。

另外，我认为您使用<table>所做的不是正确的方法。您应该尝试插入包含图片的新background-image，而不是使用div的{{1}}。另外，在插入background-image时，您不再需要将body添加到表单中。

制作具有背景和表格的响应式网站

1 个答案: