我想将表单定位到木箱上，响应式。
这是我想要的照片:
问题是它没有响应。那就是发生的事情:
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
{
填充:0px；
边距:0px；
}
body
{
填充:0px；
边距:0px；
背景颜色:白色；
最小宽度:320px；
最小高度:480px；
}
#wrapperform
{
position:absolute；
填充:0px；
边距:0px；
宽度:100%；
高度:100%；
最小宽度:320px；
最小高度:480px；
背景图片:url("../imagenes/Contacto/nueva.jpg");
背景尺寸:封面；
-webkit-背景大小:覆盖；
-moz-背景大小:封面；
-o-背景尺寸:覆盖；
背景重复:不重复；
}
#contenedorLogo
{
职位:相对；
高度:15%；
宽度:100%；
文本对齐:居中；
上边距:2%；
}
＃标识
{
职位:相对；
顶部:0px；
高度:98%；
宽度:自动；
边距顶部:0px；
}
#logo:悬停
{
高度:100%；
宽度:自动；
}
#接触
{
职位:相对；
顶部:0%；
右:0%；
宽度:90%；
高度:82%；
margin :自动；
边界半径:5px；
文本对齐:居中；
背景颜色:rgba(127,68,112,0.85)；
}
#contacto 输入，#contacto 文本区域
{
显示: block ；
}
输入
{
白颜色;
边框半径:5px 5px 5px 5px；
margin-bottom:5%;
左边距:10%；
宽度:80%；
最小高度:30px；
字体大小:20px；
font-family:"Century Gothic","Century Gothic normal";
字体样式:正常；
自动换行:断字；
背景颜色:rgb(181,138,181)；
}
::-webkit-输入占位符
{
白颜色;
}
:-moz-占位符
{
白颜色;
}
::-moz-占位符
{
白颜色;
}
:-ms-输入占位符
{
白颜色;
}
.占位符{
白颜色;
}
#Enviar
{
高度:40px；
宽度:82%；
}
文本区域
{
调整大小:无；
宽度:80%；
最小高度:125px；
背景颜色:rgb(181,138,181)；
字体大小:20px；
font-family:"Century Gothic","Century Gothic normal";
字体样式:正常；
白颜色;
边框半径:5px 5px 5px 5px；
溢出:自动；
左边距:10%；
margin 底部:4%；
}
h1
{
职位:相对；
文本对齐:居中；
底部边距:0px；
上边距:2%；
填充顶部:1%；
底边距:1%；
白颜色;
font-family:"Century Gothic","Century Gothic bold";
字体样式:正常；
}
@media(最小宽度:1024px)
{
#wrapperform
{
宽度:100vw；
高度:100vh；
}
#contenedorLogo
{
position:absolute；
高度:100%；
宽度:15%；
边距顶部:0px；
}
＃标识
{
position:absolute；
顶部:35%；
左:0px；
高度:自动；
宽度:100%；
}
#logo:悬停
{
宽度:110%；
高度:自动；
}
#接触
{
position:absolute；
顶部:8%；
右:5%；
宽度:39%；
高度:90%；
}
文本区域
{
margin 底部:2%；
}
h1
{
底部边距:0px；
填充顶部:1%；
底边距: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;
}
关于html - 我怎样才能把表格放到木箱上？ react 灵敏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37673161/