Como fazer uma barra de navegação em html?
Barra de navegação é o principal componente de qualquer página da web/site. Uma barra de navegação pode estar na direção horizontal ou vertical. Tendo em vista a importância das barras de navegação, este post descreve vários métodos para criar uma barra de navegação no HTML. Os possíveis resultados deste blog são:
- Como criar uma barra de navegação horizontal em HTML?
- Como criar uma barra de navegação vertical em html?
Método 1: Como criar uma barra de navegação horizontal em HTML?
Documento HTML é a combinação de centenas de tags. Cada tag refere -se a alguma funcionalidade específica. Além disso, você pode combinar vários elementos para criar um design personalizado também. Uma barra de navegação pode ser criada com a ajuda de
- e
- Tag. Esta seção fornece um guia detalhado para criar barras horizontais em HTML.
O código HTML para criar uma barra de navegação horizontal é exibido abaixo.
Html
Primeiro documento
Neste código:
- Nós criamos um .
- Dentro da lista é criada usando
- marcação.
- Para adicionar os itens em
- tag, inserimos os itens da lista usando
- marcação.
- Por fim, dentro da tag, inserimos os links para outras páginas HTML usando tag.
Para uma melhor apresentação, o seguinte código CSS é aplicado no HTML.
CSS
ul
estilo de lista: nenhum;
li a
Decoração de texto: Nenhum;
exibição: bloco;
flutuar: esquerda;
preenchimento: 10px 15px;
Size da fonte: 20px;
Background-Color: LightGray;
cor preta;
Font-Family: Georgia, 'Times New Roman', Times, Serif;
Li A: Passe o mouse
Background-Color: Lightsalmon;
cor branca;
No código acima:
- A propriedade de estilo da lista é definida como nenhum.
- Além disso, várias propriedades CSS, incluindo (decoração de texto, exibição, flutuação etc.) são aplicados nos itens da lista.
- Um efeito de pairar também é adicionado ao marcação.
Saída
A saída mostra que criamos com sucesso uma barra de navegação horizontal usando HTML e CSS.
Método 2: Como criar uma barra de navegação vertical em html?
Os ingredientes primários (
- ,
- ) são os mesmos para barras verticais e horizontais. Portanto, é fácil criar uma barra vertical. Neste exemplo, exercemos o seguinte código para criar uma barra de navegação no HTML:
Html
Primeiro documento
Neste código:
- Nós criamos uma lista usando o
- marcação.
- Dentro de
- tag, inserimos os itens da lista usando o
- marcação.
- Em seguida, inserimos os links para outras páginas HTML usando tag.
Para uma melhor estética da barra de navegação, usamos o seguinte código CSS e colocamos em um arquivo CSS externo:
CSS
ul
estilo de lista: nenhum;
li a
Decoração de texto: Nenhum;
exibição: bloco;
Largura: 180px;
preenchimento: 10px 15px;
Size da fonte: 20px;
Background-Color: LightGray;
cor preta;
Font-Family: Georgia, 'Times New Roman', Times, Serif;
Li A: Passe o mouse
Background-Color: Lightsalmon;
cor branca;
No código CSS acima:
- O estilo da lista é definido para nenhum.
- Vários estilos são aplicados nos itens da lista.
- Por fim, o efeito pairar é aplicado nos itens da lista também.
Saída
A saída mostra que criamos com sucesso uma barra de navegação vertical.
Aqui você vai! Você aprendeu a criar uma barra de navegação horizontal e vertical em HTML.
Conclusão
No HTML, podemos fazer uma barra de navegação criando uma lista simples usando
- ,
- e tags. Uma barra de navegação pode ser vertical ou horizontal. Além disso, você pode adicionar vários estilos a ele aplicando o CSS. Este post demonstrou os métodos para criar barras de navegação no HTML. Com a ajuda de uma barra de navegação, pode -se navegar até as várias páginas do site.
- Nós criamos uma lista usando o