我如何将表格放置在木盒上？响应

这里我想要什么PIC：

的问题是，它不响应。那是什么发生：

这里是HTML的代码：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/contacto.css"> 
</head> 
<body> 
    <div id="wrapperform"> 

     <div id="contenedorLogo"> 
      <a href="home.html"> 
       <img src="imagenes/logo33.png" id="logo" /> 
      </a> 
     </div> 

     <form id="contacto"> 
      <h1>CONTACTO</h1> 
      <input type="text" id="nombre" name="nombre" placeholder="NOMBRE" /> 
      <input type="text" id="email" name="email" placeholder="EMAIL"/> 
      <input type="text" id="telefono" name="telefono" placeholder="TELEFONO" /> 
      <textarea placeholder="MENSAJE" name="mensaje" id="mensaje"></textarea> 
      <input type="submit" value="Enviar" id="Enviar"/> 
     </form> 
    </div> 
</body> 
</html>

这里是CSS代码：

 html 
{ 
    padding:0px; 
    margin:0px; 
} 

body 
{ 

    padding: 0px; 
    margin: 0px; 
    background-color:white; 
    min-width:320px; 
    min-height:480px; 
} 

#wrapperform 
{ 
    position:absolute; 

    padding: 0px; 
    margin: 0px; 

    width: 100%; 
    height: 100%; 
    min-width:320px; 
    min-height:480px; 

    background-image: url("../imagenes/Contacto/nueva.jpg"); 
    background-size:cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-repeat: no-repeat; 
} 
#contenedorLogo 
{ 
    position:relative; 

    height:15%; 
    width:100%; 

    text-align:center; 

    margin-top:2%; 
} 

#logo 
{ 

    position:relative; 
    top:0px; 

    height:98%; 
    width:auto; 

    margin-top:0px; 
} 

#logo:hover 
{ 


    height:100%; 
    width:auto; 

} 

#contacto 
{ 
    position:relative; 
    top: 0%; 
    right:0%; 

    width: 90%; 
    height: 82%; 

    margin:auto; 

    border-radius:5px; 

    text-align: center; 

    background-color:rgba(127,68,112,0.85); 
} 

#contacto input, #contacto textarea 
{ 
    display: block; 
} 

input 
{ 

    color:white; 

    border-radius:5px 5px 5px 5px; 

    margin-bottom:5%; 
    margin-left:10%; 

    width:80%; 
    min-height:30px; 

    font-size:20px; 
    font-family:"Century Gothic","Century Gothic normal"; 
    font-style:normal; 
    word-wrap:break-word; 

    background-color:rgb(181,138,181); 

} 


::-webkit-input-placeholder 
{ 
    color: white; 
} 

:-moz-placeholder 
{ 
    color: white; 
} 

::-moz-placeholder 
{ 
    color: white; 
} 

:-ms-input-placeholder 
{ 
    color: white; 
} 
.placeholder{ 
    color:white; 
} 

#Enviar 
{ 
    height:40px; 
    width:82%; 
} 

textarea 
{ 
    resize:none; 

    width:80%; 
    min-height:125px; 

    background-color:rgb(181,138,181); 

    font-size:20px; 
    font-family:"Century Gothic","Century Gothic normal"; 
    font-style:normal; 
    color:white; 

    border-radius:5px 5px 5px 5px; 
    overflow:auto; 

    margin-left:10%; 
    margin-bottom:4%; 
} 



h1 
{ 

    position:relative; 

    text-align:center; 

    margin-bottom:0px; 
    margin-top:2%; 
    padding-top:1%; 
    padding-bottom:1%; 

    color:white; 

    font-family:"Century Gothic","Century Gothic bold"; 
    font-style:normal; 
} 


@media (min-width:1024px) 
{ 
#wrapperform 
{ 
    width: 100vw; 
    height: 100vh; 

} 

#contenedorLogo 
{ 
    position:absolute; 
    height:100%; 
    width:15%; 
    margin-top:0px; 

} 

#logo 
{ 
    position:absolute; 
    top:35%; 
    left:0px; 

    height:auto; 
    width:100%; 

} 

#logo:hover 
{ 
    width:110%; 
    height:auto; 
} 
#contacto 
{ 
    position: absolute; 

    top: 8%; 
    right:5%; 

    width: 39%; 
    height: 90%; 
} 
textarea 
{ 
    margin-bottom:2%; 
} 
h1 
{ 
    margin-bottom:0px; 
    padding-top:1%; 
    padding-bottom:2%; 
} 

}

感谢名单！

来源

2016-06-07 Federico leloir

您认为是否使用媒体查询？ –

这应该做的伎俩，使其响应。发送结果:)

background-image:url('../images/bg.png'); 
     background-repeat:no-repeat; 
     background-size:contain; 
     background-position:center; 

     img { 
     max-width: 100%; 
     height: auto; 
     display: block; 
     margin: 0 auto; 
    }

来源

2016-06-07 07:46:03 user3187715

http://pasteboard.co/1v49zsln.jpg 这里是背景，如果你想尝试： http://pasteboard.co/1v4fFCxX.jpg 谢谢！ –

现在尝试使用CSS进行背景大小的封面播放以获得最佳外观。 – user3187715

我如何将表格放置在木盒上？响应

回答

相关问题