position:fixed-メニューバーの固定とブックマークの作成

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

Today's code - position : fixed

  • 位置:fixedはメニューバーを固定し、ページをスクロールするときも画面に表示させます.
    この機能により、
    ブックマークを作ろう!

    • HTML

    <body>
  <div id="wrap">
    <h1>HTML (Hyper Text Markup Language) </h1>
    
    <nav>
      <ul class="gnb">
        <li><a href="#history">History</a></li>
        <li><a href="#markup">Markup</a></li>
        <li><a href="#semantic">Semantic HTML</a></li>
      </ul>
    </nav>

    <section id="history">
      <h2>History</h2>
      <p>...</p>
    </section>
    
    <section id="markup">
      <h2>Markup</h2>
      <p>...</p>
    </section>
      
    <section id="semantic">
     <h2>Semantic HTML</h2>
     <p>...</p>  
    </section>
     
   </div>
 </body>
  • の各部分にid名を付け、内容を加える.
  • ナビゲーションバーのaタグリンクには、移動する部分の「#id名」がそれぞれ加わる.
    ! 重要なのはclassではなくID名が必要で、リンクには必ず「#」を付けなければならない.

    • CSS



    [nav]
  • ここでは位置は示されていません.相対タグを使用する基準点です.
    この場合,left,topの値を用いて基準を定める.
  • position:fixed; - 基準点は無条件にbodyとし、設定された位置に固定します.
  • left:50%; - ブラウザの50%ポイントをベースラインに、右側にメニューバーを貼り付けます.
  • margin-left:150px; - メニューバーの左側に間隔を置いて、必要な位置に配置します.
  • top:100px; - body頂部を基準として100 px
    • を低減する
    [nav>.gnb]
  • { display:flex; flex-flow:column nowrap; justify-content:space-between; height: 172px; }
  • flexを使用して
    • を縦にリストします.
  • 垂直に並ぶメニュー間隔は
    • である.
  • の間隔を確認し、高さを調整します.

    • 👊positionを適用すると、内容量が減少することを覚えておきましょう!!

    vim使用(三):.viminfoと.vimrc
    Router ; ファイルの切断