HTML CSオブジェクト

38531 ワード
テキストリンク
3月22~23日内容まとめ
現在HTML CSS投影処理中
ホームページとsubpage(loginや会員登録ページなど...)
5ページくらい作りましたが...
修正することが多いですが、最初のプロジェクターなので面白いです.
次はホームページを実現します.
JavaScriptはまだ習っていないので、ダイナミックにはできません
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  
  <title>index</title>
  <link href="./toyproject/css/basic_0322.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&family=Hi+Melody&family=Nanum+Myeongjo&display=swap" rel="stylesheet">
  
  <style>
    *{
      margin: 0px;
      padding: 0px;
    }
    body{
      width: 960px;
      margin: 0px auto;
    }

    .topNav{
      height: 30px;
      line-height: 30px;
    }

    .topNav>ul{
      text-align: right;
    }

    .topNav li{
      display: inline-block;
      margin: 0px 2px;
    }

    .topNav a{
      padding: 5px;
      font-family: 'Gamja Flower', cursive;
      font-size: 20px;
    }

    .topNav a:hover{
      background-color: cadetblue;
      border-radius:10px;
    }

    .mainTitle{
      text-align: center;
      height: 80px;
    }

    .logoImg{
      display: inline-block;
    }
    .logoImg>Img{
      width: 50px;
      height: 70px;
    }

    .title{
      display: inline-block; 
    }

    .title>h1{
      font-family: 'Gamja Flower', cursive;
      font-size: 60px;
    }

    .mainNav{
      height: 50px;
      line-height: 50px;
      background-color: darkcyan;
      font-size: 18px;
      font-weight: bold;
    }

    .mainNav>ul{
      text-align: center;
    }

    .mainNav li{
      display: inline-block;
      margin: 0px 20px;
    }

    .mainNav a{
      padding: 14px;
      font-family: 'Gamja Flower', cursive;
    }

    .mainNav a:hover{
      background-color: cadetblue;
      border-radius:10px;
    }

    Section{
      display: flex;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .leftSection>img{
      width: 700px;
      height: 500px;
      margin-right: 10px;
      border-radius: 10px;
    }
    .announcement{
      width: 250px;
      height: 300px;
      margin-bottom: 10px;
      border: 2px solid black;
      background-color: cadetblue;
      border-radius: 10px;
    }

    .loginBoxInner{
      width: 250px;
      height: 180px;
      border: 2px solid black;
      border-radius: 10px;
    }

    .loginBoxInner li{
      margin-left: 10px;
    }

    .type01{
      width: 200px;
      height: 20px;
    }
    .button{
      width: 205px;
      height: 40px;
      border-radius: 10px;
      margin-top: 15px;
    }

    footer li{
      font-size: 15px;
    }
  </style>

</head>
<body>
  <header>
    <div class="topNav">
      <ul>
        <li><a href="#">로그인</a></li>
        <li><a href="#">회원가입</a></li>
        <li><a href="#">문의사항</a></li>
      </ul>
    </div>

    <div class="mainTitle">
      <div class="logoImg">
        <img src="./toyproject/img/icons8-coffee-table-100.png">
      </div>

      <div class="title">
        <h1>송리단길 맛집리스트</h1>
      </div>
    </div>
    
    <div class="mainNav">
      <ul>
        <li><a href="#">홈페이지소개</a></li>
        <li><a href="#">맛집</a></li>
        <li><a href="#">디저트&카페</a></li>
        <li><a href="#">나의맛집리스트</a></li>
      </ul>
  </div>
  </header>

  <section>
    <div class="leftSection">
      <img src="./toyproject/img/pancakes-g9b123ac5c_640.jpg">
    </div>
    <div class="rightSection">
      <div class="announcement">announcement</div>
      <div class="loginBox">
        <form action="#" method="post" name="member" enctype="multipart/form-data">
          <fieldset class="loginBoxInner">
            <legend>login</legend>
            <ul>
              <li>
                <lable for="id">아이디</lable>
                <input class="type01" type="text" name="id" id="id"> 
              </li>
              <li>
                <lable for="password">비밀번호</lable>
                <input class="type01" type="password" name="password" id="password"> 
              </li>
              <li>
                <input class="button" type="button" name="button" value="로그인">
              </li>
            </ul>
          </fieldset>
        </form>
      </div>
    </div>
  </section>
  <footer>
    <ul>
      <li>한국정보교육원 소속 하위기관 자바기반 클라우드 융합 개발자팀</li>
      <li>서울시 관악구 봉천로 227 보라매샤르망 |Tel:000-0000-0000</li>
      <li>E-mail : [email protected] |개인정보보호책임자 : 최빛나</li>
      <li>Copyright © 2022 최빛나 All Rights Reserved.</li>
    </ul>
  </footer>
</body>
</html>
react-router-domの動作原理
10強データ構造キュー