Heim > Artikel > Web-Frontend > Erstellen Sie mit CSS eine feste Navigationsleiste

Erstellen Sie mit CSS eine feste Navigationsleiste

WBOYnach vorne: 2023-08-22 18:41:021148Durchsuche

Um eine Sticky-Navigationsleiste zu erstellen, verwenden Sie das Attribut position: sticky;. Sie können versuchen, den folgenden Code auszuführen, um eine Sticky-Navigationsleiste zu erstellen:

Beispiel

Live-Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style-type: none;
            position: sticky;
            overflow: hidden;
            top: 0;
            width: 100%;
         }
         li {
            float: left;
            border-right: 1px solid white;
         }
         li a {
            display: block;
            padding: 8px;
            background-color: orange;
         }
         li:last-child {
            border-right: none;
         }
         div {
            padding:5px;
            margin-top:5px;
            background-color:white;
            height:1000px;
         }
      </style>
   </head>

   <body>
      <ul>
         <li><a href = "#home">Home</a></li>
         <li><a href = "#news">News</a></li>
         <li><a href = "#contact">Contact</a></li>
         <li><a href = "#about">About</a></li>
      </ul>
      <div>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
      </div>
   </body>
</html>

Das obige ist der detaillierte Inhalt vonErstellen Sie mit CSS eine feste Navigationsleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css position

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So erstellen Sie eine responsive Bildergalerie mit CSSNächster Artikel：So erstellen Sie eine responsive Bildergalerie mit CSS

In Verbindung stehende Artikel

Mehr sehen