What I have done: SheCodes Basic#Week 1

19640 ワード
SheCodes エンコーディング 女性開発者 テキストリンク
女性開発者研修コースSheCodesに登録されています.reactを上書きするレッスンを登録しましたが、1週間目のHTML、CSS、JavaScriptも勉強しています.一週間で新しく勉強したものを整理しなければなりません!
Self-closing tag
<br />
<hr />
これらをself-clostingtagと呼ぶ.他のラベルは開いて閉めなければなりませんが、ラベルは必要ありません.
CSS色の設定
CSSの色設定は大体3種類あります.
1.ダミーカラー(色名のみ)
2.hexadciaml(カラーコード)
3. rgb
rgbの後ろに透明度を表す数字を追加します.
中央揃え
text-align:中央揃えができない場合
display:block;
margin: 0 auto;
中央揃えが簡単にできるように設定します.
ブロックとインライン
CSSの中のすべてのものはblockではなくinlineです!
block改行、inline改行しない
中立容器divはblock、spanはinline
padding - border- margin
paddingは要素の内部に属し、marginは外部に属する.
padding-border-margin順序
ちゃくしょくしゅうき
box-shadow: 10px 10px 5px red;
水平、垂直、ぼかしradius、色をそれぞれ表します.
hoverの使用方法
button:hover{

background: white;
color: blue;
cursor: pointer;

}

button{

transition: all 200ms ease-in-out}
マウスをボタンにぶら下げ、変化させるにはぶら下げを使用します.
transitionはbutton:hoverではなく、buttonの下で書くだけでよいことを覚えておいてください.
うまくいかない時です.
うまくいかない場合は、チェックでコードをチェックするかCSS default styleを表示したほうがいいです.
WEEK 1 HOMEWORK: Fake Weather App
これは基本的に与えられたページを見て、できるだけ似たような課題です.私の結果はこれです!

日付はulで作成されますが、typeはnoneで中央に揃えられます.各日付とボタンには、サスペンションが適用されます.次は私が書いたコードです.おもしろい!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather App</title>

    <style>

        body{
            text-align: center;
            display: block;
            font-family: Helvetica, Arial, sans-serif;
        }

        h1{
            margin: 0;
            color: #1965D6;
            font-size: 34px;
            line-height: 48px;
            margin: 0;

        }

        h2{
            margin: 0;
            font-size: 34px;
            line-height: 48px;
            font-weight: 400;
        }

        ul{
            text-align: center;
            list-style: none;
            padding: 0;
        }

        li{
            list-style: none;
            text-align: center;
            padding: 10px 0;
            border-radius: 10px;
            transition: all 200ms ease-in-out;
            max-width: 400px;
            margin: 0 auto;
            width: 387px;
            height: 101.438px;
        }

        li:hover{
            background: #FFFBEF;
        }

        .high{
            color: gray;
            font-weight: bold;
        }

        button{
            display: block;
            margin: 20px auto;
            border: 1px solid #1a64d6;
            background: #1a64d6;
            color: #fff;
            font-size: 16px;
            line-height: 22px;
            padding: 16px 24px;
            border-radius: 30px;
            transition: all 200ms ease;
            box-shadow: rgb(37 39 89 / 8%) 0px 8px 8px 0;
            cursor: pointer;
        }

        button:hover{

            background-color: white;
            color: #1a64d6;
            border: 1px solid #1a64d6;
            
        }
    </style>
  </head>
  <body>

    <h1>
      🌤<br />
      Currently 21° in Tokyo
    </h1>

    <h2>13° / 
        <strong>23°</strong>
    </h2>

    <ul>
        <li>
        <h3>🌧Tomorrow</h3>
            <span> 10° / <span>
            <span class="high"> 22°</span>
        </li>

        <li>
        <h3>🌥Saturday</h3>
            <span> 15° / <span>
            <span class="high"> 17°</span>
        </li>

         <li>
        <h3>☀️Sunday</h3>
            <span">25° / </span>
            <span class="high"> 28°</span>
        </li>
    </ul>


    <button class="button"> Change City</button>
    <p>Coded by Juhee Lee</p> 
 </body>
</html>
C#/.NETパラレルプログラミングParallelの一般的な構文の詳細
[TIL]デコレーション(デコレーション)