HTML e CSS - Aprenda a criar 5 layouts de sites mais comuns na Internet [FLEXBOX]

E aí [Música] E aí E aí [Música] E aí E aí [Música] E aí o Olá Neste vídeo Vamos criar os layouts de página HTML mais comuns encontrados na web durante a criação dos layouts você vai aprender a utilizar tags semânticas do HTML propriedades Flex posicionamento dos elementos responsabilidade EA manipulação de CSS com JavaScript para criar animações Então bora para o código em um editor de texto Vamos criar a sintaxe básica do HTML ela é composta pelo doctype que indica que o documento é um arquivo HTML a tag HTML representa todo o documento ela possui

o atributo lenda que define a linguagem do conteúdo da página que será português do Brasil a casa de sua página esteja em outro idioma indique a sigla do país e em seu interior Abrir que contém informações sobre a página essas informações estão definidas em tag mera para especificar o conjunto de caracteres descrição da página palavras-chaves autor do documento e configuração na janela de visualização neste documento o conjunto de caracteres Será utf-8 que contém acentuação e cedilha e a configuração de janela de visualização que trabalha com escala a instrução viu por com a propriedade Weed controla

o tamanho da janela de exibição o valor device Weed representa a largura da janela do dispositivo considerando uma escala de 100 porcento a propriedade Mitchel skew controla o nível de ampliação quando afasta encarregada pela primeira vez especificada ou com o valor 1.0 que representa a escala 1 para 1 esta configuração serve para quê e tenha seu design responsivo se adaptando é diferentes tipos de tela como PC smartphone até Guitar Hero definir o título que será apresentado na aba do navegador vou colocar por título layout a Dori contém todo o conteúdo que será apresentado ao visitante

em seu interior definido tags semânticas que possuem significado para tornar o código mais claro para programadores clauses e buscadores os buscadores utilizam conteúdo do site para encontrar palavras-chaves sendo um fator que pode influenciar no ranking de buscas com a tag header representa o grupo de elementos que compõem o cabeçalho da página como banner logo formulário de pesquisa ícones e menus de navegação a tag Navy agrupa um conjunto de links de navegação do site Man A grupo conjunto principal da página ou aplicação Assad contém informações e links relacionados ao conteúdo principal poder definir o rodapé para

a página ou seção ela pode conter informações de autoria direitos autorais contato mapa do site jeans e documentos relacionados com esses elementos já é possível criar os layouts o que falta agora é aplicar a formatação o estilo para cada um dos elementos e o CSS pode ser adicionado de três formas da própria tag com a propriedade Style de dentro da tag Style definido dentro da UFPE é um arquivo externo em uma tag denominada like onde é passado o caminho do arquivo seguindo As convenções para nomenclatura o nome do documento deve conter apenas letras minúsculas de

a a z números de 0 a 9 sublinhado hifens em espaços há três formas de associaram uma tag com seletor CSS a partir do próprio nome da Ted definido a propriedade Class eu vou por um AD estes eleitores possui uma hierarquia na qual as propriedades aplicadas pelo nome da tag são substituídas pelas definidas em uma classe e as propriedades definidas em vai de sobrepõe as das classes e as definidas pelo nome da tag é definido um Eyed que é um identificador único Ele só pode ser utilizado uma única vez ou seja em uma única tag

eu vou começar o cfs dentro do arquivo HTML e depois passar para um arquivo externo o seletor* aplica formatação para todas as tags e para formatação individual um seletor para as tags banner header Neve Man Side e fodem como os navegadores possuem uma formatação padrão das tags vou remover a margem de todos os lados o espaçamento interno dos elementos e incluir o preenchimento EA borda na largura e altura todos os elementos terão sua exibição flexível o que faz com que o elemento se torna flex-container e os elementos internos reflexo e itens por padrão os elementos

ficarão agrupados em vinha outra característica é que independente do número de elementos internos eles ficaram compactados numa linha ultrapassando o limite do conteúdo falando um pouco mais sobre o dspace e o container é o nome aplicado a todo o elemento que possui a característica de agrupar outros elementos ele também recebe o nome de elemento pai enquanto itens são os elementos internos de um contêiner e podem ser chamados de elementos filhos eu vou adicionar margem todos os lados de 3 pixels para separar os containers aplicar a propriedade Flex aos itens que é a junção de flex-grow

