210713[12]大邱AI学校普通課程Webプログラミング実習1 kidsgao

7086 ワード
大邱AI学校 CSS Webプログラミング 基礎コース ホーム練習 media queries html テキストリンク

1.勉強の内容


2週間前にHTMLとcssの基本を学び、kidsgaoという講師が3ヶ月の学習後初めてアウトソーシングを受けて作成したビジネスサイトを実習した.
http://sisikiller.dothome.co.kr/>
大作の部分は以下の通り.

1.Intro部分(1時、5時、8時、11時方向)4匹の動物(ウサギ、熊、猿、ライオン)が頭を動かします.

2.雲の下の部分(左右の雲が散ってjavascript passを使う必要がある)トンボが左から右に移動

3.真ん中の農夫と左側の文字と左右の水稲画像のレイアウト(fram 1)

4.藁人形と左右の稲図(farm 2)

5.脱粒機の鋸歯部分の回転と左側の上に窓と右側のテキスト文を加える(farm 3)
  • 6.上記5種類のコンテンツをmobile pageに変換する場合の属性
    • .
    大体五つの方面の実習を行った.
    (1)Intro内容

    css code ```
    #intro .introWrap {
    position: relative;
    width: 760px;
height: 516px;
/*background-color: yellow;*/

left: 50%;
margin-left: -380px; 가운데로 정렬하는 값

/*margin-top: 100px;*/
top: 100px;
    }
    #intro .introWrap .logo {
    position: absolute;
    width: 760px;
height: 516px;
background-image: url(../image/intro/logo.png);
z-index: 100; '일종의 기준점이다.'
    }
    #intro .introWrap .lion {
    position: absolute;
    width: 161px;
height: 161px;
background-image: url(../image/intro/lion.png) ;

margin: 80px 0 0 30px;
    }
    #intro .introWrap .rabbit {
    position: absolute;
    width: 105px;
height: 129px;
background-image: url(../image/intro/rabbit.png);

margin: 90px 0 0 580px;
    }
    #intro .introWrap .bear {
    position: absolute;
    width: 112px;
height: 105px;
background-image: url(../image/intro/bear.png);

margin: 310px 0 0 560px;

z-index: 200;
    }
    #intro .introWrap .monkey {
    position: absolute;
    width: 85px;
height: 93px;
background-image: url(../image/intro/monkey.png);

margin:  310px 0 0 50px;

z-index: 200;


#intro .introWrap .lion,
#intro .introWrap .rabbit,
#intro .introWrap .bear,
#intro .introWrap .monkey,
#intro .cloudWrap .dragonfly {
	display: none; 모바일로 변환되었을때 사라지게 하는 속성값!
}
    }
    (2) 구름과 잠자리 이동
css code
    #intro .cloudWrap {
    position: relative;
    width: 100%;
height: 1050px;
/*background-color: pink;*/
    }
    #intro .cloudWrap .leftCloud {
    position: absolute;
    width: 934px;
height: 816px;
background-image: url(../image/intro/cloud1.png);

left: 0;

z-index: 2;
    }
    #intro .cloudWrap .rightCloud {
    position: absolute;
    width: 843px;
height: 858px;
background-image: url(../image/intro/cloud2.png);

right: 0;
    }
    #intro .cloudWrap .dragonfly {
    position: absolute;
    width: 366px;
height: 228px;
background-image: url(../image/intro/dragonfly.png);
/*background-color: hotpink;*/

top: 800px;
    }
    注意:body{
    /overflow-x: hidden;/そうでなければ、トンボは同時に横に転がる.
    }
    (3)農夫部分
    <p class="farmSpeech">
				식재료만 넣은 안전한<br>
				우리쌀 점토 키즈가오<br>
				우리 쌀을 사용하여 만들어요.<br>
				화학물질을 사용하지 않고,<br>
				식재료를 사용해서 만든<br>
				안전한 제품이랍니다.
				</p>
    ここではenterと同じ役割を果たす改行タグです.
    (4)かかしとかかし絵(静止画)
    #farm2 .leftRice2 {
    float: left;
width: 250px;
height: 850px;
background-image: url(../image/farm/farm2/leftrice2.png);
    }
    #farm2 .rightRice2 {
    float: right;
    width: 236px;
    height: 850px;
    background-image: url(../image/farm/farm2/rightrice2.png);
    }
    (5)機器の運転部分(farm 3)
    `#farm3 .machineWrap .machine1 {
    position: absolute;
    width: 586px;
    height: 455px;
    background-image: url(../image/farm/farm3/machine1.png);
    z-index: 900;` 기계는 새와 타이머 부분을 제외하고 가장 나와있어야해서 900으로 지정함. 새와 타이머는 999로 설정



    移動バージョンに切り替えると、ギアが消えなければならないので、display;none;この値段をください.

    2.実習


    ダウンソース:
    HTML
    https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/9
    style.css(位置&マージ)
    https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/10
    animation.css(アニメーション)
    https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/11
    mobile.css(メディアクエリー)
    https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/12

    3.困難な内容&解決方法


    インターンシップのせいか、コードの内容も長く、タイプを打つときにエラーが発生し、エラーが発生し続けています.開発者ツールでエラーを探すことができますが、これまで開発者ツールを見るのに不便で、素早く適応する必要があるかもしれませんが、sumpletextでもcrtl+Fが受け入れられているものが見つかりましたので、この方法で解決すべきです.
    さらに3 D position属性については完全に理解されておらず,実習ページに広く応用されており,復習以前にやったことは解決可能な方法であるようだ.

    4.感想


    特にfarm 3のマシンギアが回転する部分が3次元位置と回転に設定できるのは不思議です.
    授业が长くて、前に习ったことを覚えていません.新しいことについては、A to Zはまだ全部整理されていません.だから、もっと早い始まりともっと遅い终わり方で、周末に戻ってフォローしなければなりません.
    C#教科書を身につける.インデックスと反復
    LeetCode 1114. Print in Order(同時)