Heim > Artikel > Web-Frontend > So erzielen Sie mit CSS einen Webnavigationseffekt

So erzielen Sie mit CSS einen Webnavigationseffekt

PHPzOriginal: 2023-04-25 10:47:521244Durchsuche

Navigation ist eine sehr wichtige Komponente im Webseitenerstellungsprozess. Navigation ist nicht nur die Kernfunktion von Webseiten, sondern spielt auch eine Rolle bei der Verschönerung von Webseiten und der Verbesserung der Benutzererfahrung. Bei der Verschönerung und Gestaltung von Webseiten kann CSS als Stylesheet der Webseite auch zur Implementierung verschiedener Navigationsstile verwendet werden. In diesem Artikel wird vorgestellt, wie CSS die Webseitennavigation implementiert.

Grundlegende Struktur des CSS-Stylesheets

CSS-Stylesheet wird häufig beim Design und Layout von Webseiten verwendet. Seine Grundstruktur ist wie folgt:

选择器{
    属性1:属性值1;
    属性2:属性值2;
    ...
}

Der Selektor bezieht sich auf das oder die Elemente, die gestylt werden sollen. Attribute beziehen sich auf Stile wie Farbe, Breite, Höhe usw., während sich Attributwerte auf die Werte beziehen, die den Attributen entsprechen. Wenn ein Stylesheet auf ein HTML-Dokument angewendet wird, werden die darin enthaltenen Stilattribute automatisch auf die entsprechenden HTML-Elemente angewendet.

Grundlegende Konzepte des mit CSS implementierten Navigationsmenüs

Wenn Sie CSS-Stylesheets zum Entwerfen von Navigationsmenüs verwenden, müssen Sie die folgenden Grundkonzepte beherrschen:

Menüelemente: Jedes Navigationselement ist ein Menüelement.
Ausgewählte Elemente: Die vom Benutzer ausgewählten Menüelemente müssen ebenfalls Stiländerungen aufweisen, um ihren ausgewählten Status widerzuspiegeln.
Hover-Status: Wenn der Benutzer mit der Maus über ein Menüelement fährt, muss sich auch der Stil des Menüelements ändern, um den Benutzer darauf hinzuweisen, dass das Element einen anklickbaren Status hat.

Horizontales Navigationsmenü mit CSS implementiert

Im Folgenden erfahren Sie, wie Sie ein einfaches horizontales Navigationsmenü mit CSS implementieren. Dieser Menüpunkt enthält 5 verschiedene Optionen. Wenn der Benutzer auf einen Menüpunkt klickt, ändert sich die Hintergrundfarbe des entsprechenden Menüpunkts.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Horizontal Nav</title>
    <style>
        nav{
            display: inline-block;
            background: #e74c3c;
        }

        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        li{
            margin: 0;
            padding: 0;
        }

        a{
            color: #fff;
            display: block;
            padding: 10px;
            text-decoration: none;
        }

        a:hover,
        a:focus,
        a:active{
            background: #c0392b;
        }

        .active a{
            background: #ffffff;
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Durch das Schreiben des obigen HTML- und CSS-Codes können wir ein grundlegendes horizontales Navigationsmenü implementieren. Die spezifische Implementierungsmethode lautet unter anderem wie folgt:

Zuerst müssen wir ein
-Tag definieren und alle navigationsbezogenen HTML-Elemente in dieses Tag einfügen.
Definieren Sie ein
- Stil definieren definiert den allgemeinen Stil von Menüelementen, einschließlich Farbe, Polsterung usw.
- Definieren Sie die Stiländerung im Hover-Status. Wenn der Benutzer mit der Maus über ein Element fährt, müssen wir dem Element eine Hintergrundfarbe hinzufügen, um den Benutzer dazu aufzufordern, und die entsprechende Textfarbe muss sich ebenfalls ändern.
- Definieren Sie den Stil im aktiven Zustand. Wenn der Benutzer auf ein Element klickt, ändert sich der Stil der -Beschriftung, die dem Element entspricht, z. B. die Hintergrundfarbe, damit der Benutzer es unterscheiden kann.

Von CSS implementiertes vertikales Navigationsmenü

Zusätzlich zur Implementierung eines horizontalen Navigationsmenüs kann CSS auch das Design eines vertikalen Navigationsmenüs implementieren. Hier ist der HTML-Code für ein einfaches vertikales Navigationsmenü:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Vertical Nav</title>
    <style>
        nav{
            display: inline-block;
            background: #2980b9;
            height: 100%;
        }

        ul{
            list-style: none;
            margin: 0;
            padding: 0;
        }

        li{
            margin: 0;
            padding: 0;
        }

        a{
            color: #fff;
            display: block;
            padding: 10px;
            text-decoration: none;
        }

        a:hover,
        a:focus,
        a:active{
            background: #2c3e50;
        }

        .active a{
            background: #ffffff;
            color: #2980b9;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Die Implementierung unterscheidet sich geringfügig vom horizontalen Navigationsmenü. Wir müssen auf folgende Punkte achten:

Stellen Sie eine Breite von 100 % der Höhe für das
-Tag ein, um sicherzustellen, dass das Menü die vertikale Position des gesamten Formulars einnehmen kann.
Grundlegende Implementierung des vertikalen Navigationsmenüstils, ähnlich dem horizontalen Navigationsmenü, mit der Ausnahme, dass die Seitenleisten vertikal angeordnet sind.
Stiländerungen im Hover-Status stimmen mit horizontalen Navigationsmenüs überein.
Definieren Sie den Stil im aktiven Zustand, der auch analog zur horizontalen Navigation umgesetzt werden kann.

Zusammenfassung

In diesem Artikel erläutern wir die Anwendung von CSS im Webnavigationsdesign anhand von zwei Fällen. Unabhängig davon, ob es sich um ein horizontales Navigationsmenü oder ein vertikales Navigationsmenü handelt, bietet CSS eine Fülle von Eigenschaften und Stilen für die Implementierung. Ich hoffe, dass die Leser durch die Einleitung dieses Artikels ihr Verständnis von CSS weiter vertiefen und Hilfe für zukünftige Webdesign-Arbeiten bieten können.

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS einen Webnavigationseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html 选择器样式表内边距 flex ul

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Gründe und Lösungen für die unvollständige Anzeige von CSS-BildernNächster Artikel：Gründe und Lösungen für die unvollständige Anzeige von CSS-Bildern

In Verbindung stehende Artikel

Mehr sehen