Heim > Artikel > Web-Frontend > CSS implementiert die Navigationsleiste der ersten Ebene

CSS implementiert die Navigationsleiste der ersten Ebene

php中世界最好的语言Original: 2018-03-22 13:04:363303Durchsuche

Dieses Mal werde ich Ihnen CSS zur Implementierung einer Navigationsleiste der ersten Ebene vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung einer Navigationsleiste der ersten Ebene mit CSS?

Schritt eins: Führen Sie das CSS-Stylesheet ein, erstellen Sie eine neue Ebene mit der ID nav und verwenden Sie die Tags

, , um den fertigen Effekt zu erstellen .

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/yiji.css"/>
    </head>
    <body>
        <p id="nav">
            <ul>
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
                
                <li><a href="">首页</a></li>
            </ul>
        </p>
    </body>
</html>

Der zweite Schritt besteht darin, den CSS-Stil festzulegen:

1. Legen Sie die Attribute von nav fest

#nav{
    width: 500px;
    height: 50px;
    border: 1px solid red;
}

Der Anzeigeeffekt ist wie folgt:

2. Löschen Sie den Punkt

#nav ul{
    list-style: none;
}

3. Legen Sie die Attribute des -Tags fest, das unter

#nav ul li a{
    width: 98px;
    height: 50px;
    float: left;
    border: 1px solid red;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
}

4. Stellen Sie den Mouseover-Effekt ein

#nav ul li a:hover{
    background-color: #ABCDEF;
}

Endgültiger Effekt:

Vollständiger HTML-Codeteil:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/yiji.css"/>
    </head>
    <body>
        <p id="nav">
            <ul>
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
                 
                <li><a href="">首页</a></li>
            </ul>
        </p>
    </body>
</html>

Vollständiger CSS-Stil-Codeteil:

*{
    margin: 0;
    padding: 0;
}
#nav{
    width: 500px;
    height: 50px;
    border: 1px solid red;
    margin: 30px;
}
#nav ul{
    list-style: none;
}
#nav ul li a{
    width: 98px;
    height: 50px;
    float: left;
    border: 1px solid red;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
}
#nav ul li a:hover{
    background-color: #ABCDEF;
}

Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Der Unterschied zwischen nth-child und nth-of-type in CSS3 und ihre Verwendungstechniken

css3 Detaillierte Erläuterung des neuen Attributs box-sizing

CSS zeichnet ein rotes Herz

Das obige ist der detaillierte Inhalt vonCSS implementiert die Navigationsleiste der ersten Ebene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Detaillierte Erläuterung der Verwendung von Linear-GradientNächster Artikel：Detaillierte Erläuterung der Verwendung von Linear-Gradient

In Verbindung stehende Artikel

Mehr sehen