CSS-Methode zur Implementierung der horizontalen Navigation und der vertikalen Navigationsleiste (Code)-CSS-Tutorial-php.cn

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

不言

Freigeben： 2018-08-21 10:53:43

Original

17550 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!