Heim >Web-Frontend >CSS-Tutorial >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:371976Durchsuche
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!