Oi, todo mundo.
Bem-vindo de volta a outra revisão de código.
Anteriormente, criei uma barra de navegação que funcionava verticalmente.
Foi para cima e para baixo.
Hoje, eu só quero mostrar como você pode usar o mesmo código HTML, mas
criar uma barra de navegação horizontal, em vez disso.
Então, vamos dar uma olhada.
Quero ir a algo que se pareça um pouco mais com isso.
E, além de ter ido a uma barra de navegação horizontal, quero mostrar a vocês
um exemplo de mostrar qual página é a que estamos olhando atualmente.
Então, se você notar, na barra de navegação,
o link de fotos parece um pouco diferente dos outros.
É muito comum fazer isso para indicar às pessoas que
esta é a página que você está olhando agora.
Então vamos dar uma olhada no CSS e ver como eu peguei HTML simples e
transformei em algo onde eu tenho uma barra de navegação bem estilizada.
Tudo bem, vamos começar dizendo, você sabe o que?
Queremos estilizar todos os links que estão na barra de navegação.
Eu não quero estilizar todos os links, em vez disso,
eu quero indicar apenas os links que estão dentro nav.
E uma vez que fazemos isso, foi bastante simples para mim ir em frente e colocar em que eu quero
uma certa altura, uma certa cor de fundo, uma certa decoração de texto.
Uma das coisas que adicionei aqui é um raio de fronteira. O
raio da borda curva as caixas, então
se você olhar, tudo está um pouco curvado aqui ao longo do lado.
Nada muito importante ali.
A próxima coisa que tenho,
a nova, é a ideia de ter uma classe chamada corrente.
O que a classe atual faz, é que basicamente é uma maneira de etiquetar.
Ei, você sabe todos os links diferentes que estão na minha página?
Quero te mostrar para qual estou olhando agora.
E tudo o que eu fiz aqui foi ir e definir para
que eu tivesse uma cor de fundo diferente.
Tudo bem.
Então, foi bastante simples criar essa
barra de navegação horizontal, desde que você tenha muito cuidado sobre espaçamento entre as coisas.
Então, mais uma vez, eu só quero mostrar a vocês que coisas como estofamento e
margem são muito importantes e são muito aditivas.
Então, quando você usa porcentagens, em vez de pixels, ele vai impedir
que ele fique bem em uma tela grande e, em seguida, muito ruim em uma tela pequena.
A última coisa, eu meio que coloquei aqui apenas para ter um pouco de diversão e
para ajudar a mostrar novamente algumas das coisas diferentes que você pode fazer com CSS,
é que eu adicionei um estado de foco para qualquer um dos meus links de navegação.
Então, se você der uma olhada, eu entrei aqui e
disse que quando alguém paira sobre a página, eu quero mudar a cor do texto
e eu quero me livrar de toda essa coisa de raio de fronteira.
Então vamos dar uma olhada.
Vá até aqui, vou
passar o mouse sobre as receitas e o texto é transformado de branco para preto, e vai de círculo para quadrado.
Agora, novamente, à medida que repasso todos esses exemplos diferentes com você, é realmente
importante que você perceba, que eu não sou um artista, e eu não sou muito artístico.
E eu estou esperando que você possa pegar esses trechos de código e
transformá-lo em algo que parece realmente ótimo e personalizado para
a página que você está tentando criar.
Então vá em frente, divirta-se e agora tente criar uma barra de navegação
que vá de todas as maneiras diferentes, para cima e para baixo, para os lados, ou até mesmo combinações.
Boa sorte.