suchen

Heim  >  Artikel  >  Web-Frontend  >  Erstellen Sie eine Navigation der ersten Ebene mit div+css

Erstellen Sie eine Navigation der ersten Ebene mit div+css

零下一度
零下一度Original
2017-04-28 11:01:371935Durchsuche

In diesem Artikel erfahren Sie hauptsächlich, wie Sie eine einfache Navigationsleiste erstellen. Es hat einen bestimmten Referenzwert, schauen wir uns den folgenden Editor an

Heute werde ich Ihnen zeigen, wie Sie eine einfache Navigationsleiste erstellen:

Schritt 1: Führen Sie ein CSS-Stylesheet ein und erstellen Sie eine neue A-Ebene mit der ID nav. Verwenden Sie die Tags ff6d136ddc5fdfeffaf53ff6ee95f185, 25edfb22a4f469ecb59f1190150159c6, 3499910bf9dac5ae3c52d5ede7383485, 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 3499910bf9dac5ae3c52d5ede7383485-Tags fest, das unter ff6d136ddc5fdfeffaf53ff6ee95f185

#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 Codeteil im CSS-Stil:

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Navigation der ersten Ebene mit div+css. 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：Verwenden Sie CSS, um einen transparenten Dreiecks-Spezialeffektcode zu implementierenNächster Artikel：Verwenden Sie CSS, um einen transparenten Dreiecks-Spezialeffektcode zu implementieren

In Verbindung stehende Artikel

Mehr sehen