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

完全なコード

Git LinkKidsGao

1. forest1

●top・bottom・left・right・自己主導のCSSコード
●PCバージョン結果

●バージョン変更結果

2. forest2

●<img>タグの画像が正常に出力されない場合、altに入力した内容を出力する
●position・z-index同じなら、後の内容は上に置きます
●ここで使用する画像は、シャドウ領域も含む
※製作手順に従って配置作業を行う→そうでないと結果が異常になる場合があります
●PCバージョン結果

●バージョン変更結果

3. forest3

●PCバージョン結果

●バージョン変更結果

4. science

●JavaScriptを使用するためにポットの全体像と前部像の2種類を使用
→米粒が缶に入るイメージを表現するため
●scienceWrapラベルのwidth値とscienceLeftWrap・scienceCenterWrapタイガーのscienceRightWrap値の和が等しくなければならない→サブラベルの大きさが超えた場合、改行が発生する
●モバイル版中widthのサブ属性使用#science .scienceWrap { }中style.css中float子どもの高さ値は親の高さ値に影響しない
→

 #science .scienceWrap {
        overflow: hidden;
        
        width: 360px;
        height: auto;
 }

ただし前述のように、使用overflow: hidden子どもの高さ値が親の高さ値に影響する
※PCバージョンとモバイルバージョンの画像は、できるだけ同じ画像を使用する必要があります
●PCバージョン結果

●バージョン変更結果

5. night1

●PCバージョン結果

●バージョン変更結果

□難点

延長線など、以前に作成した内容を繰り返すのは、あまり難しくありません.

□解決方法

コードの作成中にエラーが発生しないように、コードの作成後に正常に動作しているかどうかを確認します.

□勉強心得

以前のコンテンツの重複と延長であるため、positionの使用方法とウェブサイトの作成時に構造全体を作成する方法を徐々に熟知しています.