キーノードとして作成されたページレイアウトに基づいて、コンテンツとCSSテキストと画像効果、ボックスモデルとアニメーション(?)を利用します.程度ページが完成しました.文字だけで学ぶ内容を、実际の実习の中で、自分が小さい时や直面した间违いや解决の过程をまとめます.

親要素と子要素の使用

flex-boxの前のpaddingとmarginを使用して、ページの読み取り可能性を実現するためにコンテンツを配置します.
最初は、親要素に適用する属性を子要素に使用するか、反対の属性として作成することができます.
かなり時間がかかったようです.
また、<ul>および<li>の選択者において、CSS属性を使用する場合に混同する部分がある.

nav ul {
    text-align: center;
    margin-top: 8px;
    margin-left: 7px;
    margin-right: 7px; 
}
nav ul li a:visited, nav ul li a:link {
    text-decoration: none;
    color: black;
}

テキスト内の整列属性text-alignは、<li>セレクタではなく<ul>セレクタに適用されなければならない.
火烈鳥を撲滅するtext-decoration属性は<li>選択者に適用される.

トランジションとアニメーション

ページの上端が単調すぎるようで、効果をあげたいです.メインタイトルでは、白い背景を左側から右に移動し、テキストを一つ一つ表示させ、「私に好奇心があれば」というテキストをゆっくりと表示させます.

遷移の適用

最初にTransitionを使用して以下のCSSを記述し、必要に応じて効果を適用しました.
でも変換の問題(?)つまり、効果がすべて終了すると、適用される効果は逆の順序に戻ります.効果を適用した場合にのみ停止し、廃地にとどまったときに上のテキストを表示することができますが、変換は不可能です.

/* '안녕하세요:)' 텍스트 효과 */
#head1 { 
    position:absolute;
    top: 160px;
    left: 245px;
    width: 0;
    height: 65px;
    transition: all 1s;
    z-index: 10;
}
#head:hover #head1 {
    width: 330px;
    background-color: white;
}
/* '만나서 반갑습니다!' 텍스트 효과 */
#head2 {
    position:absolute;
    top: 250px;
    left: 245px;
    width: 0;
    height: 65px;
    transition: all 1.2s 1.3s;
}
#head:hover #head2 {
    width: 490px;
    background-color: white;
} 
/* '저에 대해서 궁금하시다면' 텍스트 효과 */
#text3 {
    font-size: 20px;
    position:absolute;
    top: 700px;
    left: 250px;
    opacity: 0;
    transition: all 1.3s 2.7s;
}
#head:hover #text3 {
    opacity: 1;
}

アニメーションに変更

次の遷移によって作成された効果をアニメーション化します.animation-fill-mode: both;プロパティを使用すると、遷移で発見された問題を解決できます.

/* '안녕하세요:)' 텍스트 효과 */
#head1 {
    position:absolute;
    top: 160px;
    left: 17%;
    width: 0;
    height: 65px;
    animation-name: head1-moving;
    animation-duration: 1s;
    animation-fill-mode: both;
}
@keyframes head1-moving {
    from {
        width: 0;
    }
    to {
        width: 250px;
        background-color: white;
    }
}
/* '만나서 반갑습니다!' 텍스트 효과 */
#head2 {
    position:absolute;
    top: 250px;
    left: 17%;
    width: 0;
    height: 65px;
    animation-name: head2-moving;
    animation-duration: 1.3s;
    animation-delay: 1.1s;
    animation-fill-mode: both;
}
@keyframes head2-moving {
    form{
        width: 0;
    }
    to {
        width: 385px;
        background-color: white;
    }
}
/* '저에 대해서 궁금하시다면' 텍스트 효과 */
#text3 {
    font-size: 1.5em;
    position:absolute;
    opacity: 0;
    top: 700px;
    left: 17%;
}
@keyframes text3-moving {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

アニメーションと同じ効果を変換しても、使用目的やページ構造に応じて適切なプロパティを使用する必要があります.