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
<!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 <🎜 vor das -Tag >
#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 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!