waxwing reflexo Deise o flex-grow habilidades um flex-item crescer o padrão é zero porém ao definir o valor um todos os filhos do flex-container tentado a um ter a mesma largura caso tem elementos definidos com flex-grow um e um deles estiver com técnico ou dois ele tentará ocupar duas vezes mais espaço que os definidos como o valor um flex-shrink capacidade de redução do item o padrão é um que permite a redução para caber no contêiner com 0 o elemento não permite a redução dos itens valores do médicos reduz mais que os demais itens com valor inferior

por exemplo se três diminui três vezes mais do que um elemento com valor um sexo base definir o tamanho inicial do item tendo como valor padrão alto fazendo o item se adaptar ao tamanho do seu conteúdo O porém ser definido como 0 ele tentará manter todos os elementos com a mesma largura pode-se aplicar as unidades porcentagem em pixels entre outros como atalho para estas propriedades é definido a propriedade Flex informando flex-grow com valor um black steel in com valor um efex desde sempre w que corresponde a 100 porcento da largura horizontal da janela de visualização

e para visualizar os elementos o aplicar a cor cinza os elementos continuam sendo colocados em linha mesmo que eles tenham sido definidos para ocupar sem por cento da tela isso ocorre por causa do alinhamento padrão do display Flex para que eles passem a ter o tamanho especificado em flex é necessário adicionar a propriedade Flex Watches do contêiner pai permitindo quebra de linha entre os elementos quando não couberem na largura da tela desta forma basta adicionar o conteúdo para que os elementos expandam verticalmente e [Música] para ter o segundo layout para o alterar o tamanho inicial

da neve para 200 pixels e também 200 pixels para o açaí é e em bem definir o tamanho inicial para 500 pixels e 20 para Flex World indicando que ele crescer a 20 vezes mais que os outros elementos de mesma forma basta adicionar o conteúdo para que os elementos expandam verticalmente esta formatação permite um design responsivo pois quando os elementos atingir o seu tamanho demite e finidos em sites base ele passa para linha de baixo como a formatação se repete entre os elementos vou colocar os seletores separados por vírgulas remover as propriedades com valor em

comum a cor e a exibição flexível Oi e a margem no entorno dos elementos assim a folha de estilo fica mais compacto O porém pode se está desenvolvendo o sistema e queira que a página não apresente rolamento vertical então deve-se aplicar uma altura fixa para cada elemento arrepender e folder neste layout terá 100 pixels altura da bem fácil uso da função Calc para realizada a subtração de 100 porcento da altura vertical - a soma da altura da header folder EA margem aplicado no entorno dos elementos de 3 pixels que corresponde a 224 pixels ou reduzir

o tamanho da página os elementos continuam se adaptando porém permite o rolamento o seu navegador ao pressionar f12 é apresentado o ficheiro que contém várias informações sobre a página com clique no botão de modo de alternância de dispositivo é possível capturar o tamanho exato da primeira transferência que ocorre em 923 pixels com este tamanho é possível criar uma regra mídia para alterar o estilo da página as regras mídia permite alterar o estilo de um elemento para ser apresentado em diferentes tela as mídias podem ser utilizadas para verificar a largura EA altura da janela de visualização

largura EA altura do dispositivo orientação e resolução e nesta aplicação a primeira regra verifica-se a tela do dispositivo não é maior que 923 pixels no caso positivo as propriedades adicionadas são aplicados no elemento não sendo necessário adicionar todas as propriedades definidas anteriormente apenas as que terão mudança Amém deverá receber uma redução de mais 100 pixels definido no ato Side mais três pixels da margem anterior o que resultará em 330 pixels e desta forma o ative ter a propriedade Flex alterada para ocupar sem por cento do espaço horizontal e ter uma altura fixa que colocarei em

pixels E aí a nova regra Paraná e para mim quando não couberem na mesma linha e obtendo o tamanho exato da mudança que é d717 fixo é a nave para exemplificar terá 100 pixels de altura que deve ser descontada também que de 330 passará a ter 436 pixels descontado o tamanho da na mais a margem superior e inferior di 3 pixels E aí E aí é o terceiro layout terá o menu abaixo do cabeçalho desta forma voltas E terá navio com cem porcento da largura horizontal e definido altura de 100 pixels e a reduzir a

