Como criar uma barra de menu no topo com CSS
Para adicionar uma barra de menu no topo usando CSS, voc↑ pode seguir os seguintes passos:
- Crie uma estrutura HTML b£sica para o menu:
<nav>
<ul>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
</ul>
</nav>
- Estilize o menu usando CSS:
nav {
background-color: #000;
height: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 20px;
}
a {
color: #fff;
text-decoration: none;
padding: 10px;
}
a:hover {
background-color: #333;
}
- Adicione o CSS ao seu arquivo HTML:
<!DOCTYPE html>
<html>
<head>
<title>Barra de Menu</title>
<link rel='stylesheet' type='text/css' href='styles.css'>
</head>
<body>
<nav>
<ul>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
</ul>
</nav>
</body>
</html>
Agora voc↑ ter£ uma barra de menu no topo, onde cada item do menu ser£ exibido horizontalmente. Voc↑ pode personalizar as cores, o espaamento e outros estilos de acordo com suas necessidades.
原文地址: https://www.cveoy.top/t/topic/qz7A 著作权归作者所有。请勿转载和采集!