Oi, todo mundo.
Bem-vindo de volta.
Como é a quarta semana e
você está trabalhando em seu projeto final, o que eu quero fazer é mostrar
algumas das diferentes opções que você pode usar quando você está estilizando suas páginas.
E neste vídeo,
quero mostrar o que acontece quando você tenta fazer uma barra de navegação vertical.
Então aqui no meu navegador,
eu tenho como a página será quando terminarmos.
Mas vamos em frente e eu vou apertar atualizar e primeiro ver como seria
se eu tentasse fazer uma barra de navegação usando quatro links simples.
Novamente, os links são inline, então eles vão ao lado do outro.
Não tem cor.
Não há nada acontecendo.
E é realmente horrível.
Então deixe-me colocar esse estilo de volta.
Atualize a página.
E vou mostrar-vos como criei esta barra de navegação.
Vamos começar falando sobre o corpo.
Eu só coloquei alguma cor de fundo, estofamento e margem.
Isso não é muito importante aqui.
O importante é falar sobre nossa seção de navegação.
Uma das coisas que eu queria fazer é mostrar a vocês a idéia de
usar aquela caixa de tamanho de caixa.
O que isso vai fazer é tirar a necessidade de
você contar até quanta largura, quanta estofamento, quanta borda.
Você não tem que fazer as contas.
O navegador fará isso por você.
Eu coloquei em alguma borda simples, cor, cor de fundo, etc
A primeira coisa que eu fiz, porém, é que eu fiz inline-block,
porque eu quero que minha navegação seja ao lado das outras partes da minha página.
E como a navegação está bloqueada, não vai acontecer a menos que eu jogue lá dentro.
Então eu disse que queria que fosse cerca de 20% da página e, em seguida, adicionei alguma margem.
Agora, algo novo que você pode não ter visto antes é essa idéia de altura é
igual a 100vh.
Essa é a altura do visor.
Então isso significa que eu quero que a navegação ocupe toda a altura da sua página.
Eu não estou revestido duro para 400 pixels ou 200 pixels
, porque eu não sei quão grande é a tela que você está olhando.
Em seguida, vamos falar sobre os próprios comprimentos reais.
O que eu entrei e fiz é que eu tirei os links chatos regulares e
eu realmente os estilizei para torná-los algo um pouco mais original.
Então eu coloquei uma altura de quão alto eu quero que cada um dos meus links seja.
E então eu coloquei em um pequeno truque e
eu disse que eu quero que a altura da linha seja 45 pixels.
Então por que eu faria isso?
A razão seria que eu quero centralizar fotos de casa ou
eu quero centralizar as palavras dentro dela e é assim que eu posso fazê-lo.
O próximo tipo de coisa legal que eu fiz foi adicionar uma imagem de fundo.
Acrescentei estas pequenas setas.
E a coisa legal que eu tive que fazer que eu realmente quero apontar para você é que
eu não poderia simplesmente ligar para a pasta e depois para o arquivo.
Por causa da forma como configuro meu código, primeiro eu preciso dizer, oh, eu sei que estou na
pasta CSS agora, então eu vou voltar para a minha pasta principal e depois encontrar imagens.
Se isso é confuso para você, não se preocupe.
É um conceito totalmente novo, mas é algo que muitos de vocês vão
encontrar enquanto tentam vincular imagens da sua folha de estilos.
Tudo bem.
A última coisa que fiz foi adicionar um pouco de preenchimento, então há espaço para
a foto, e depois adicionar alguma margem.
Então, usando essas coisas diferentes sobre as quais já falamos, posição, desculpa,
exibição, altura da linha, URLs de fundo, fomos capazes de fazer algo
que eu acho muito legal para uma barra de navegação simples e vertical.
Vá em frente e experimente.
Boa sorte.