altura da mente de 224 para 330 pixels não sendo mais necessário é a regra de largura d717 pixels mas na regra de 923 deve ser adicionar a altura atribuída a nave e sua margem que ficará em 436 bom criar um menu para exemplificar criando tags em com a propriedade agarrar que recebe o endereço de destino como esta página ainda não existe vou colocar a #que referencia a página atual quando estas páginas foram criadas elas podem ser substituídas pelo endereço relacionado como os links possuem uma formatação padrão Ou remover o sublinhado o e definir a cor

para o padrão do elemento pai que é preto para dispor os links ao centro vou alinhar o conteúdo na horizontal ao centro e centralizar verticalmente os links terão margem de cinco porcento Oi e a Fonte terá o tamanho de 20 opções E aí E aí E aí E aí é o quarto layout será colocado o menu não cabeçario bastante vou criar um link para o logo com a propriedade Eyed para referencial e no CSS e adicionar a nave e [Música] e no CS pelo Haiti logo Vou definir a propriedade flex não qual ele não vai

crescer redução padrão um com tamanho inicial de 200 pixels definir uma cor cinza um pouco mais claro para diferenciar na nave remover o tamanho fixo da altura desse em pixels e posicionar um menu à direita ou diminuir para três por cento à margem dos links porém ao reduzir a largura da página a nave e sobrepõe ao longo sendo comum ocultar sua exibição e com o botão de menu o apresentar com a mudança no local do menu sobrou espaço na página vou voltar para 224 pixels no cálculo da altura da amém em sendo necessário alterar o

valor da altura também na regra mídia para 330 pixels Tô [Música] voltando para exibição do menu 1 e o botão de exibição terá wide open Man 11 e com o código PIN selenia symbols and extend hash 9776; que é interpretado pelo navegador como os três traços tradicionais que representam o menos e o botão x com a edículas meio para ocultar a exibição em eu vou remover a decoração padrão dos botões removendo a borda bom e a cor [Música] como aumentar a fonte para 30 pixels e espessura a criar imagem à direita e esquerda de 5

pixels alterar o cursor do mouse para ponteiro quando passar por cima dele e o contrário exibição Pois somente será apresentado quando a largura da tela for inferior a 717 pixels tento a sua visualização e tornada para Flex ou conter na terá a posição fixa deixando de fazer parte do fluxo normal ficando sobreposto aos demais elementos da página seus itens ficarão em coluna ocupar a 100 porcento da largura e 100 porcento da altura da página é a cor de fundo utilizarei a função rgba que define a cor com RGB que varias cores em sistema aditivo de

vermelho verde e azul definindo a intensidade de cor com o número inteiro entre 0 e 225 onde os três valores tendo zero é preto e todos os valores 255 branco mas o valor de Transparência que pode variar e no intervalo entre 0 e 1 colocarei 0.8 vou alinhar o conteúdo na horizontal ao centro e centralizar verticalmente o que remover a margem de todos os lados o botão Cruz meio ficará no canto superior esquerdo então será necessário definir que a sua posição será fixa em relação ao container assim é possível dispor em pixels a distância à

direita e ao topo de 15 para que Ele apareça Apenas quando o botão menu receber clique será necessário ocultar sua visualização com display None e com JavaScript manipular esta propriedade para o tornar visível novamente antes de escrever o script vou posicionar o botão Open menu à direita utilizando o valor alto que indica que o espaço horizontal a esquerda será Todo o espaço não utilizado pelos elementos contidos dentro da na não será necessário definir o Edi medo na nave para que assim seja possível manipular com JavaScript e java script assim como o CSS pode ser criado

junto ao arquivo HTML ou em um arquivo separado utilizando a tag script e o documento HTML Assim como as tags possuem métodos denominados é bem que são executados conforme interação do usuário na página Olá neste Street será necessário capturar o evento clique sobre o botão Ou pelo menos a partir da função diabo eles têm que recebe como parâmetro o nome do evento e a função utilizarei a forma curta denominada eram from quando for executada ela vai adicionar o atributo Style na tag na que está referenciada pela Ed - alterando a propriedade spray para Flex quando

o botão Close mínima receberam clique a função a ele associado vai remover o atributo Style tá nav-menu que remove todas as propriedades nela definida e essa transição de um estado para outro pode ser mais suave adicionando a propriedade Ou passa de com valor zero um zero e invisível eo visível adicionando um tempo de transição de três décimos de segundo agora quando o menu Open menino receber clique ele vai adicionar também a propriedade opacidade com o valor 1 bom e quando foi fechado o valor de eu passo de volta a ser 0 e observe que pelo

