20210514 CSS Sign in page例

17856 ワード
CSS テキストリンク

<body>ラベル内部

<body>
    <div id="container">
      <div class="form-wrap">
        <h1>Sign Up</h1>
        <p>It's free and only takes a minute</p>
        <form>
          <div class="form-group">
            <label for="first-name">First Name</label>
            <input type="text" name="firstName" id="first-name" />
          </div>
          <div class="form-group">
            <label for="last-name">Last Name</label>
            <input type="text" name="lastName" id="last-name" />
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" />
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" />
          </div>
          <div class="form-group">
            <label for="password2">Confirm Password</label>
            <input type="password" name="pasword2" id="password2" />
          </div>
          <button type="submit" class="btn">Sign Up</button>
          <p class="bottom-text">
            By clicking the Sign Up button, you agree to our
            <a href="#">Terms & Conditions</a> and
            <a href="#">Privacy Policy</a>
          </p>
        </form>
      </div>
      <footer>
        <p>Already have an account? <a href="#">Login Here</a></p>
      </footer>
    </div>
  </body>

*選択者の初期化に設定



*選択者は、すべてのラベルに適用される選択者です.
box-sizeをborder boxに設定すると初期化できます.
marginとpaddingを0に初期化し、コンテンツ(コンテンツ)を基準にパッケージ化
CSSコード
* {   
     box-sizing: border-box;
     margin: 0;
     padding: 0;
  }

bodyセレクタを使用して背景色とフォントを設定する


body {
        background-color: #344a72;
        font-family: Raleway;
        color: white;
        line-height: 1.8;
     }
line-height:行の高さを指定するプロパティ
既定値は1.0～1.2(通常)です.
フォントサイズ別使用%

a選択者としてのリンクからの線の削除


 a {

       text-decoration: none;
   }
text-chenticationは、テキストを線で装飾できるプロパティで、noneに設定することで下線を除去します.

#コンテナをコンテナセレクタに設定する


#container {
        max-width: 400px;
        margin: 30px auto;
        padding: 20px;
      }
max-width:容器が最大幅を超えないように最大幅容器を設定する

form-wrap設定



form-wrapタグ背景をformタグを含むボックスに変更

form-wrapラベル内のエンティティ1を設定します。



form-wrapラベルの内部のh 1-タイトルで、p-字の中間を揃えます.
form-wrapタグ内部のform-groupクラスの要素を持つmarging-topを15 pxに設定

form-wrapラベルの内部領域を設定する2



form-wrap別名内のform-groupクラスのラベルをブロックラベルに変更
blockに設定すると行全体が占有されます
Inputタグを100%水平余白に設定してソート

form-wrapラベル内のエンティティ3を設定する



buttonタグブロックに設定し、横方向の長さを100%設定します.
色、余白、paddingの設定

form-wrapタグの内部領域を設定する4



ボタンボタンボタン:マウスの設定ボタンを押したときに色を変更する
データムテキストのサイズ変更
フッターを中央に配置して余白を付ける
フッター内のリンクラベル(a)の色を変更する
xcode簡単なチュートリアル、buttonクリックイベントを実現
2/26(金)FrontEnd/HML 5(1)