css - Twitter bootstrap : add margin, 位置图片和表单字段之间的空格

Question

开门见山，我是 CSS 的初学者。我发现 twitter bootstrap 看起来非常有前途且易于使用……好吧，不是这样。

请看this .

我需要:

1) 将 Logo (带有 X)放在现在下方的正方形内

2) 从顶部添加一些边距。现在，浏览器地址栏和 Logo /字段之间几乎没有空格

3) 在水平输入字段之间添加一些空格，例如。字段:“Seu Número de Celular:”、“Boleto Bancario”和“Conta de Consumo”。现在，它们几乎粘在一起了。

我也非常感谢有关 CSS 教程的任何好的建议。如果这很重要，我正在使用 Django。

谢谢你的帮助

Answer 1

W3C Schools是开始使用 CSS 的好点。

1) 了解position:relative 或使用background 并将框放置为background-url

.your-square-image /*You will need to put class="your-square-image" to the squarebox*/
{
position: relative;
top: -120px;
z-index: -1;
}

2) 只需使用 margin-top 调整距顶部的边距

.logo {
margin-top: 50px;
}

3) 对所有输入使用margin-right(或将其放入适当的class)

input 
{
margin-right: 15px;
}

上面的所有 css 都可以放在您的 html 页面的顶部或放在单独的 css 文件中并从您的页面链接它(推荐)。