fato das propriedades serem colocadas e removidas em mesmo tempo de execução a transmissão não ocorre como esperado assim se deve atrasar execução com a função set time-out que recebe dois parâmetros a função a ser executada e o tempo de atraso em Minas segundos que colocarei 10 movendo a adição da propriedade opacity para dentro dela desta forma assim que a função for executada ela passará a ser visível porém qual parte cidade será somente quando passaram os dez minutos segundos é que mudará para um respeitando o tempo de transição de três décimos de segundo definidos no CSS

vamos aplicar o set time-out no botão fechar para que somente depois de 200 mil segundos a propriedade Style seja removida do elemento eu vou adicionar mais um efeito que faz com que o menu deslize tá direita para esquerda foi definido que a nave ocupe Todo o espaço vertical como não sabemos Qual é a dimensão da tela do dispositivo a qual a página está sendo executada devemos capturar em tempo real esta dimensão utilizando a propriedade offset with no elemento Navi x menos 1 para que ele fique posicionado fora da tela e após os 10 meses segundos

ele vai para a posição zero à esquerda e quando for fechado irá mover um minuto para fora da tela antes da propriedade Style ser removida do elemento só falta apenas ocultar o botão Open Menu quando receber o peito bom e quando o menino foi fechado voltará eximiu a É mas esse seu design foi com a Side a esquerda para alterá-lo para cima da Man e em telas grandes essa alteração já resolve por em telas menores ele fica antes do conteúdo principal o que não É desejado então aplica-se a propriedade ordem dos elementos com Taylor o

cabeçalho com valor zero principal com valor um relacionado dois e rodapé 3 E assim a ordem de exibição se mantém e o layout para sistema o conteúdo pode ultrapassar o espaço limite do container para exemplificar esta situação vou criar uma seção no conteúdo principal com altura de 2 mil pixels e para diferenciar dos demais elementos o aplicar um Gradiente com três tonalidades de Cinza recarregando aplicação temos que o tamanho fixo da man não permite acompanhar o conteúdo que ultrapassa o limite do container E nesta situação o overflow auto habilita a barra de rolagem no elemento

e todo o seu conteúdo será mantido em seu interior [Música] a todos os layouts podem ter o rolamento vertical livre Ou seja que se adapta ao conteúdo para isso remova todas as propriedades rei de todos os elementos contenham E aí e [Música] se esse conteúdo Foi útil Não deixe de deixar o seu joinha [Música] o Google utilizando a barra de rolagem a barra de rolagem do navegador é um elemento que pode ser modificado pelo CSS Porém esse recurso não é padrão não sendo recomendado para uso em produção pois pode não funcionar para todos os usuários

também pode haver incompatibilidade entre implementações e o comportamento pode mudar no futuro mas sempre é bom saber que a possibilidade existe então vamos implementar o recurso para os navegadores mais conhecidos para O Firefox é possível apenas alterar as propriedades de largura e cor e com o seletor* vou aplicar as propriedades a todas as barras seja do navegador quanto dos elementos com a propriedade Escobar with definir a largura da Barra que colocarei 12 pixels a Skol barcolor que define a cor do botão deslizante e a segunda cor o fundo Oi para o Chrome e diy Safari

e ópera é utilizado o pseudo-elemento webkit-scrollbar que possui mais propriedades de formatação com webkit-scrollbar é definido a largura da barra de rolagem o webkit scrollbar Web a cor de fundo e eu webkit-scrollbar John acordou botão deslizante o arredondamento [Música] o e borda E aí e para a organização do código você pode separado em arquivos ou criar a pasta as redes e dentro dela criar os arquivos Style pontos ss e script. JS e no arquivo CSS não é necessário definir nenhum tipo de cabeçario mas é recomendado definir o conjunto de caracteres que colocarei utf-8 movendo o

código CSS para ele e no arquivo HTML criar a tag link passando o caminho do arquivo Oi para o javscript adicionar o atributo S6 informando o caminho do arquivo a remover o conteúdo da tag para o arquivo isscript.msi eu estou deixando a página do hit Ruby na descrição com todos os modelos de layout apresentados Neste vídeo Espero que este conteúdo seja útil Obrigado por assistir a esse vídeo e até o próximo 1 [Música] E aí