0

私は最初から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>
4

1 に答える 1

1

チャレンジ1：

上の負のマージンを削除し、CSSの上部に#feature1追加します* { margin: 0; padding: 0; }

チャレンジ2：

削除してfloat: left;追加margin: 0 auto;#feature2_cont

于 2013-03-04T18:36:01.263 に答える