Como Criar Um Menu Horizontal em HTML e CSS | MENU Com HTML e CSS

Подписаться 4,8 тыс.

Просмотров 17 тыс.

50% 1

Como Fazer Menu Horizontal Com HTML e CSS | MENU Com HTML e CSS
👉Clique Aqui: bit.ly/334OGxc
✅Neste vídeo você vai aprender a criar um menu horizontal em html e css.
Para fazer um menu com html e css é preciso criar uma tag do tipo nav(que é uma tag semântica) dentro dela vamos criar uma div com a class igual a logo e outra tag(fora da div com a class igual logo) do tipo ul(lista desordenada) e dentro dela vai ficar o nosso menu feito em html e css, continuando vamos criar uma tag do tipo li(list item) onde vai ficar cada item do nosso menu horizontal.
👌Então se quiser Aprender a fazer um menu horizontal bonito em html e css, fique comigo até ao final.
Link da imagem: github.com/matheusmanuel/Arqu...
🎃Não Clique🎃: bit.ly/334OGxc
🤞Deixe seu like e se subescreva no canal🤞
❌Link Importante❌: bit.ly/334OGxc
=====👉Converse Comigo👈=====
⚡Instgram: / matheusmanuel.dev
⚡Github: github.com/matheusmanuel
=====👉Links Importantes👈=====
Se subescreva no Canal: / @matheusmanuel
🔥Me Ajude: bit.ly/334OGxc
Obrigado, 💕Matheus Manuel
#MatheusManuel #MenuHorizontal #menuHtmlCSS #html #css

Наука

Опубликовано:

13 фев 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 35

@MiguelSilva-wp6gg 4 дня назад

Ola amigo, eu sou novo nessa area de programação, queria saber como faço pra funcionar os botões, por exemplo, clicar no botão home e ele funcionar. Captou? Ficarei grato pela ajuda.

@MatheusManuel 2 года назад

🔥Me Ajude🔥: bit.ly/334OGxc 🛑5 ERROS QUE UM INICIANTE COMETE QUANDO ESTUDA PROGRAMAÇÃO: bit.ly/ebook-5-erros-que-dev-cometem

@marcoslopesdasilva5383 2 года назад

Excelente!!

@user-wu9pe7ig2w 3 месяца назад

Funciona se eu fazer o código apenas no html?

@trevorjones8332 Год назад

Sem palavras para o seu trabalho, você me ajudou muito, deus te abençoe sempre!!!

@MatheusManuel Год назад

Obrigado amigão que deus te abençoe em triplo

@willenthiran2995 Год назад

Top demais. Código super simples com um resultado incrível. Parabéns.

@MatheusManuel Год назад

Obrigado 😊

@MatheusManuel Год назад

Obrigado 😊

@sucessodosdeuses 2 года назад

Bom d+

@lucasyoshimoto2975 2 года назад

Parabéns pelo conteúdo..

@MatheusManuel 2 года назад

Obrigado 🙏!

@diegoguimaraes420 Год назад

MUITO OBRIGADO!

@MatheusManuel Год назад

De nada!!

@marcelodev Год назад

meu texto quando tem duas palvras tipo "FALE COMIGO" esta um embaixo do outro, como corrigir?

@MatheusManuel Год назад

Tudo de bom Marcelo blz!! então existem muitos factores que pode levar a esse bug blz!! então aplica ai um padding no link(tag a) tipo por ex: nav ul li a{padding: 10px 40px} vai testando ok! o primeiro numero do padding que é 10px significa que ele vai aplicar um padding pra o eixo y(pra cima e pra baixo ) e o segundo valor que é 40px significa pra o eixo x!!Espero Ter ajudado se quiser me chame lá no insta(link na descição)

@capitaodazuera2901 Год назад

Vídeo excelente.

@MatheusManuel Год назад

Obrigado 😃

@justinacesar8735 Год назад

Parabéns pelo vídeo

@MatheusManuel Год назад

Obrigada 😃

@user-fl1et6vr9h 4 месяца назад

o seu código n deu certo

@diegoguimaraes420 Год назад

Não sei ainda o pq o meu Nav ul li a{ Não vai para o lado direito 🙄

@MatheusManuel Год назад

Olá Diego espero que esteja tudo bem!!! Verifique se vc aplicou um display:flex; align-items:center e um justify-content: space-between na tag nav lá no css

@sucessodosdeuses 2 года назад

👌👌👌

@gabrielteixeira6344 Год назад

Cara vou estudar aqui pelos seus vídeos, posso??? Kkkk

@cjagiota9276 2 года назад

Boa tarde, quando eu tento colocar uma imagem de fundo pelo body a imagem não vai, alguém me ajuda?

@MatheusManuel 2 года назад

boa tarde dev! Para colocar uma imgem de background no body basta digitar: body { background-image: url(caminho_da_imagem); } Agora para colocar uma imagem de background com uma cor gradiente por cima basta digitar: body { background-image: linear-gradient(#0000001c,#00000063),url(img.webp); } Se não ajudou comenta de volta para que eu possa disponibilizar o codico-fonte

@cjagiota9276 2 года назад

@@MatheusManuel eu consegui colocar a imagem, mas esta acontecendo um problema de a imagem só estar aparecendo por partes quando eu clico em algum texto ou quando eu clico em alguma outra parte da tela e quando eu dou alt+tab para o vscode e dps eu dou outro alt+tab para o site de novo a imagem aparece normal, sabe como resolver isso?

@MatheusManuel 2 года назад

Nisso eu não consigo ajudar mas tente outro formato de imagem ou tente aplicar um min-height:100vh; no body,

@AliceMingo11 Год назад

Oi sou Alice Mingo,e não entendi muita coisa

@ciprianovictor9997 Год назад

Teria os codigos copiado?

@MatheusManuel Год назад

Olá Cipriano! Eu não entendi bem a questão!

@frankiando 3 месяца назад

Aqui está o código em CSS. Tive que corrigir umas Tag para funcionar: * { margin:0; padding:0; box-sizing: border-box; } body{ background-image: url(img.png); background-image: linear-gradient(#0000001c,#00000063), url(img.png); background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 100vh; } .container{ max-width: 1400px; position: 3%; margin: auto; } nav{ display:flex; align-items: center; justify-content: space-between; margin-right: 20px; } .logo{ font-size: 35px; font-style: italic; color: white; font-weight: bold; margin-left: 25px; margin: 25px; } ul li { display: inline-block; } ul li a{ padding: 10px 20px; text-decoration: none; font-size: 19px; color: white; border-radius: 30px; transition: 0.6s; font-style: italic; } a:hover{ background-color: #007bff; }