HTML e CSS - Aula 07 - Como fazer um layout responsivo para smartphone, tablet e computador?
Nesta aula, você aprenderá recursos avançados do CSS para fazer a responsividade de um layout de uma página Web, incluindo responsividade de fontes, sidebar, bottom bar, etc.
Se você quer ser um(a) desenvolvedor(a) e aprender toda a formação necessária para isso, cadastre-se gratuitamente na plataforma FATECOINS Talent: talent.fatecoins.com.br, e conecte-se a empresas que estão buscando desenvolvedores de software.
Пікірлер: 5
Boa noite, professor! No meu browser (google chrome) a ação de abrir e fechar não está funcionando direito. Quando clico no fechar, só abre e fecha muito rápido a seção. O que pode ser?
@2guarinos
7 күн бұрын
Compartilhe seu código, por favor.
@joaoinaciosouza6108
7 күн бұрын
Responsividade function toggleMenu() { var nav = document.getElementsByTagName("nav")[0]; if (nav.className == "fechado") { nav.className = ""; } else { nav.className = "fechado"; } } Banner FecharF Home H Loja L Sobre nós S Dúvidas D Seção 1 Seção 2 Seção 3 Seção 4 Rodapé 1 Rodapé 2
@joaoinaciosouza6108
7 күн бұрын
body { padding: 0px; /* espaçamento zerado no body*/ margin: 0px; /*margem zerada no body*/ } header { background-color: black; height: 200px; } nav { background-color: yellowgreen; height: 60px; position: sticky; /*o menu vai ficar fixo, rolando na página.*/ top: 0px; z-index: 1; /*número de camada - indica quem tá na frente e atrás*/ } #secao-primeira { display: flex; flex-direction: row; /*direção dos retângulos é em linha*/ min-height: 200px; gap: 10px; } #secao-primeira div { flex: 1; background-color: orange; } #titulo-secao { text-align: center; } #secao-segunda { display: flex; flex-direction: row; /*direção dos retângulos é em linha*/ min-height: 200px; gap: 10px; /* o gap é sempre no pai*/ } #secao-segunda div { flex: 1; background-color: orange; } #texto-segunda-secao { min-width: 66%; /*o texto vai ocupar 66% do retângulo maior*/ } #logo { position: fixed; /*o absoluto não rola na página. Já o fixo, fica rolando na página.*/ top: 65px; left: 60px; height: 200px; width: 200px; background-color: rgb(255, 242, 1); z-index: 2; } /*formatando o rodapé footer*/ footer { position: fixed; width: 100%; height: 60px; bottom: 0px; left: 0px; background-color: darkblue; } /*O parágrafo precisa de um espaço, pois o rodapé está por cima*/ p { margin-bottom: 70px; }
@2guarinos
6 күн бұрын
@@joaoinaciosouza6108 por favor, assista a esta aula para aprender a usar o Git e GitHub e envie seu código para um repositório do GitHub, aí conseguirei ver exatamente como está seu código: kzread.info/dash/bejne/gWV_3M59grbKaNo.html