webucks

11943 ワード
TIL WeCode テキストリンク

スターバックスクローンコード


これは最初の個人プロジェクトスターバックスクローンコードです.
HTML、CSS、JSを使って自分のページを実現しなければなりません.

タスク1ログインページレイアウトの実装

  • コードを作成してください.
  • フラグは、次の2つの条件のいずれかを満たしてください.
  • imgタグを用いて画像ファイル
    • としてロゴを作成する.
  • は、このフォントを使用してバッジを作成する必要があります(デフォルトのフォントは使用されません.Googleフォントの他のフォントも使用する必要はありません).
  • 次の要件に従ってHTMLを記入してください.
  • HTMLを作成する場合は、常に設計された画面を表示する必要があります.
    • 次の
  • の画像を見てレイアウトを完了してください.
  • ログインボックスを含むdivまたはsectionラベルが必要です.
  • フォームラベルを使用してください.
  • inputラベルを使用して、アイデンティティ、パスワードを入力するウィンドウを実装してください.
  • inputのタイプは、それぞれテキストまたはパスワードです.
    • プレースホルダは
  • inputのプロパティです.このプロパティを使用して、電話番号、ユーザー名、Eメールなどの値を入力します.
  • ログインボタンはbuttonラベルを使用してください.

    • 私が実現したHTML

    <!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="0IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>WeBucks</title>
      <script src="js/login.js" defer></script>
      <link rel="stylesheet" href="styles/login.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
  </head>
  <body>
      <section class="loginall">
          <h1>WeBucks</h1>
          <form>
              <input id="namemail" type="text" placeholder="전화번호, 사용자 이름 또는 이메일">
              <input id="pwput" type="password" placeholder="비밀번호">
              <button id="logbtn">로그인</button>
          </form>
          <a href="#">비밀번호를 잊으셨나요?</a>
      </section>
  </body>
</html>

    私が実施したCSS

    *{
    box-sizing: border-box;
}
body {
    background-color: #edefef;
    display: flex;
    justify-content: center;
}

h1 {
    font-family: 'Dancing Script', cursive;
    font-size: 120px;
}

.loginall {
    width: 530px;
    height: 650px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

form {
    display: flex;
    flex-direction: column;

}

input {
    height: 30px;
    margin-bottom: 15px;
    width: 300px;
    height: 40px;
    border: 1px solid black;
    border-radius: 10px;
    background-color: #F7F7F7;

}

button {
    margin-bottom: 70px;
    background-color: #AED3EA;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.5;
    border-radius: 5px;
    height: 40px;
    color: white;
    border: 0px;
}
    問題を解いて終わりました.今は実戦練習です.
    任務はまだ後続のプロジェクトがたくさんありますが、どんな苦痛と楽しみがあるか楽しみです.
    実戦プロジェクト--オンラインOJシステム(1)
    linux上にgit倉庫を構築する2019-05-21