Question

我想将表格放在木箱上，反应灵敏。

这是我想要的照片：

问题在于它没有响应。这就是发生的事情：

这是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%;
}

}

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%; } }

感谢名单！

Answer 1

这应该可以解决问题并使其具有响应性。发送结果：）

  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;
    }

我怎样才能将表格放在木箱上？响应

1 个答案: