suchen

Heim  >  Artikel  >  Web-Frontend  >  CSS-Methode zur Implementierung der horizontalen Navigation und der vertikalen Navigationsleiste (Code)

CSS-Methode zur Implementierung der horizontalen Navigation und der vertikalen Navigationsleiste (Code)

不言
不言Original
2018-08-21 10:53:4317538Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Methode (Code) zur Implementierung der horizontalen Navigation und der vertikalen Navigationsleiste. Ich hoffe, dass er für Sie hilfreich ist.

1. Vertikale Navigation 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
}

a{
display:block;
background-color:green;
color:white;
width:80px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active{
background-color:#98bf21;
}

</style>
</head>
<body>
<ul>
<li><a herf="">首页</a></li>
<li><a herf="">学习中心</a></li>
<li><a herf="">考试中心</a></li>
<li><a herf="">考试动态</a></li>
</ul>
</body>
</html>

Laufergebnisse:

CSS-Methode zur Implementierung der horizontalen Navigation und der vertikalen Navigationsleiste (Code)

2. Horizontale Navigation: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li{
float:left;
}
a{
display:block;
background-color:pink;
color:white;
width:80px;
text-align:center;
padding:4px 0px;
text-decoration:none;
}
a:hover,a:active{
background-color:gray;
}

</style>
</head>
<body>
<ul>
<li><a herf="">首页</a></li>
<li><a herf="">学习中心</a></li>
<li><a herf="">考试中心</a></li>
<li><a herf="">考试动态</a></li>
</ul>
</body>
</html>

Laufergebnisse:

CSS-Methode zur Implementierung der horizontalen Navigation und der vertikalen Navigationsleiste (Code)

Hinweis:

1. Der display=block des a-Tags macht den Link zu einem anklickbaren Bereich anstelle von Text.

2. Nachdem Sie einen Link als Blockelement angegeben haben, können Sie die Breite festlegen, damit die Breite jedes Links gleich aussieht.

Verwandte Empfehlungen:

div CSS-Navigationsleiste (Vollbild-CSS-Navigationsleiste)_html/css_WEB-ITnose

CSS Bild Navigation_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonCSS-Methode zur Implementierung der horizontalen Navigation und der vertikalen Navigationsleiste (Code). 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：Wie implementiert man einen Textverlauf in CSS3? Drei Möglichkeiten zum Implementieren eines Textverlaufs in CSS3 (Code)Nächster Artikel：Wie implementiert man einen Textverlauf in CSS3? Drei Möglichkeiten zum Implementieren eines Textverlaufs in CSS3 (Code)

In Verbindung stehende Artikel

Mehr sehen