□児童gao実習2編-htmlとcssに基づく

※サイト-http://sisikiller.dothome.co.kr/

合成コード

Git LinkKidsGao

1.night2

●<img>ラベルmobile.cssからwidthまでの値を変更するだけで、比率に応じてheightの値を調整できる
●bottom: initial bottom値が適用されていない(初期化)
●PCバージョン結果

●バージョン変更結果

2. morning

●Sun動画との同時発生を防止するためにMoonが設けられている
●PCバージョン結果

●バージョン変更結果

3. kitchen

●CSSでdelayコードを記述する前に、前のsteamWrapとleftPanのrightPotを使用していたので、floatはsteamWrapの後ろに置かれる→それを防ぐためにleftPanを入力し、.steamWrap { clear: both; }機能を停止する
●floatの放物線アニメーションは現在ハードコーディングのスキルがないため、ウェブサイトを使って制作する
※サイト-https://jeremyckahn.github.io/stylie/

.bubble1 {
  animation-name: bubble1-keyframes;
  animation-duration: 1000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 0 0;
}

@keyframes bubble1-keyframes {
  0% {transform:translate(0px, 0px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
  100% {transform:translate(-100px, -200px) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate(-50%, -50%);}
}

●PCバージョン結果

●バージョン変更結果

4. color1

●PCバージョン結果

●バージョン変更結果

5. color2

●PCバージョン結果

●バージョン変更結果

6. color3

●PCバージョン結果

●バージョン変更結果

※idまたはclass名を記入する場合は、規則正しく記入する必要があります
→可読性または他人のメンテナンスが容易
例)

<div class="color1Wrap"></div>
<div class="color2Wrap"></div>

<div class="kitchenWrap"></div>

<div class=“btnWrap></div>

□難点

総じて、コード量が大きすぎる(Bubbleが800行を超える)ため、前にエラーが発生した場合、問題を解決するのに多くの時間がかかる.

□解決方法

最終的に,コードを穏やかに記述すると,最小限のエラーが発生することが分かった.エラーが発生した場合は、チェック機能を使用してエラーをチェックし、修正します.

□勉強心得

これでKidsGaoサイトの全体的なビューが完了し、カリキュラムに基づいて作成されたコードの量が非常に大きくなりました.知らないうちに、元の簡単なサイトの機能と機能が大量のコードで実行されていることがわかりました.