Fatal编程技术网
  • html/
  • Html 我怎样才能把表格放在木箱上？反应敏捷的

Html 我怎样才能把表格放在木箱上？反应敏捷的

html css

Html 我怎样才能把表格放在木箱上？反应敏捷的,html,css,frontend,responsive,Html,Css,Frontend,Responsive,我想把表格放在木箱上，反应灵敏 这是我想要的照片： 问题是它没有反应。事情就是这样： 以下是html的代码： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/contacto.css"> </head> <body> <div id="wrapperform"> &

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

这是我想要的照片：

问题是它没有反应。事情就是这样：

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

}

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