我如何將表格放置在木盒上？響應

這裏我想要什麼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

我如何將表格放置在木盒上？響應

回答

相關問題