Erstellen Sie mit CSS eine feste Navigationsleiste-CSS-Tutorial-php.cn

Erstellen Sie mit CSS eine feste Navigationsleiste

WBOY

Freigeben： 2023-08-22 18:41:02

nach vorne

1217 Leute haben es durchsucht

Erstellen Sie mit CSS eine feste Navigationsleiste

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>

Nach dem Login kopieren

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!