210601開発ログ

6227 ワード

テキストリンク

内容

-画像と同じサイズに設定する必要があります.
現在このマークは装飾用なのでbackground-imageに設定されています.
背景-画像は基本的に重複しています.
ウェブサイト作成時、画像のサイズは通常偶数または5分割のサイズである.レイアウトの仕事をするときはよく組み合わせなければならない.

body {
overflow-x: hidden;
}:Webブラウザに移動すると、x軸を指す内容は非表示になります./横転防止
各画像の幅は100%、heightは画像属性、高さ値に設定されます.
urlの書き方:既存のドキュメント条件で書きます.そしてフォルダ順に書きます.
.../:現在のフォルダから外側に移動します.

left: 50%; -> 黄色い箱が右端に貼られます.
margin-left: -380px; -> その箱を半分左に移動した黄色の箱(760 px).
真ん中ですいつも真ん中まで歩いています.
#intro .introWrap .logo {
position: absolute;
absoluteを選択したのは、現在のフラグの状態がレイヤが重なる状態であるため、3 Dプロパティがあるからです.すなわち、z軸が存在する.したがって、3 Dプロパティabsoluteが使用されます.
left:50%のプロパティは3 Dプロパティなので使用できます.
ぜったい使うなら親に関係なく安全です.
親の位置状態によっては、子どもの座標基準点が異なる場合があります.

クラウドはdivラベルで囲まれており、divラベルには基本的にblock要素があります.blockはy軸で並べ替えられる性質です.だから雲がy軸に並んでいる様子
雲はブラウザに左右に置く.
floatプロパティを使用すると、レイアウトが歪んでしまいます.これはfloatを使用する際の注意点です.

ブラウザのサイズが画像より大きいため、繰り返しの効果が生じるため、繰り返し寝てしまいます.この場合、no repeatであれば重複しません.しかし、そうするとブラウザの半分しか埋まらず、残りの半分は空になります.背景画像は基本的に重複性があるので、小さな画像でも背景を塗りつぶすことができます.

バージョンの移動が完了しました.

  <div class="leftRice1"></div>
        <div class="farmer"></div>
        <div class="rightRice1"></div>

        <div class="farmSpeechWrap">
            <img src="img/farm/farm1/farmspeech.png" align="우리쌀 점토">

            <p class="farmspeech">
                식재료만 넣은 안전한<br>
                우리쌀 점토 키즈가오는<br>
                우리 쌀을 사용하여 만들어요.<br>
                화학물질을 사용하지 않고,<br>
                식재료를 사용해서 만든<br>
                안전한 제품이랍니다.
            </p>
        </div>