个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我想将表单定位到木箱上，响应式。
这是我想要的照片:
问题是它没有响应。那就是发生的事情:
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/
24
4
0
我想将表单定位到木箱上，响应式。 这是我想要的照片: Image1 问题是它没有响应。那就是发生的事情: Image2 html代码如下:
我试图让我的列/行按照我希望的方式工作。我有四个并排的元素，都排成一排。当屏幕变小并点击元素时，我希望它将它向下推到下一行。目前这很好用。问题是在它将元素向下推到下一行之后，它在第一行之后留下了一个很
我想以类似于游戏 Controller 的方式放置这 4 个按钮。我得到的结果如下。它们应该位于屏幕的中央底部，较小并且必须响应。我必须改变什么？我应该使用 #controls { position:
我正在尝试使我放置网站内容的 div 像这样具有响应性:sgcafe.com 如果您检查并调整浏览器的大小，内容将完全适合屏幕，根据浏览器的宽度使框变大或变小。 这是我目前得到的:http://jsf
您好，我被分配了一项棘手的任务。我需要让一个方形 div 到达顶部的一个点。基本上它看起来像一个正方形 div，顶部有一个宽三 Angular 形。请参阅下面的屏幕截图。顶部的深蓝色只是堆叠在白色 d
我正在处理这个页面: http://www.analog.la/test/ret/index2.html 基本上有一个包含 5 的分区。它们向左浮动以垂直排列，但我在如何调整媒体查询中的 CSS 方面
我是一名优秀的程序员,十分优秀！