Question

我正在尝试从头开始学习html / css，并开始了一个小项目。我在这里研究了这些主题，但我发现它有点先进，并希望有人可以一步一步向我解释，所以我可以从中学到一些东西：）

挑战1：我试图垂直获得完全流血的颜色。问题是我在颜色区域周围有一个白框。我已经使用下面的代码使它在左侧和顶部边缘到边缘。

margin-right: -8px;
margin-top: -8px;

但它不会一直走到右边的边缘。生病了我的html和css下面。任何帮助将不胜感激：）

HTML
<div id="feature1">
<div id="feature1_cont">Content for New Div Tag Goes Here</div>
</div>

CSS
#feature1 { 
height: 400px;
width: 100%;
float: left;
background-color: #0CC;
margin-left: -8px;
margin-right: -8px;

}

#feature1_cont {
font-family: Arial, Helvetica, sans-serif;
font-size:36px;
margin-top: 7%;
margin-left: 7%;
min-width: 300px;
max-width: 600px;
background-color: #0F9;

}

挑战2：我在div中也有3个div。我想让它们居中，以便这一举动始终处于中心位置。但我只能让他们留下来。代码在

之下

CSS
#feature2 { 
width: 100%;
heigt: 100%;
float: left;
background-color: #C96;
margin-left: -8px;
margin-right: -8px;

}

#feature2_cont {
width: 400px;
height: 400px;
background-color: #36F;
margin-top: 5%;
margin-left: 5%;
margin-bottom: 5%;
float: left;

}


HTML
<div id="feature2">
<div id="feature2_cont">Content for New Div Tag Goes Here</div>
<div id="feature2_cont">Content for New Div Tag Goes Here</div>
<div id="feature2_cont">Content for New Div Tag Goes Here</div>
</div>

Answer 1

挑战1：

删除#feature1上的负边距并将* { margin: 0; padding: 0; }添加到您的css顶部

挑战2：

删除float: left;并将margin: 0 auto;添加到#feature2_cont

Css html全流血和居中

1 个答案: