TIL 210617

20421 ワード
TIL CSS html テキストリンク

今日やったこと


Webサイト作成に応じて、タイトル|フロントエンド開発者入力:HTML、CSS、Javascript
簡単に復習してみます.

インタラクティブなナビゲーションバーの作成



デスクトップ画面


画面を移動+切り替えボタン

html

<!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">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
  <link rel="stylesheet" href="./style.css">
  <title>responsive-navbar</title>
  <script src="main.js" defer></script>
</head>
<body>
  <nav class="navbar">
    <div class="navbar-logo">
      <i class="fab fa-accusoft"></i>
      <a href="#">DreamCoding</a>
    </div>
    <ul class="navbar-menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Weddings</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Bookings</a></li>
    </ul>
    <ul class="navbar-icons">
        <li>
          <a href="#">
            <i class="fab fa-twitter"></i>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fab fa-facebook-f"></i>
          </a>
        </li>
    </ul>
    <a href="#" class="navbar-toggleBtn">
      <i class="fas fa-bars"></i>
    </a>
  </nav>

</body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
}

/* Reset CSS */

a {
  text-decoration: none;
  color: inherit;
}

ul {
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  list-style: none;
}

CSSコード全体がアップロードされているため、常に非公開変換が行われている.どうしたんですか.

Javascript

const toggleBtn = document.querySelector(".navbar-toggleBtn");
const menu = document.querySelector(".navbar-menu");
const icons = document.querySelector(".navbar-icons");

toggleBtn.addEventListener("click",() => {
    menu.classList.toggle("active");
    icons.classList.toggle("active");
});
JAvascriptはまだ覚えていませんが、試してみるだけで、ついていきます.クラス名以外はみんなその通りにしていて、最初はどうしても当てはまらなかったので、精神が崩れてしまいました.最後に、カッコ内のクラス名を単一引用符から二重引用符に変更するので、解決します.

やるべきこと

  • JavaScript入門
  • http聴力
    • httpの本を読むのはつまらないので、講義をクリアしました.クーポンが一番時間があった時に聞く暇があったのが狙い…!
    一度行ったのが最後かもしれない旅行でした.JavaScriptを始めます.
    配列.forech () -配列の項目をループ処理するために.
    Spring Cloudゲートウェイにおけるクエリ・パームへのパス・パーム変換