Maîtrise de HTML5 et de CSS3 pour les débutants

1. Promoção: Você está procurando um curso que irá levá-lo de um iniciante completo para construir seu próprio site de antepassados HTML? Ou talvez você já conheça algum XML e CSS. O que? Você luta com a construção de um site do mundo real. Se ele respondeu sim a qualquer uma dessas perguntas, você veio para o curso branco. Oi, meu nome é Alex. Como me acompanhar para o meu html cinco e CSS três curso de mestrado. Agora, este é o custo de projetado especificamente para mostrar como você pode se inscrever. HTML NCs diz para construir sites responsivos guerra real, o curso é dividido em várias seções na 1ª 2 seções. Vou apresentar-lhe os conceitos básicos de HTML e CSS, e, em seguida, na seção três irá aplicar o que você aprendeu na 1ª 2 seções para construir este belo site responsivo da ala riel. Agora, este curso não é apenas sobre codificação. Além disso, para aprender sobre a história externa de cinco incesto, vou mostrar-lhe como você pode otimizar o seu lado positivo para a velocidade e para esses motores S C o. Vou apresentá-lo aos nomes de domínio eram Holston e, finalmente, vou mostrar-lhe como você pode iniciar a vida do seu site na Internet. Há também seções especiais dedicadas a ensiná-lo sobre o básico do PHP, onde você aprende como deixar você chateado, mais interativo. E há também uma seção dedicada a ensiná-lo sobre o básico fora Web design para que você aprenda como você pode projetar belos sites modernos para você ou para seus clientes, porque também vem em mais de 11 horas de conteúdo, questionários, atribuições, atribuições relativamente recursos, e você nunca obter ações em qualquer lugar no curso Alberta para fornecer-lhe apoio o mais rápido possível . Agora, se você já quis aprender sobre HTML cinco história incessante. Este é o curso perfeito para você e eu espero que sim no curso, e eu espero que você veja por dentro ela é. 2. introdução a HTML: Tudo bem. Então vamos falar sobre H t m l. O que exatamente é HTML? Bem, isso significa a linguagem de marcação de hipertexto. Isso é exatamente o que H t m l representa. Então a grande questão agora é OK, tudo bem. O que exatamente HTML faz? Bem, eu gosto de usar essa analogia quando todos explicáveis. HTML é imaginar que um site é o corpo humano. Certo, pense nisso por um minuto. Esse site é um corpo humano. HTML seria o esqueleto que os corpos humanos. É basicamente como o núcleo estrutural de um site. Você não pode ter um site. Nós saímos html. É praticamente impossível. Então basicamente oito formas semelhantes a espinha dorsal ou o esqueleto de uma tosse, cada página web na Internet, você não pode ter uma página web sem HTML. Tem, como ter um corpo humano sem uma frigideira, e não é só isso não vai acontecer. Então isso é basicamente o que H M L é. Então o que eu tenho aqui é uma ajuda muito simples a tm na Internet, e o que você pode ver aqui é principalmente apenas texto. Mas ele também pode ver uma imagem bem aqui. Então, se eu quisesse dar uma olhada no código por trás desta página. Estou usando o navegador corajoso. Então, se eu usei controle você, isso vai me levar para a fonte da página. O código-fonte da página. Eu acredito que controle você também é aplicável para o Google Coombe. Se você estiver usando o Firefox ou talvez até mesmo o navegador safari, ele pode ser diferente. Mas se você clicar com o botão direito, você deve dizer algo que Cesar ver página. Então é apenas clicar nele e você deve ser capaz de ver o código para a página. Então, o que? Aqui você pode ver o jargão, Zaid o código eles muito em código sexy por trás disso na página sexy. Então, muitas das coisas que você está vendo aqui é HTML. Mas não é apenas uma semelhança. Além disso, tem algum javascript assim. Mas não se preocupe. Vamos nos concentrar nas partes html. Então aqui, você pode ver h um exemplo de uma página externa simples. Você pode ver a linguagem de marcação de hipertexto da tag P. Ah, classe P. Tudo o que você está olhando aqui é idade TM L mas não se preocupe. Vamos lidar muito, muito mais fundo em html. Vou explicar exatamente a estrutura central. E ah, você terá uma compreensão muito melhor de como XML funciona. Por trás do sentido neste vídeo são apenas não iria apresentá-lo para HTML e também dar-lhe um exemplo de como o código-fonte de HTML se parece. Então isso é, eu acho, muita sorte. Vejo-te na próxima aula. 3. Escrevendo nosso Primeiro código de HTML: Vamos fazer algo divertido logo de cara. Ok? Vamos criar nossa primeira página HTML agora. Sei que não sabe HTML, mas não se preocupe. Apenas confie em mim. Isto vai ser divertido, está bem? Quero que crie uma pasta em qualquer lugar de um computador, por exemplo. Eu estou na minha pasta de documentos, e eu vou criar uma nova pasta, e eu vou chamar esta pasta de HTML muito bem. E então dentro dessa pasta, eu vou criar um novo arquivo e você toma documentado pelo documento de texto, e nós vamos apenas nomear o novo documento de texto. Vou abrir agora. Dentro do documento. Nota divertida. Almofada. Confira isso. Ok, eu vou fazer isso. Vou abrir alguns colchetes, vamos digitar H um, e depois vou dar as boas-vindas. E então eu vou digitar H um novamente. Mas agora, na frente deste H um, o 2º 1 vou adicionar um Ford Slash, ok, e depois uma nova linha. Eu vou fazer algo parecido, mas desta vez vai ser um P. E então eu vou dizer que meu nome é Billie Jean. Tudo bem. E então eu vou fechá-lo como com um mastigar em uma barra de telefone e, em seguida, ap Você entendeu isso? OK, agora eu vou ir em frente e acertar arquivo, e eu vou salvar o traseiro. Todos os arquivos. Mas agora o nome. Eu vou mudar o nome para Billy dot h t m l Tudo bem. Eu vou em frente agora e salvar. E agora dentro dessa pasta, você deve ver Billy que HTML basta clicar duas vezes nele. E você vai. Estou usando o PC. Então, por padrão, Internet Explorer é meus poderes padrão são para que ele é abri-lo e Internet Explorer, e como você considera agora, ele salva. Bem-vinda. Meu nome é Billy Jean. Espero que tenha resultados semelhantes. E se você fez parabéns. Dê, na verdade, apenas dentro do seu primeiro pedaço de código semelhante 4. Instalando os Brackets: para o resto deste curso, vamos andar com um texto e ele ou para iluminar e editar nosso código. E agora há um monte de Texas aqueles lá fora. Mas a única velha recomendação seria colchetes por muitas razões. Um é o fato de que ele é gratuito, e segundo é o fato de que ele foi construído especificamente código HTML e CSS completo. E também é compatível com Boat Ah, PCs e Macs. Então, é uma ótima escolha. Já é confortável andar com outro tipo de texto que eu levei. Por todos os meios, você pode ficar com um editor de texto. Você vai ficar bem, mas eu vou usar colchetes. Basta ir para o Paquistão I o. e e simplesmente clicar no Bolton azul que diz que é suportes de download. Agora, a instalação real de registros é bastante simples. Na primeira página, você pode ver algo como isso, você pode simplesmente marcar estas duas caixas que irão adicionar colchetes para o caminho para ficar online e, em seguida, também para explorar. Você pode verificar isso, também. Você não precisa que é normalmente chamada próxima e clique em instalar, e isso é praticamente isso Então você quer esta mensagem? Ei, você sabe que você quer permitir que isso faça mudanças? Sim, basta ir em frente e clicar. Sim. E, hum isso é ah, basicamente é muito, muito simples. Nada complicado. Não deve demorar muito para instalar suportes. E, ah, só vou esperar por alguns, ok? Vou pausar o vídeo e continuar assim que a solução estiver concluída. Tudo bem? Assim que terminarem entre colchetes roubados e aprenderem, esta será a primeira página que verão. Você verá nas capturas de tela que você pode ver índice dot html com algum código html de exemplo. E você também verá outro arquivo nosso principal ponto CSS. Então, isso tem sido muito para instalar suportes. urso de vídeo alemão Avonex não começará a explorar html em detalhes muito mais profundos. 5. Marcação de HTML e elementos: Tudo bem, então vamos começar com a estrutura central de um imigrante de página html. Faça uso fora da página html de ponto de índice que vem com a instalação de colchetes. Agora aqui, você pode ver que este é um documento muito longo, mas vamos dar uma olhada no que exatamente temos aqui. Vamos dar uma olhada nesta seção particular que diz é o que estes colchetes aqui, você pode ver que temos P direito. E então temos um P de fechamento também. O P aqui é o que chamamos de tag. Basicamente, tudo o que você vê nesta página que tem um colchete de abertura e fechamento é uma tag. Então, exemplos seriam como a tag head, a meta tag body tag, H uma tag P e M H três Samp e assim por diante. Estas são etiquetas. As tags são usadas para identificar um determinado tipo de conteúdo na maioria dos casos. Então, por exemplo, o P aqui representa parágrafo, então fica, certo. Todo esse texto que eles usam tendo aqui bem-vindo aos colchetes são de código aberto moderno chamado um pouco. Tudo isso é um parágrafo. Isso é o que a etiqueta P é usada em todo aquele aqui onde você tem, como um H um o H para um título. Então H um é um cabeçalho um basicamente, e ele continua sendo cravejado de suportes. Então esta tag este h identifica este texto como um título, assim como com H dois identificando Ah, este é o seu guia como outro tipo de cabeçalho e assim por diante essas tags. Agora, quando você tem na abertura, marcá-lo fechamento tag. E, claro, o conteúdo entre essas tags, é aí que nos encaixamos como um elemento. Então, basicamente, o mais velho da sua primeira pessoa sendo cravejado de cabeças pretas e, em seguida, o fechamento h um tudo que é onde nós encaixamos você como um elemento. Uma coisa que eu deveria mencionar antes de seguirmos em frente é que cada ordem, maioria das etiquetas tem uma abertura e um fechamento. Não todos, mas a esmagadora maioria. Ok, é por isso que você vê um aqui. E então você vê as roupas e uma guarnição com a barra dianteira GHT com a barra Ford H dois para fechá-lo a mesma coisa com o P bem, o e m e alguém. Então isso é apenas uma coisa muito importante que você deve saber sobre tags. A maioria deles tem a abertura e depois o fechamento. E então o conteúdo que você tem entre essas tags e ataques combinados é o que nós encaixamos em você como um elemento. Agora você também pode ter elementos dentro, muitas vezes elemento. O melhor exemplo aqui seria a tag body. O olhar do corpo para este lado leva você. Você pode ver que temos essa etiqueta corporal, certo? Nunca clique nele. Você pode dizer que está destacado em verde Vizinhos esfriam. Dê uma olhada onde ele fecha. Lembre-se, cada etiqueta de abertura deve ter um fechamento, e você pode vê-lo bem aqui em baixo. Aqui é onde a tag body se fecha, e você pode ver quanta informação quantas tags e elementos estão dentro dessa tag body. Isso é tudo muito. Então, apenas para que você saiba novamente, um elemento pode conter elementos dentro dele. As tags são usadas para identificar bits de dados, seja uma imagem, um texto ou oculto e assim por diante, e então suas tags, maioria delas sempre terá seu fechamento, então você pode ter um H one tag e, em seguida, o fechando uma tag Tron e assim por diante. Então isso é basicamente comer para a estrutura do tribunal fora de uma página HTML. Obrigado por assistir. Vemo-nos na próxima aula. 6. Atributos HTML: Vamos passar agora para falar sobre atributos HTML. Agora os atributos são usados para fornecer informações extras sobre uma determinada tag. Então, como exemplo, vamos percorrer todo o caminho até aqui e, em seguida, onde você tem estes uma tag com os atributos H ref . Basicamente, a tag A é usada para identificar um link doente que você pode clicar no A Treff. Aqui estão os atributos da tag A nos dizendo a origem do link. Então, basicamente, quando você clica nesse link, onde você vai para o H onde fornece essa informação Agora, na nova tag A, você tem o i m g tack. O I m g é usado para representar uma imagem. Certo? E agora aqui você tem o nosso tributo o atributo A lt, que é o texto alternativo. Então, basicamente, o lt atribui um ainda naqueles uma pedra O navegador que hey, o texto alternativo para esta imagem é uma tela curta mostrando CSS edição rápida Você já fez um curso básico sobre S e O? Eles sempre vão dizer-lhe que Hey, para otimizar suas imagens, você quer ter certeza de que eles têm textos alternativos. Isto é como você iria adicionar a velha tenda de sexo para uma imagem usando HTML e, em seguida, aqui você também tem o s. você também tem o s. Atribuir stents SRC para a fonte, basicamente dizendo-os. Ok, esta é a fonte da imagem. Aqui é onde você pode encontrar esta imagem em particular. Então é isso para atributos. Eles basicamente fornecem informações extras sobre uma tag. Você tem um monte deles lá fora. Você tem atributos que comptel nos dizer o estilo que chama ou o esconderijo com e assim por diante e assim por diante de diferentes tipos de tecnologia. Então é isso. Atributos completos. Vemo-nos na próxima aula. 7. Cabeçalhos de HTML e Paragraphs: Agora que aprendemos sobre tags e atributos HTML, é hora de sujar nossas mãos escrevendo nosso primeiro código oficial. E para fazer isso, eu vou passar por dois colchetes e, em seguida, ir para arquivo e, em seguida, clique em novo para abrir em novo arquivo. A primeira coisa é antes de começarmos hoje à noite. É um código similar. Precisamos identificar nosso documento como sendo um arquivo de cada equipe. E para fazer isso temos a tag de abertura e, em seguida, temos o pós calha e, em seguida, na cápsula temos tipo DOC e, em seguida, espaço, e, , em seguida, html. Isso basicamente identifica este arquivo como um documento HTML. É bom para navegadores, basicamente, certo. E, em seguida, o próximo será a tag HTML em si. Oficialmente agora identifique e diga: “Ei, “Ei, isso está em cada arquivo, e agora dentro deste sistema será arquivado. Vou pressionar Tab no teclado para indicar isso. Ok, agora vamos ter um elemento dentro da tag HTML. Ok, este elemento vai ser o “body tag”. O ataque do barco é normalmente usado para identificar o conteúdo que será exibido no navegador . Então, imagens ou arquivos de vídeo coisas assim, tudo isso deve cair na sua etiqueta corporal. Basicamente, qualquer coisa dentro do seu body tag seria exibido no navegador. Então, porque a tag body e agora novamente outra guia. E vamos adicionar ovário primeiro H uma etiqueta cada um, e eu vou dizer que isso é muito, muito grande. Vou fechar a etiqueta “H 1”. Vamos fazer algo muito parecido de novo. Nós temos hte, também. Isto é muito grande. O que vamos fazer? Fechamos a borda para marcar. Vamos descer aqui. Sua marca três agora e veja isso é grande. Vamos fechar a tag HDB, e então podemos ir para H para H cinco. Mas venha direto para os seis anos e posso dizer que isso é pequeno. Isto é o que nós preocupamos vocês como cabeçalhos. Tudo bem, então temos 81 h dois h três e depois h seis. Vou em frente agora e fechar a etiqueta do corpo. Tudo bem? E, em seguida, finalmente fechou a tag html. É assim que você estrutura chamado com HTML. Certifique-se de que você em elementos dente que se enquadram em um elemento particular. Tudo bem, eu vou ir em frente agora e acertar arquivo, salvar bunda e vamos chamar a cabeça dele em ponto html Clique em salvar e lá vai você. Vou em frente agora e abrir a pasta que tem que arquivar o XML DoubleClick . E lá vai você. Agora você pode ver a saída. Isto é muito, muito grande. Isso é H um h dois h três e, em seguida, seis anos de idade. Então os cabeçalhos são importantes porque eles dizem ao Broza como exibir um determinado pedaço de conteúdo agora porque dissemos que isso é muito, muito grande cai sob um H 1 tag. O irmão sabe disso. Está bem. E a maioria exibe este texto em particular usando tamanhos muito grandes porque é um h uma tag. E também é importante porque para o seu S E O, sempre que você está tentando otimizar nossas páginas ou posts para tais motores, você quer ter um instrutor cabeça. Você tem h um no topo e depois embaixo de um 20 Canavan H dois e depois NH três e assim por diante. Então isso também é importante para S e O. mas além da cabeça como seis deles, H um a H seis. Nós também temos a tag P, que é usado para identificar parágrafo. Então, entre H três e H seis, eu vou abrir uma tag P e eu vou dizer que isso é normal tudo bem em uma tag API fechada . E agora vamos em frente e salvar o arquivo. Volte para os meus sinos. Ah, vamos atualizar a página e aí está. Agora você pode ver a tag P em ação. Isto é normal. Então, geralmente a etiqueta P em termos de tamanho tende a cair. Geralmente é um pouco menor que uma etiqueta H três, mas maior que uma etiqueta H quatro h cinco ou H seis. Então está cheio. As tags de cabeçalho, bem como as tags de parágrafo Veber útil ful estão exibindo títulos, bem como, ah, texto normal. O texto normal será as tags P. E, claro, seus títulos seriam seus avisos H. Idade fazer é e assim por diante e assim por diante. Então esse é um vídeo alemão da Avonex. Bell continuará acendendo código HTML 8. Links de Hyper: já, falamos sobre títulos e tags P. Agora vamos dar uma olhada na tag A usada para identificar links. Tudo bem, então vamos fazer isso. Eu vou abrir uma nova linha após a etiqueta de seis anos, e eu vou dizer um que é o link tag e, em seguida, os atributos de um treff é igual e em seguida, em casacos e vai adicionar o U. R L para o site. Então, isso é dois-pontos quatro barra w W que o macaco Web ponto online com e agora o texto real que as pessoas vão clicar em. Vou dizer Visite meu blawg e então podemos fechar uma etiqueta e lá vai você. Agora você pode ver o que fizemos aqui. Temos uma etiqueta que representa o link e, em seguida, o treff, que é a fonte em casacos. E depois fechamos isso. E então dissemos: Visite meu sangue, que será o texto real, e então fechamos a etiqueta A. Vamos em frente agora e salvar isso. Vamos para o meu navegador. Vamos ir em frente e atualizar a página, e agora você pode vê-lo ali mesmo visitando meu blawg Se eu ir em frente agora e clique no link, você pode ver que leva são direto para o meu blawg. E é exatamente assim que os links funcionam com HTML. Mas agora que estamos a falar de ligações, deixa-me mostrar-te uma coisa. Tenha um resfriado. Ok. Você vê, quando clicamos neste link rápido aqui, ele nos levou para o site. Mas então ele não abriu o novo link em uma nova guia. Quando está fazendo isso, queremos que seja esse o caso. OK? Não queremos que esta nova perturbação assuma. As pessoas que temos aqui. Então, como podemos obter links para abrir em novas janelas ou novas guias? Vamos voltar ao nosso código. E então onde temos o h ref. Tudo bem, eu vou criar um espaço, ok? Vou adicionar outros atributos. E isso vai ser alvo igual. E agora você pode ver a opção de direitos aqui em branco na escola e depois em branco. Este é o atributo nos dizendo que Ei, quando você clica neste link que explode, ele vai abrir em uma nova guia. Vamos verificar isso. Vamos em frente agora e ele salva. Vamos voltar para o navegador. Estamos frescos. E agora é isso que acontece quando eu clico no link. Lá vai você. Ele se abriu em uma nova guia, e é exatamente assim que os hiperlinks funcionam em HTML. Agora. Poderíamos também ter ligações internas. Isso irá simplesmente ligar ah, uma página para outra página, ou mesmo casos em que temos o que chamamos de asas do tornozelo, onde, quando você clica no link, ele não leva você para outra página, outro estábulo Web que ele poderia levá-lo para. Outra seção dentro dessa mesma página vai dar uma olhada nisso um pouco mais tarde no curso. Mas isso é tudo para hiperlinks. Obrigado por assistir. Vejo-te na próxima aula. 9. Imagens e caminhos de arquivos: deixe-me mostrar-lhe como você pode adicionar imagens ao seu arquivo HTML. Mas antes de fazermos isso, quero que me faça um favor, vá para sua pasta HTML atual e adicione uma imagem. Então isso dá agora. Por exemplo, eu tenho o arquivo PNG de ponto xml e, em seguida, dentro de sua pasta de estimativa, criar outra pasta chamada Imagens. E, em vez da pasta de imagens, adicione uma imagem. Então, no meu caso agora, eu tenho esse tipo. Ele vai PNG arquivo e, em seguida, na pasta HTML, Eu tenho o arquivo PNG titular HCM. A propósito, suas imagens não precisam ser arquivos PNG. Também pode ser J. Peg. Isso não importa. Tudo bem, então como mostramos a desse cara? Bem, eu vou para os meus colchetes texto do livro, Ed, ele vai. E agora vamos adicionar a tag de imagem apenas na tag A. E então eu vou dizer S r C é igual a e então eu vou adicionar o arquivo PNG escuro html, ok, ok, e então espaço e depois quatro barras Isto é como você fecharia a tag de imagem para que você não tenha nada como abrir colchete quatro barra e, em seguida, Eu sou o suporte de fechamento GNN. Não, é assim que você fecharia a tag de imagem. Também usamos o atributo fonte para indicar a fonte dos caras. Você pode vê-lo agora, então vamos em frente agora e salvar isso. Eu vou para o Internet Explorer refere-se a página, e lá vai você. Agora temos nossa imagem exibindo. Mas então como exibir a segunda imagem, que vai ser o arquivo PNG skynet dot? Bem, se voltarmos para os bolsos texto Eddie Tool, abrimos outra linha e então dizemos AMG SRC é igual e, em seguida, casacos, digamos, em Capital Alface tipo ponto p e G e, em seguida, espaço. E então fechamos isso, e então eu venho aqui e digo: “ Salve, Salve, vamos ver o que vai acontecer. Vou voltar para a Explora. Vamos nos referir a página e bem, como você pode ver agora, nada é exibido. Na verdade, nós temos uma indicação aqui que hey, algo que é treinado para exibir, mas algo não é muito leve. Então, o que exatamente está acontecendo aqui? Will. Ele era o problema. Está bem, se compararmos. Ah, as duas imagens. Skynet de PNG está dentro de uma pasta chamada Imagens, enquanto HTML o PNG está dentro da pasta raiz. Tudo bem? E também, tenha em mente que o documento está frio. Cabeçalho pensamento HTM. Oh, este é o arquivo real. Andamos no caminho que ele dirige o HTML agora, porque a imagem externa, o PNG e a cabeça no arquivo hmm estão dentro dos mesmos relógios completos cão estender Mel. Podemos facilmente apenas adicionar diretamente o molho fora da imagem. Mas como a segunda imagem está em uma pasta diferente em comparação com o cabeçalho no arquivo HTML, vamos precisar especificar essa pasta o caminho em que a pasta está. Então, basicamente, vamos ter que vir aqui agora e dizer imagens. Oh, desculpe por isso. Vamos voltar aqui. Vamos dizer imagens e, em seguida, quatro barras Skynet. Phil, PNG. Agora, este é o caminho para exibir este arquivo PNG do Canadá. Primeiro, vamos até uma pasta chamada Imagens. E, em vez da pasta de imagens, encontrará um arquivo chamado Skynet Got PNG. Sempre que eu puder ir em frente, salve o arquivo. Vamos voltar ao Explorer. Atualize a página. E lá vai você. Agora temos a imagem sendo esta placa. Então é exatamente assim que você pode exibir imagens, mas também uma pequena escuta e caminhos de arquivo sempre que você está tentando adicionar uma imagem ou qualquer outra coisa . Desde que esse arquivo esteja dentro exatamente da mesma pasta que os documentos principais neste caso estão dirigindo o XML, ou podemos apenas digitar o nome desse arquivo. Mas se o se o arquivo está em uma pasta diferente terá que especificar que para o primeiro e seguida, quatro barra e, em seguida, o nome fora desse arquivo Então é assim que você pode exibir imagens. Mas antes de eu ir, nós também podemos adicionar o velho texto provisório. Não se esqueça disso. Então eu m g s r c que nós podemos então também vir aqui e dizer l t é igual. E então, em casacos, digamos o logotipo do arquivo html e então aqui também podemos fazer exatamente a mesma coisa e então dizer Lt igualado e, em seguida, reveste o logotipo do sky net, coisas assim para que possamos apenas salvar isso e ah, isso é praticamente tudo. Então, lá vai você. É assim que adicionar imagens ao seu documento HTML 10. Assignação 1: já. Está na hora da sua primeira missão, e o que quero que faça é bem fácil. Até agora, você aprendeu como adicionar hiperlinks usando a tag A. Você também aprendeu a adicionar imagens usando a tag I M G como. Mas o que eu queria fazer nesta tarefa costumava descobrir como você pode fazer uma de suas imagens clicável para que quando alguém clicar nessa imagem, ele vai levá-los a um novo transtorno como um exemplo. Aqui, meu logotipo html cinco. Se eu clicar na imagem, ele me leva direto para o Web Monkey Online, Doc casa. Então, em outras palavras, eu tenho uma imagem clicável que tem um link para o macaco Lendl Calm. Além disso, o link também se abre em uma nova guia. Então eu quero que você tente e pense em tentar descobrir uma maneira como você pode fazer uma imagem clicável usando HTML e também garantir que quando clicado nela se abre em um novo navegador. Boa sorte 11. Solução de atribuição 1: Com sorte, você foi capaz de resolver os cais. E se você fez, parabéns. Mas se não te preocupasses. Vou mostrar-lhe como você pode criar uma imagem clicável usando HTML. Tudo bem, deixe-me ir em frente. Primeiro de tudo, e nós primeiro esta página. E como você pode ver agora, o logotipo não é clicável. Então, como resolvemos isso? Bem, vamos voltar para todos os parênteses. Este é o arquivo. A imagem que queremos fazer clicável o html dopey n G final. Então eu vou criar uma nova linha. E o que vou fazer é isto. Sabemos que a tag A é usada para criar 18 links, certo? Então vamos em frente e adicionar a tag A. Vamos adicionar o link para o qual ele nos levará. E isso é claro. Ah, https, cólon ford slash w w dot uh, o macaco web on line dot com Lembre-se, é suposto abrir em uma nova aba, então vamos adicionar os atributos alvo também. Vamos acrescentar, esse foi chamado de branco. OK, agora não precisamos de nenhuma mensagem. Só precisamos que a imagem seja clicável. Então o que, vamos fazer é muito simples. Vou deixar um pouco de espaço aqui. A etiqueta A foi aberta, como você pode ver, certo, vamos incluir a imagem dentro do imposto A. Então vamos adicionar um fim e aqui para indicar que esta imagem está sob a tag A. E muito simplesmente, vamos em frente agora e fechar a etiqueta a. Deixe-me fazer isso corretamente. E lá vai você com apenas sair ated são imagem clicável. Vamos em frente agora e salvar isso. Vou voltar para o Explorer. Mas primeiro uma página. E agora quando eu clico no logotipo, ele abre a cama macaco on-line ponto com. Então é exatamente assim que você pode criar uma imagem clicável usando HTML. 12. Listas de HTML: Vamos falar sobre como você pode criar listas anos em HTML e listas são praticamente uma grande empresa ao longo de muitos sites. E como exemplo, aqui nesta página XML fictícia aqui em baixo, você pode ver que fazemos. Você tem uma lista de baldes de lince que eu devo baldes. Equipe Blawg baldes. Bom centro. Isto é uma lista. Espere aqui. E é basicamente uma lista ordenada e listas ordenadas. Por outro lado, você teria 123456 talvez A B C D. Sabe, coisas assim. Então, como podemos oito listas usando HTML? Bem, é muito fácil. Vamos para os nossos colchetes, texto qualquer ferramenta e então o que eu vou fazer é deixar eu ir em frente e remover a segunda imagem. Não precisamos disso. Então, logo abaixo da etiqueta A aqui, eu vou abrir uma nova etiqueta e vou chamar esses U.L Isso representa uma lista ordenada. Se vai haver uma lista ordenada, usaria o l. Mas veja isto. Ok? Vou abrir uma nova linha e depois desfazer se não vou listar os elementos na lista. Então o 1º 1 vai ser I. Isso representa o primeiro membro desta lista. Vamos ligar para esta maçã para podermos ligar. Pode ser uma lista dos nossos alimentos. Talvez para que possamos fechar esse l um. Vamos abrir outra linha e adicionar outra fruta. Eu e isso vai ser laranja igual. Lá vai você. E então vamos adicionar mais um e, ah, que pé? Certamente aderir goiaba. Tenho a certeza que nunca pensaste nisso, está bem? E finalmente, vamos fechar na lista de pedidos. E lá vai você. É assim que você criaria uma lista ordenada. Primeiro de tudo, você está se abrindo com a U.L. e depois os itens da lista. Você terá o l um tag e depois fechando. Ellen fica no meio. Cada item da lista agora, uma lista ordenada, como eu disse, é praticamente a mesma coisa. Eu só vou copiar este bloco como clique-cópia, e eu vou pagar. Sente-se aqui. A diferença Dill é que em vez de você l vai ser o L. Isto vai representar uma lista ordenada, e você é bom ver a diferença agora. Só estou criando espaço aqui. Ok, vamos em frente e salvar isso e eu vou voltar para HTML Documento foram primeiro uma página e agora você pode ver em outra lista Apple, laranja Glover e depois a lista ordenada fora da Apple, laranja e Glover. Então é assim que você pode criar em listas ordenadas e ordenadas. Usar HTML outro que não enfraquecer fazer com listas é alterar os ícones padrão que representam os itens da lista. Agora, por padrão aqui, você pode ver que a locação ordenada tem, como o círculo o círculo preto que representa o item da lista H e, em seguida, as listas de ordem tem Bigelow 123 Você pode realmente alterar isso. E podemos mudar isso adicionando algo conhecido como uma propriedade de estilo vai falar sobre propriedades muito, muito em breve. Mas verifique este advogado onde você tem você. Bem, eu vou adicionar um pouco de espaço, e eu vou dizer que estilo é igual. E então, em casacos, eu vou dizer lista e então você pode ver a propriedade classificada o tipo de estilo menos. Que tipo fora da lista. Eu não posso entrar no nosso anúncio aqui agora você pode ver vários valores fornecidos a você. No entanto, vamos tentar ir com Square como um exemplo, certo? E então, no final do quadrado, vou adicionar um ponto semi cólon. Tudo bem, vamos em frente e salvar isso. E agora vamos voltar a explorar primeiro a página. E agora você pode ver que a ICANN mudou dos círculos escuros dois quadrados. Então é assim que você pode mudar o padrão. Eu poderia representar no mínimo itens para os nossos ou para aqueles que listam. E como podem ver aqui, temos acesso a todos os Vela. Além da praça, digamos, por exemplo, o que mais temos aqui? Também temos o disco por coisa. O disco é o padrão. Vamos tentar o disco. Ah, vamos salvar isso. Vamos com o disco. Vamos ver como isso apareceria com fresco. Ok, então você pode ver que isso é de fato, o padrão porque às vezes alguns navegadores, mas interpretam, discutem um pouco diferente. Então, para explorar o disco é o padrão. Mas nós temos outro. Podemos ir com, que é o nosso círculo, diz Go. É círculo e vamos ver como isso pareceria seguro. Ele veio aqui primeiro uma página e OK, então basicamente círculo e disco exatamente da mesma coisa com explorar. Se você estiver usando um navegador diferente, por exemplo, cromo ou safari, você pode ter resultados ligeiramente diferentes agora voltando. Nós também temos uma maneira de alterar os ícones padrão para ou que a lista tem sido muito vai ser . O mesmo método dirá nosso estilo e, em seguida, é igual. E, em seguida, em casacos, enfraquecer Ver ah lista tipo de estilo bem ali. E ele considerava diferente. Disco decimal armênio de Vela georgiano. Ah, vamos ver, não temos grego mais baixo. Vamos com o grego mais baixo e ver como isso se parece. Vamos são são semi cólon no final e, em seguida, podemos salvar Vamos passar para atualizar explorador E agora você pode ver que agora temos o grego mais baixo são números que representam a nossa lista de ordens. Então, é assim que você pode alterar os ícones padrão representando o em ordenado e ordenado menos itens não vai durar em mencionado antes de arredondar isso para cima é que você também pode criar listas dentro de uma lista. Então basicamente lista aninhada Isso é sobre Fred, também. Assim, é isso. Por exemplo, onde você tem laranja na lista ordenada. Vamos eles querem criar outra lista dentro de laranja que vamos fazer aqui. É isto. Basta adicionar, e em densa representa a nova lista e, em seguida, vai ser você. L novamente e, em seguida, dentro do U bem, mas não vai adicionar a lista aninhada. Então, digamos, por exemplo, tem o vermelho oh laranjas apenas como um exemplo, Espere laranjas. E então nós também podemos ter um monte de outros tempos de laranjas não é? Nós temos amarelo. Laranja está certo. Laranjas amarelas. Vamos fechar esse. E, finalmente, vamos fechar a lista aninhada ordenada e que você tem isso. Vamos em frente agora e salvar isso. Vamos ao Explorer. Atualize a página e lá vai você. Agora você pode ver que temos e na lista ordenada dentro da outra lista original. E é assim que você pode criar listas aninhadas usando extremo El 13. Atributo de estilo HTML: deixe-me agora apresentá-lo aos atributos de estilo HTML. E este é um atributo que você pode usar para adicionar diferentes tipos de estilos dois tipos diferentes fora de elementos. Que existe uma fórmula geral para isso, e que seria o nome da marca entre colchetes. E, em seguida, estilo , é claro, é igual em casacos, a propriedade fora do estilo e, em seguida, o valor dessa propriedade. Agora, um exemplo muito clássico poderia ser nós em uma cor de fundo para o nosso elemento corpo. Então, como você pode ver agora, nós temos estilo corpo igual saco de cor de fundo na chamada aqui sendo a propriedade e, em seguida, azul sendo o valor dessa propriedade. É assim que você pode usar o estilo ach colocar, Vamos colocá-lo em ação. Vamos na cor de fundo para o nosso elemento corpo em nossos suportes. Mandei uma mensagem. Então aqui eu vou dizer, logo após o elemento corpo, eu vou dizer estilo amigo é igual e, em seguida, em casacos terá que adicionar o festival de propriedade , que vai ser a cor de fundo e, em seguida, cólon, e você pode ver os diferentes tipos daqueles que temos. Na verdade, vamos com Ah, vamos com Burly faria como um exemplo, certo, E então, no final do desenvolvimento da propriedade irá adicionar um semi-cólon. E lá vai você. Vamos em frente agora e salvar o arquivo. Ir para o Internet Explorer refere-se a página, e voila, assim como que tinha a cor de fundo para, ah, body tag. Agora, além de mudar nas costas e cores, fora da página ou site, há outras coisas que também podemos fazer. Nós também podemos adicionar, por exemplo, como a mudança, a cor da fonte para o nosso texto, e isso vai agora. Vamos tentar alterar a cor da fonte para a tag H one. Então o que eu vou fazer é deixar um estilo igual. E então, em casacos, vamos adicionar a propriedade Kahlo. Tenha em mente que as propriedades de configuração estão disponíveis apenas para tipos de elementos sentados. Por exemplo, você não pode adicionar o plano de fundo ah eu sou para que você possa adicionar a chamada tudo que você pode usar a propriedade color com, digamos, a tag body. Não vai funcionar. Você precisará usar a cor de fundo em vez disso. Tudo bem, você não pode usar um bagram culo em uma etiqueta de imagem. Não vai fazer sentido nenhum. Então, neste caso, para o H um h dois anos, se você quiser mudar a cor, o texto terá que usar a propriedade call off. Tudo bem, então neste caso, vamos dar o valor de Vamos ver o seu vermelho como um exemplo. Tudo bem, então mudamos a cor para ler. Vamos em frente agora e salvar isso. Vamos voltar, Teoh Broza Preferencia a página. E lá vai você para que você possa ver o H agora está em vermelho, Então o mesmo se aplica às outras marcas de texto seu H um Z H para usar H 30 p tag. Você pode alterar a cor que a cor divertida simplesmente usando a propriedade off color. Mas você também pode fazer outra coisa. Podemos adicionar outro tipo de estilo, que será o texto alinhar neste caso, Vamos entrar aqui para os dois anos e digamos estilo e então vamos dizer, igual e depois em casacos. Vamos com o texto, nossa propriedade de linha, e então podemos dizer centro como o valor que outros eleitores, é claro, seria da esquerda para a direita, justificando coisas assim. Vamos em frente e colocá-lo em realmente para salvar isso. Vamos voltar para você. Perot, uh, refere-se a página e lá vai você. Nós agora alinhamos nosso texto H dois para o centro da nossa página. Assim, os diferentes tipos de nossas propriedades e seus valores lá muito e muito depende do elemento ou da tag que você realmente aplicá-los. Agora, antes de ir, deixa-me dar-te mais um exemplo. Vamos apontar o link A aqui que diz “visitar meu blawg”. O que vou fazer é adicionar três tipos diferentes de propriedades. Então, primeiro de tudo, vamos remover o padrão na linha. Vamos mudar a cor do texto, e também vamos transformar o texto em maiúsculas. Então vamos fazer isso. Certo, vou passar por dois colchetes e tenho a etiqueta A bem aqui. Então, após o alvo, eu vou abrir este atributos de estilo e, em seguida, é igual e, em seguida, em casacos, listado o primeiro 1 para remover o sublinhado vai ser propriedade de decoração de texto, e então o valor aqui seria nenhum disse não decorações. Vamos ao semi cólon. A próxima propriedade seria aquela transformação de texto, e nós vamos transformar sua luz em maiúsculas. E então o último aqui não seria a cor. E vamos com tudo o que é um verde como um exemplo. Cúpula Colon. Então, lá vai você com editar três propriedades diferentes com três valores diferentes. Vamos em frente, Salvar e outros voltar para o Explorer foram primeiro uma página. E lá vai você não mais na linha de capital Etta e o texto agora é verde, então você pode adicionar várias propriedades e vários valores para essas propriedades para um. Um elemento único. Agora, o número de atributos e tags que cobrimos até agora são apenas uma fração muito, muito pequena do número total de tags, e na verdade está disponível com HTML. Agora vamos começar a cobrir mais alguns deles mais tarde neste curso. Mas se você estiver interessado em obter acesso oriental a todas as tags, todos os atributos bem, você pode ir para HTML para acalmar quatro atributos de barra e, em seguida, aqui você pode ver todos os tipos possíveis fora de atributos que você pode aplicar diferentes tipos de tags com as explicações ao lado deles. É muito, e então você também pode ir para etiquetas de barra ford. E aqui você verá todas as tags disponíveis para você usar com HTML. Agora, eu não recomendo que você passe todo o seu tempo passando por tudo isso. Você não precisa saber cada ação, mas você não precisa saber cada tag. É como se você tentasse conhecer cada palavra em um determinado idioma em, digamos, inglês e japonês. Você sabe que você não precisa saber cada palavra, desde que você conheça as tags mais comumente usadas e foi, vamos lá, os atributos usados e, em seguida, as propriedades e os companheiros dessas propriedades que você pode aplicar para eles. Você estará pronto para ir. Além disso, quando você começa a aprender sobre CSS, você vai encontrar, digamos, é muito mais fácil andar com e fazer mudanças de estilo em seus elementos e sobre quando se trata de estilo, em vez disso é que você está muito melhor investindo mais tempo ao vivo na CIA diz do que, ah html styling. Então é isso. Pense é muita sorte um alemão, mesmo extra Israel agora vai dar uma olhada no texto completo matin. Te vejo então. 14. Formatação de texto: Bem-vinda de volta. E eu realmente espero que você está gostando do curso aqueles longe que nós cobrimos bastante em HTML e Ah, vamos continuar. Agora vou mostrar como você pode fazer algumas alterações de formatação em seu texto real . Mas antes que possamos fazer isso, vamos adicionar um parágrafo real com algumas linhas. Então, para fazer isso, eu vou aprender se algum cara a quem devo limites basicamente é usado para gerar texto fictício que os desenvolvedores propósitos de teste úteis. Então eu vou simplesmente ir em frente agora. E isso é copiar algumas dessas linhas bem aqui e basta ir em frente e copiar isso e eu vou passar por cima de dois colchetes. Vamos abrir uma nova tag de parágrafo na parte inferior. Bem aqui, Pete. Etiqueta. Adicione isso e, em seguida, vamos fechar a tag p. Ok, então como podemos fazer alterações de formatação em nosso texto real? Não podemos usar esse talento, na verdade, porque atributos só se aplicam a tags, certo? Mas e se, por exemplo, quiséssemos fazer uma tartaruga conceito aqui, esse particular quereria torná-la ousada. Como faríamos isso? O que podemos fazer uso de sentados tipos de tags e especificamente para torná-lo ousado. Vamos fazer uso de uma etiqueta chamada tag B, que é, claro, eu represento o ousado. Ah, etiqueta. Então eu vou vir aqui agora e fechar o imposto agora mesmo. A Torre Construída vai ser ousada. Vamos adicionar outra tag para usar o modo branco. Aqui. Vamos tornar isto em itálico. Ok, vamos fazer esse dia estilo itálico. Eu vou entrar aqui. Vamos fechar esse. Na verdade, vamos fazer uso do Monte Temple. Então, duas palavras. Vamos fazer esses dois em itálico. Vamos fechar que nós temos outra tag, que é a tag de enfatizar, que vai ser, é claro, e m. Mas apenas vamos adicionar as tags e então vamos ver como eles se parecem uma vez que nós como nós primeiro um estava chegando aqui perto que nós também podemos fazer algumas outras alterações adicionais, como adicionar ou torná-lo em tipos de texto, são subscritos 11 sobrescrito. Então vamos fazer este SAPIEN aqui. Vamos fazer disto um super guião. Vai haver S U P não se preocupe, você vai ver o que estes realmente fazer você em apenas um momento e depois do S eu vou ir em frente e fechar isso. Então nós fizemos os s em SAPIEN um sobrescrito Ah, vamos ver, Send nos pescoçou. Vamos fazer os últimos “s “aqui. Um subscrito para que é usado a tag S U B. E então isso é na S bem ali. Feche isto. Oh, certo. E, uh Ok, vamos em frente agora e salvar isso. Então, adicionamos 12345 diferentes tipos de tags. Vamos até aqui, meus breves sinos estão revigorados. Vamos descer aqui. E bem, lá vai você. Agora você pode ver constrictor. O professor agora é ousado. Eu uso meu próprio temperamento é uma ênfase de magnata itálico que também é muito semelhante ao estilo metálico . Mas e aqui em baixo, você pode ver dizer p e o s é sobrescrito, que significa que ele vai em cima e, em seguida, em seletores, o S é um substrato. Richman vai para baixo. Então é assim que você pode fazer nossas alterações de formatação em guerras específicas, mesmo letras específicas usando tags com HTML. Agora, antes de eu ir, há uma das tags que é muito semelhante à tag negrito, e que vai ser o imposto forte. Como exemplo, vamos adicionar a tag forte ao ipsum. Tudo bem, tapando alguns, uh, eu só vim aqui e remover o 1º 1 Ok. Vou em frente e salvar isso. Voltei aqui para valer fresco. Agora você pode ver que Epsom também está em negrito. Mas uma pergunta é, qual é a diferença entre a tag bowl e a tag forte? Se tudo o que eles fazem é apenas deixar o texto em negrito? Bem, do ponto de vista de exibição, não há diferença porque ambos são ousados. No entanto, nos bastidores também arcos, colocando mais importância ao texto que tem a tag forte. O imposto forte deve ser utilizado para textos que são muito, muito vitais, muito importantes e têm um sentido de urgência. Os taggants bola que é usado simplesmente faz com que tipo de leva ousado. Talvez, nome de uma pessoa, nome de um lugar, coisas assim. E então também se torna importante quando você começa a trabalhar com CSS porque com CSS, você pode dizer OK, todos os elementos, todas as tags, todo o texto, qualquer que tenha a tag forte, torná-los vermelho, e, em seguida, todos os prêmios de texto que têm o bull tag apenas fazer seu Michelob preto. Você poderia fazer algo assim. Então, no final do dia, não é muito importante. Esther, se usado uma tag forte ou a tag bola, mas para fins de fazê-lo da maneira certa usou uma tag bowl quando você só quer fazer um texto um negrito e, em seguida, se você tem certo texto que está fora muito, muito enorme importância. Talvez como um casaco ou algo assim, você poderia usar a etiqueta forte para eles fora do curso. Vamos falar um pouco mais sobre isso à medida que avançamos para CSS. Mas isso é tudo para o Martin com sua maldita sorte Eu acho que a sorte, eu vou te ver na próxima aula. 15. Elementos de bloqueio vs inline: vamos continuar com o curso, e agora vamos falar sobre algo muito, muito importante, e isso vai ser o conceito off in line e block elements fácil em HTML. Você geralmente tem dois tipos de diferentes tipos de elementos. Você tem os elementos de bloco, e então você tem o que chamamos de elementos em linha agora. A diferença entre isso, também, é que os elementos do bloco são elementos que, por padrão, ocupariam suas próprias linhas separadas. Como exemplo. Aqui, você pode ver que quando nós produzimos as tags H um, os três H dois e H e até mesmo a tag P, você pode ver que todos eles estão em linhas separadas. Isso ocorre porque eles são elementos de bloco por padrão. Então você bloquear elemento que você exibiu. Ele ocupa uma linha que por isso é por conta própria em uma única linha. Cada outro elemento que vem depois, ele empurra para a próxima linha. Isso é o que chamamos de elementos de bloco. Agora, Ellen elementos exatamente o oposto. Você pode adicionar quantos elementos internos quiser na mesma linha. Agora, se voltarmos ao nosso texto um pouco aqui, identificamos que o H avisa as etiquetas P e tudo mais. São elementos de bloco. No entanto, seus elementos de Inglaterra seriam a tag A e as tags de imagem. Então vamos, por exemplo, aqui. Por que eu tenho o primeiro link. Eu vou em frente, e eu vou simplesmente copiar exatamente o mesmo texto. E então vamos criar em Ulan e, em seguida, colar o mesmo link novamente. Vamos agora e em segurança. Isso é atualizar a página. E agora aqui embaixo, você pode ver que agora temos as ferramentas lado a lado. E isso é porque as tags são naturalmente em elementos de linha. Se você copiou em h uma tag em um elemento John e você ritmo destes bem ao lado de outro H um elemento, Eu garanto que o 2º 1 irá para a próxima linha. É assim que os elementos de bloco caminham por padrão. Agora você pode realmente alterar a maneira como esses elementos são caminhada por padrão. Por exemplo, se eu quisesse forçar, digamos que o primeiro uma tag aqui para agir como um elemento de bloco, eu posso realmente fazer isso , e claro, haverá uma propriedade para isso Vamos fazer isso. Ok? Eu vou passar para o estilo, e depois do Vela verde para o atributo de cor, eu vou adicionar uma nova propriedade e que o que vai ser chamado de propriedade de exibição, e então o valor vai ser bloco. Muito bem, agora estou a dizer à primeira ligação o primeiro ataque para agir como um elemento de bloqueio. Vamos continuar agora e salvar isso a menos que fosse acontecer. Vou atualizar a página agora, e lá vai você. Agora você pode ver que o primeiro uma tag está em cima para baixo, cima, aqui enquanto o 2º 1 está lá em baixo para que você possa forçar elementos em linha a agir como elementos de bloco . E, por coincidência, você pode forçar elementos de bloco a agir como elementos da Inglaterra. Então, em vez de usar o valor fora do nosso bloco para a propriedade de exibição, você usaria na linha nesse caso. Então isso foi apenas introduzido você para o conceito, elementos fora do bloco e elemento em linha. Isso se tornará muito importante assim que começarmos a mergulhar nos cenários da CIA. Mas por enquanto, o que você fez? Você sabe a diferença entre esses dois. Te vejo na próxima aula. 16. A etiqueta de ruptura: Eu quero chamar sua atenção para uma tag particular, que eu sinto que você acharia muito útil quando você começar a construir transtornos com HTML agora. Anteriormente, eu mostrei a você como você pode forçar elementos aylan como você é uma tag para agir como um elemento de bloco simplesmente usando a propriedade display e, em seguida, desenvolver fora bloco direito. No entanto, há uma maneira muito melhor de realmente alcançar os mesmos resultados exatos sem usar a propriedade display. Enquanto você pode fazer neste caso agora é, deixe-me apenas mostrar que vou em frente e remover a propriedade de exibição. Tudo bem? Então, se eu quiser forçar o 1º 8 eu me importo de agir como um elemento de bloco. O que eu posso fazer é criar uma nova linha, e então eu vou adicionar a tag, be are e no espaço e, em seguida, quatro barra Isto é basicamente uma tag break. Ele diz HTML que hey, criando uma nova linha para o conteúdo que está a seguir. Isso é basicamente o que esta etiqueta faz. Vamos em frente agora e salve. Vamos voltar, Teoh meus breves perfis que atualizam a página e lá estão os mesmos mísseis alcançados, mas muito mais fácil. Espere. Agora, quanto mais etiquetas você adicionar, mais travado na maior parte do espaço. Por isso, como exemplo, deixa-me copiar isto, está bem? E vamos fazer isso. Eu vou simplesmente ir em frente agora e colar vários mais alguns. Vamos em frente agora salvar. Vamos atualizar a página e, Opps. Desculpe-me, Vamos atualizar esta página e agora você pode ver os resultados. Agora você pode ver que há muito espaço entre o primeiro veado bem aqui e a segunda etiqueta. Agora você deve estar se perguntando Ei, Alex, espere um minuto. E quanto a esta imagem? Por que essa imagem aparece entre o primeiro AG e o A tag mesmo massa? Se formos para a nossa página aqui, você pode ver que a imagem vem após a segunda. Uma etiqueta. Na verdade, o que você está vendo aqui está exatamente correto. É porque esta imagem é tão grande. Você acha que está acima do segundo ataque, mas eles estão na mesma linha. Se ele notar os anos 80 bem aqui e então a imagem está bem ao lado dela. É porque a imagem é muito, muito grande? É por isso que parece que a imagem está acima do segundo ataque. Não é o caso que realmente está na mesma linha. Então é isso para a tag break. Obrigado por assistir. Vemo-nos na próxima aula. 17. Marcação de Divs e espações: balística sobre duas etiquetas muito importantes. E isso vai ser a etiqueta surda e as tags span. Agora, deixe-me fazer uma pergunta, certo? Se você queria mudar a cor, digamos a cor de uma determinada palavra. Digamos que, por exemplo, fama é a fama mundial aqui em baixo. Como se você quisesse mudar a cor do dedo preto padrão, digamos vermelho, como você faria isso? Agora sabemos que existe uma propriedade chamada Cor com a qual poderíamos usar para mudar a cor de preto para vermelho. E sabemos que há um atributo conhecido como estilo que podemos realmente usar para implementar essa mudança, certo. Mas o problema é que os atributos só andam com tags. Agora a fama é só uma palavra. Não é. Não é uma botas de verdade. Então, como podemos mudar a cor dessa palavra em particular? Bem, é aqui que a tag span entra em jogo. Veja, com a tag span, podemos apontar palavras. Podemos levar letras, números. Podemos levá-lo qualquer coisa e usar a tag span para alterar a propriedade fora desse elemento particular . Então vamos eles queriam mudar a cor de preto para vermelho agora para a fama. Eu vou fazer isso. Eu vou abrir uma nova etiqueta e dizer span, e então eu vou dizer estilo. Agora podemos anexar os atributos de estilo a esta tag span, e então podemos agora dizer, Ok é igual a e, em seguida, em casacos. Mas é claro, agora vai dizer chamador e, em seguida, agora, é claro, é claro,com o valor de Red Semi Colon e vamos em frente e fechar a abertura. Mas lembre-se, claro que é ataque. Então também temos que fechar a etiqueta. Então, depois da palavra, eu vou entrar aqui agora e adicionar e fechar a etiqueta do lado leste. Certo, então lá vai você. Vamos em frente agora e salvar isso. Vamos atualizar a página. Vamos descer aqui e lá vai você. Então você pode também, as fams agora está em vermelho, graças a esta tag pan para que você possa usar um span preso para segmentar palavras, letras, figuras, qualquer coisa que você também poderia coincidentemente alterar a propriedade que estamos lidar com. Poderíamos alterar talvez a propriedade da linha têxtil, mas poderia alterar a decoração do texto para exibir propriedade e assim por diante. E assim por diante para que ele para a tag SPAN. E a etiqueta do Dev? Agora, o rebocador de diferenças é usado para segmentar seções em todas as páginas da Web. Há um exemplo. Agora nós temos, digamos, por exemplo, que você queria especificamente direcionar uma seção contendo o H até aqui até o primeiro Ah, uma luz de etiqueta. Vamos eu queria dar a esta seção particular uma cor de fundo diferente. Nós usaríamos o elemento Dave nesse caso. Então, como exemplo, porque vir aqui e o que vou fazer é adicionar uma aba para empurrar tudo para a luz. Vamos descer depois da etiqueta corporal e os danos vão abrir a nova etiqueta, que é claro, que é claro, vai ser o Dev Tacked E I V e então aqui embaixo, eu e então aqui embaixo, não posso ir em frente e fechar a etiqueta de surdos. Então, basicamente, temos dado agora esta seção toda nova, nós dividimos esta seção do resto fora da página web. Então a partir daqui, agora, eu posso entrar aqui e dizer OK, estilo def é igual e depois codifica, hum, eu não vou. Entre e diga fundo, , cor e digamos que Ah verde como exemplo. Vamos em frente e salvar isso. Atualize a página, e se eu voltar a estudar agora, você pode ver que a seção continha a cabeça e o elemento todo o caminho até onde temos a idade em que você pode ver porque é exatamente a mesma cor que a cor de fundo Temos como alvo. Nós basicamente mudou a parte de trás e coloriu toda esta seção, usando a tag Dev que eles têm elemento. Então é isso que você normalmente usa dibs completo agora. Tecnicamente, você poderia se safar usando vários impostos corporais. Então, por exemplo, você poderia fechar a primeira marca de bala, você sabe, aqui e então abrir outra etiqueta de corpo. Mas isso é um frio terrível. E isso é como o pior XML de acordo com todos os tempos. Então, por favor, não faça isso. Sua página da Web deve ter apenas uma única etiqueta de corpo. Se você precisa divina seções fora de sua página bem usado o ataque Dev. Isso é o que está cheio deles. Então é isso para os Daves e este pan tags. Pantex mais uma vez são usados para segmentar palavras. Deixe como você pode usar detectar para alterar as propriedades desses tipos de elementos, enquanto os Daves são usados para segmentar seções em seu pombo. Claro, tags de desenvolvimento ou elementos são elementos de bloco, enquanto suas tags SPAN geralmente estão em elementos de linha. Então é isso para Dave e Span. Pense em um observatório que te verei na próxima aula. 18. Combinar elementos de linha e blocos: Agora que você está familiarizado com o bloco e elementos em linha são, vamos fazer algum plano ao redor. Ok, vamos ver como podemos realmente combinar ambos Inglaterra e bloquear elementos juntos para este conteúdo de jogo . Então primeiro eu vou fazer é eu vou mudar a cor de fundo para o Dev que nós criamos anteriormente. Vamos com nossa laranja desta vez e não verde para que possamos ver nossas etiquetas A. Vamos guardar isso. Certo, vamos tentar algo engraçado. Como agora temos a etiqueta H 1 aqui. Isto é muito, muito grande. E se nós realmente adicionamos AP tag dentro do imposto H um? Então, basicamente, estamos agora adicionando um elemento de bloco dentro de outro elemento de bloco. Como isso vai afetar a exibição? Aquele assento? Ah, vamos em frente e remover essas palavras extras. Certo, então temos que fazer xixi dentro do H no imposto. Vamos entrar aqui. Vamos salvar e vamos ver que vai haver qualquer diferença estava vindo aqui primeira página e bem, como contra o agora, não há diferença. Ele ainda está atuando como um H uma tag, então ele realmente adicionar elementos de bloco dentro de outros elementos de bloco realmente não muda nada. Vai ser você. Você praticamente terá o mesmo resultado na maior parte do tempo. No entanto, E se nós descêssemos? Acertar onde temos a nossa etiqueta? Tudo bem, vamos com o segundo. Uma etiqueta. Agora, se eu entrasse aqui e dissesse, quer saber? Vou fazer isto em cada etiqueta. Muito bem, agora estamos a adicionar a etiqueta a dentro da etiqueta H 1. Vamos ver o que vai acontecer. É perto da etiqueta H 1. Vamos voltar aqui em segurança. Volte, Teoh Broza refere a página. Agora você pode ver que a segunda tag, o segundo ataque agora é tão grande quanto o texto H um aqui. A única razão pela qual parece porque todas as letras são maiúsculas também. Os que aqui são todas pequenas cidades, com exceção do primeiro tee. Então isso é basicamente o que acontece quando você combina elementos de bloco. Se ele tinha elementos de bloco em vez de outros elementos de bloco, você não vai realmente ter qualquer mudança. Mas se você adicionar um elemento Ellen no sinal de um bloco. Elemental adivinha o quê? O elemento de bloco afetará a forma como o elemento de linha principal está sendo exibido. Note, no entanto, que este nem sempre é o caso. Há casos em que, mesmo se você adicionar um elemento alienígena dentro de um elemento de bloco, você pode não ver nenhuma diferença. Não se preocupe. À medida que você começa a ficar mais confortável trabalhando com HTML e você começa a tomar diferentes tipos de tarefas, trabalhando com diferentes atributos e tags e coisas assim, você se acostumaria com o inferno. Essas coisas realmente funcionam. Mas por enquanto, eu só queria que você soubesse que você pode adicionar uma linha elementos dentro de elementos fora do bloco e aqueles afetam a maneira como esses elementos interiores são realmente exibidos. Então é isso. Muito obrigado, muita sorte. Vemo-nos na próxima aula. 19. A marca de cabeça: deixe-me apresentá-lo a uma das tags mais importantes para HTML. E essa vai ser a Hedda Tag. Esta é uma tag com a qual você pode usar para exibir informações muito importantes sobre seu site , incluindo a descrição do título. Você pode até mesmo usar o ataque com a cabeça. E você pode até incluir alguns estilos CSS também. Então vamos fazer isso. Eu vou te mostrar como você pode fazer uso fora da pilha primeiro. E embora é que vamos criar um novo em Dent e em ópio no HTML diretamente na taxa que vamos adicionar a tag head. Não é Hedda Butthead, certo? Agora ele geralmente cai na tag HTML. Então primeiro eu vou fazer aqui é nós vamos mudar o título do nosso site agora mesmo. Como está, dê uma olhada como ele. Tudo o que diz é cabeçalho dot html e isso não faz absolutamente nenhum sentido. Se enviássemos esta página agora mesmo para a Internet, tudo o que diria é ir para o exterior. Mas isso significa assim para dar a todos chateado um título descritivo? Nós vamos voltar à nossa cabeça uma etiqueta atrás para fazer uso de uma nova etiqueta chamada tag título . E então podemos agora dizer tutoriais HTML para iniciantes. Mas vamos em frente e fechar isso. Não vamos vir aqui agora e salvar o documento. Vá até Broza. Agora preste atenção à guia. Vamos em frente, nunca fresco. E lá vai você. Agora ele fica. Tutoriais em HTML para iniciantes Muito mais descritivo. Agora, além disso, para entrar com a etiqueta de título, poderíamos adicionar outro tipo de etiqueta e deixar eu fazer isso. Vou colar as tags já copiadas anteriormente. E esta vai ser a meta tag. Muito, muito, muito importante e muito útil. Basicamente, o ataque Met pode ser usado para exibir tipos de configuração fora Informações muito importantes, como o personagem definir nossa descrição fora do site. As palavras-chave foram direcionadas para um CEO e assim por diante. Agora, o primeiro 1 ele aqui é o conjunto de caracteres meta e você considera validar fora UTF nosso traço oito. O que exatamente é isso? Bem, se você começar a incluir símbolos em seu site como o símbolo at, o símbolo percentual coisas assim. Há maneiras que ele tem realmente código HTML. As unidades usadas para exibir esses tipos de caracteres. Agora em outro, para o seu navegador, para ser capaz de interpretar esses símbolos HTML você precisa incluir o conjunto de caracteres que você está andando com. UTF oito é geralmente a opção preferida porque é universal e contém a maioria esmagadora de símbolos e caracteres. A única outra instância em que você não pode usar utf oito e usar um valor diferente seria se você estivesse criando o site usando um tipo diferente de idioma, talvez espanhol ou grego ou algo assim. Mas, normalmente, vai ser tudo. É para isso que serve. Agora você tem a descrição. Meta nome é igual a descrição e, em seguida, o conteúdo basicamente são tutoriais web gratuitos. Neste caso, neste momento, estamos apenas descrevendo todo o conteúdo sobre o site. Agora aqui o meta nome é igual a palavras-chave e no conteúdo HTML CSS. Estas são as palavras-chave que foram direcionadas para S e O. Então, se você quiser otimizar suas páginas para S e. O, é exatamente assim que você faria isso. E finalmente você também tem o meta nome igual ao autor. Isto é, se pretender incluir o nome do autor fora do Web site ou a publicação da página. E então, você sabe, é exatamente assim que você pode fazer isso. Mais uma coisa para mencionar que seria estilo. E você pode realmente incluir algum estilo CSS dentro de seu ataque de cabeça. Como é que fazemos isto? Certo, digamos, por exemplo, que quiséssemos mudar a cor de fundo de todo o nosso site. Não, por aqui. Nós já temos o estilo do corpo são iguais na parte de trás, e Qallab realmente faria. A questão é que esta etiqueta só vai afectar a página inicial ou qualquer página que este tribunal em particular esteja. Isso não vai afetar todas as páginas de um site. No entanto, se quiséssemos segmentar todas as páginas em nós em todas as tags corporais do nosso lado de uma só vez, poderíamos usar CSS, então deixe-me ver do que estou falando. Vou remover todos os desenvolvidos que temos aqui e deixar o ataque do barco como está . Confira isso. Está bem. Vou incluir a nova tag off style e, em seguida, dentro da tag style que agora vamos adicionar. O elemento que queremos atingir neste caso vai ser o elemento do corpo, certo? Então vai ser corpo e, em seguida, chaves encaracoladas. Tudo bem, abra uma nova linha. E agora vamos adicionar a propriedade. E isto é o que eu ia ser. Cor de fundo e, digamos, Aqua realmente voltando. Bem, vamos com Vamos com Azul como um exemplo e em semi-cólon Agora basicamente, estamos dizendo, OK, OK, todos os elementos em um site mudam suas costas na cor para azul. Tudo bem, vamos adicionar mais um. Vamos dar uma olhada em D L I. Ellen que temos aqui como Apple Challenge, digamos, queria dar a todos eles uma única cor fora. Vamos dizer verde assim para fazer isso. Herbal muito simples. Basta dizer L I que é o elemento alvo e White Kali se prepara. Desculpe por isso. Cola chaves, e então em uma nova linha, vamos dizer cor e então vamos dizer verde semi cólon. Agora, basicamente, estamos dizendo que cada elemento aliado em um site muda sua cor para verde. Vamos em frente agora e fechar a cabeça uma etiqueta. Não te esqueças de fechar a tua etiqueta de cabeça. Muito, muito importante. Vamos em frente agora e salvar isso. Vamos lá. Sobre o quê? Você é Broza? Bem, primeiro a página e lá vai você. Então, as primeiras coisas primeiro. Nossas páginas agora tem o culo de apoio fora azul. Mas aqui embaixo, você pode ver que os elementos da Ally estão em verde e seu bom, verde e azul não é uma ótima combinação. Então vamos fazer isso bem rápido. Vamos mudar a cor de fundo de azul para o nosso, digamos cinza em vez disso. Tudo bem, vamos voltar aqui. Salve Voltar. Teoh Browser refere-se à página e lá vai você. Então agora você pode ver que cada elemento aliado foi definido como verde. E então, claro, nossa cor de fundo é definida como muito fora do curso. Nós estabelecemos uma cor Bergen específica para o Dave aqui. É por isso que ainda tem sua cor laranja. Assim, o tio saco de uma página não substitui a cor de fundo fora de um dia de dentro dela. Então é exatamente assim que se faz uso da cabeça. Eu quis dizer e acredite ou não. O que você está vendo aqui. Este estilo, esta é sua primeira introdução para ver Avaliar. Isto é o que estamos aptos como CSS interno. Porque está contido dentro. Muitas vezes, cada documento geral temporadas regulares seria um arquivo separado por conta própria. E então você terá que vincular seu documento HTML para que cessa documento. Falaremos sobre isso um pouco mais tarde, fora do curso. Mas, por enquanto, esta foi a sua introdução ao ataque à cabeça. Muito, muito importante. Marca muito vital para doentes extremos. Obrigado por assistir. Vemo-nos na próxima aula. 20. Elementos semânticos de HTML: como você começa a terminar esta seção em HTML Elegir para dar uma olhada no H semelhante cinco elementos semânticos. Então, o que exatamente são esses elementos semânticos? Bem, eles são usados principalmente para fornecer estruturas para o seu conteúdo. E há um mais amplo importante é porque, ao dar o seu conteúdo, mecanismos de busca estruturais seria melhor capaz de entender o que o seu conteúdo é sobre. E como resultado, você será capaz de otimizar seu conteúdo muito melhor para motores de busca. Além disso, ele faz com que seu conteúdo pareça muito mais fácil e muito mais limpo de ler e entender. Vamos dar uma olhada em alguns fora. Então você tem, como o artigo de lado, você tem o rodapé que você poderia dirigir. Você tem o valete. Agora, antes de continuar com essa cabeça, uma etiqueta aqui é diferente da etiqueta de cabeça que falamos anteriormente. Qual é a diferença? Veja, a tag head é usada para conter informações que você normalmente não veria no front-end. Informações sobre a chave era o seu alvo no título fora do seu site é descrição, o personagem disse, e assim por diante os scripts esses são os tipos de informações contidas dentro de sua tag cabeça . Seu ataque de cabeça, por outro lado, normalmente contém informações como o logotipo do seu site, o menu principal e assim por diante. Como exemplo, vamos dar uma olhada no meu quarteirão aqui. Se eu fosse quebrar isso, ver o quê? Onde tem o logotipo e, em seguida, o menu principal. Isto estaria dentro da minha cabeça. Uma etiqueta. E também porque se eu for a qualquer post ou qualquer página no meu site, as informações contidas no ataque à cabeça geralmente são consistentes. O mesmo se aplica à tag Fouda, que contém informações na seção rodapé do meu site. E isso acontece agora, vocês podem ver que temos uma seção sobre, algumas sentadas e algumas mídias sociais. Isso estaria contido dentro da etiqueta de tatuagem, que é a que você vê aqui. Portanto, esses elementos semânticos contêm informações sobre o conteúdo estrutural e também fora do nosso site. Agora você tem o elemento agora bem aqui. Isto seria usado para conter o seu menu de navegação principal. E então você tem outros como seu artigo de seção principal que normalmente poderia mudar . Ah, estes porque eles basicamente são usados para conter Ah, o conteúdo real fora do seu site e aqui agora, você pode ver um tipo de colapso. A reta A repartição de como esses elementos temáticos são usados. Então você tem, tipo, tipo, a etiqueta Hedda na parte inferior. Você tem a comida para cima, e então você tem o valete contendo o menu de navegação principal e, em seguida, o conteúdo real , você poderia usar seus elementos como seção. Você poderia usar um artigo. Você poderia até usar dibs. Já falamos sobre dádivas. Você não precisa necessariamente. Seu artigo de seção e, em seguida, atribuído é normalmente usado para conter informações que seriam para decidir fora de sua página neste caso agora. Talvez como uma barra lateral. Eu só como um exemplo. Então, estaremos caminhando muito de perto com esses elementos à medida que começamos a construir nosso site real . Mas por enquanto, eu só queria apresentá-los a eles porque é importante que você saiba que eles existem e o que eles realmente fazem. Então sinta-se livre para ir a este site, são liberados tribunal câmera ogg, e então você pode procurar HTML cinco elementos semânticos. Este é um artigo muito, muito descritivo. Eles descreverão para você quais são esses elementos e como eles são usados. Mas como eu disse, Alia será levado uma olhada neles quando começarmos a construir nosso site. Obrigado por assistir. Vemo-nos na próxima aula. 21. Conclusão de HTML 5: Bem, aí está. Chegamos ao fim desta seção cobrindo HTML cinco, e você aprendeu bastante. Agora você aprendeu sobre as tags XML, os atributos, a propriedade garanhão é seus valores, elementos e muito mais. Agora, é claro,não cobrimos claro, tudo sobre uma vítima de jardim de cinco anos. Não falamos sobre oito formulários similares. não falamos de mesas Tambémnão falamos de mesas. Vamos dar uma olhada nisso assim que você começar a construir nossos sites. Isso não se preocupe. Enquanto isso, se você quiser aprender um pouco mais sobre HTML em seu próprio tempo livre, no entanto elogiado, entanto elogiado, vá para W três escolas que vêm e, em seguida, confira a guia para HTML. Aqui, você pode ver todas as nossas informações necessárias e continuou todos os tipos de informações sobre os diferentes tipos fora elementos e tags e atributos e todas essas coisas. Então, se você estiver interessado, eu recomendo que você verifique W três escolas Não venha, mas é isso por enquanto. Para o Sistema 5, você aprendeu o básico. Vamos agora seguir em Crianças sobre o básico fora CSS 22. Pré-visualização de seção CSS: Tudo bem. Portanto, bem-vindo oficialmente à seção CSS e estamos feitos com HTML por enquanto. Avançando. É tudo sobre irmãs. De agora em diante, até chegarmos à seção três, onde agora irá combinar XML e CSS para construir este site específico que você está olhando ? Então, nesta seção, vou apresentar os conceitos básicos de CSS e também falar sobre os tipos mais comuns de designs que você pode aplicar com CSS. Agora, CSS é um tópico muito, muito, muito amplo. Eu poderia fazer um curso de 10 horas só falando sobre CSS, mas não temos 10 horas. Então o que eu vou fazer nesta seção é eu vou apresentá-los para os mais populares para os tipos mais comuns de projetos que você não pode jogar com, CS diz. E então, na Seção 3, quando construirmos este site em particular, vou apresentar-vos ainda mais. Arcia diz habilidades. Então sentem-se, relaxem e espero que gostem desta seção. Vamos começar 23. O que é CSs: tudo o que é um bem-vindo a esta nova seção onde vamos estar falando de C. S s. E a primeira pergunta óbvia aqui vai ser o que exatamente é C S s bem, stents CSS para folhas de estilo em cascata. Agora eu sei que isso não faz nenhum sentido, mas com o tempo ele agora vai se lembrar também quando falamos sobre HTML e usamos analogia fora de um site sendo um corpo humano e html bean o esqueleto Bem, CSS seria basicamente qualquer código que faz HTML olhar melhor. Isso é basicamente o que CSS seria. Então, se usássemos a analogia do corpo humano, as apreensões seriam como os músculos da pele, o cabelo, qualquer coisa que faça o corpo humano parecer melhor. Assim, CSS forma o estilo principal e a estrutura fora de cada praia da Web na Internet. Isso não é ver que você pode ter estilo sem C diz que você pode. Quero dizer, nós te mostrei como fazer algumas mudanças de estilo no seu é Tim L. Nosso documento abusando apenas HTML puro. Mas CSS, idealmente, deve ser o fator alemão porque faz a cauda são muito mais fácil e muito melhor assim Carlos fundos, efeitos de pairar, animações de estilo, qualquer coisa que podem fazer um site de página web parecer mais atraente. Geralmente é feito com C. S. S. Então, isso é uma breve introdução ao CSS alemão até ovos vídeo, onde agora vamos começar a caminhar com CSS. 24. Faça o download dos arquivos: Tudo bem. Antes de seguirmos em frente com o resto do curso CSS, eu quero que você faça algo para mim anexado a este vídeo. Você vai encontrar um arquivo zip, e quando você baixar e em zip esse arquivo, você deve ter esses três arquivos. Basicamente, você terá um, ah, um índice de arquivo html um estilo que nos define arquivo. E você também teria uma pasta contendo, ah, três imagens diferentes. Então, dependendo da plataforma onde você está assistindo ou você está fazendo este curso, você vai encontrá-lo anexado a este vídeo ou você pode até encontrá-lo em seus projetos. Seccional, por favor, vá em frente. Baixe o arquivo ZIP no zip e confirme que você tem acesso a esses documentos antes de seguir em frente com o Ocidente fora do curso. 25. Sintaxe básico de CSS: Bem, espero que você não tenha tido nenhum problema para baixo. Build in n obtendo acesso aos arquivos. E se você não fez isso, vá em frente agora e abra o arquivo CSS de ponto de estilo usando os colchetes, Texutil ou qualquer outro texto um pouco que você está usando. Então deixe-me mostrar exatamente como é a sintaxe do CS. Basicamente, você vai escolher um elemento que você quer aplicar seu estilo. Então, se formos para o nosso índice dot html, nós temos o h uma tag bem aqui. Então vamos tentar aplicar algum estilo ao nosso H. Nós vamos entrar aqui agora e então dizer H um Isso é o avião elementar dizer e, em seguida, Kohli suportes e, em seguida, no lado do calibrado. Vamos espreitar uma propriedade desse elemento. Ele vai querer jogar este estilo, também. Neste caso, digamos, queria mudar o tamanho da fonte e teria que torná-lo um pouco maior. Então vamos com 50 pixels e, em seguida, ponto e vírgula. Isto aqui é a sintaxe básica de qualquer código CSS. Primeiro, você tem o elemento que você está aplicando esta dizendo também você terá seus colegas chaves e, em seguida, dentro da calibração teria a propriedade. Neste caso, é cólon tamanho divertido e, em seguida, o valor fora da propriedade e, em seguida, um semi dois-pontos. Vamos adicionar mais um. Vamos com o texto. Ah, linha e vamos com o centro. Então, meu cólon e lá vai você. Vamos em frente agora e salvar isso. Agora, se tentarmos passar por cima de um navegador e se refere a Página, você re notar que não houve nenhuma mudança O H um alvo recebendo CSS selecionado. Ele ainda está mentindo para a esquerda e o tamanho da fonte ainda não mudou. Isso ocorre porque mesmo que tenhamos esse estilo que o arquivo situs, ele não está vinculado ao nosso arquivo html index dot. Por isso, temos de ligar os dois. Como você faz isso? Vou compartilhar o próximo vídeo. Vejo-te então. 26. Linking de HTML e CSS: Bem-vinda de volta agora. Anteriormente, adicionamos com sucesso algum código para o nosso estilo DOT diz que seu arquivo, Mas, infelizmente, porque não vinculamos o estilo que as cidades caíram para o nosso índice dot html as mudanças , um não aplicado. Então, a grande questão agora é como vinculamos nosso arquivo de estilo com nosso arquivo HTML? Bem, para fazer isso, moagem para indexar dot html e, em seguida, dentro da tag head, confira esta nova ação. Mas se chama Link. Tudo bem, então basicamente, isto é Hey, nós estamos adicionando um link e o primeiro vale vai ser trilho igual e isso em folha de estilo casacos . Então, basicamente, a baleia é uma maneira de dizer Ok, que tipo de ligação vai haver neste caso agora. É um arquivo de folha de estilo, e então o próximo vale será para o árbitro H. A fonte real. O link para esse arquivo, o link para este arquivo talentoso e assim como com as imagens, porque o estilo que define arquivo e índice de ponto html exatamente na mesma pasta, vai ser muito simples. CSS de ponto de estilo. Se, é claro, isso se a célula que as irmãs caíram estivesse dentro de outros estilos frios mais completos, por exemplo, então o Atria Fear seria estilos Ford slash e, em seguida, irmãs estilizadas, assim como com imagens. Certo, então lá vai você. Nós não temos o Lincoln com sucesso. Vamos em frente e fechar isso. Eu vou entrar aqui agora mesmo. Salve meu arquivo. E agora vamos lá. Teoh Boza, atualize a página. E lá vai você. Agora você pode ver que o H está agora alinhado ao centro. Além disso, o tamanho da fonte também foi definido para 30 pixels. Então, parabéns. Nós agora vinculamos com sucesso nosso arquivo CSS de ponto de estilo com nosso arquivo html index dot. 27. A poder do CSS: bem, retornos em um vídeo anterior é vinculado com sucesso nosso documento HTML com nossa folha de estilo CSS . Mas a grande questão agora é o que exatamente é tão especial sobre CSS? Quero dizer, tudo bem. Fomos capazes de adicioná-lo. Tamanho divertido e também uma linha são 81 presos ao centro. Mas poderíamos ter feito isso com HTML Isabel, certo? Então, por que CSS? Por que se preocupar com o estilo com CSS? Bem, você vê, o verdadeiro poder do CS diz que está em sua capacidade de fazer mudanças de estilo em vários elementos de uma única linha de código. Agora é um exemplo. Se eu voltar para o meu índice dot html aqui, você pode ver que temos várias tags de três anos. Espere, por exemplo, temos a política entre parênteses é um H três. O Ted. Não temos cada etiqueta aqui também. Temos outra etiqueta H três aqui, outra aqui em baixo. Se quiséssemos dar ao nosso H três tags uma determinada cor com HTML, teríamos que ir para cada um individualmente e depois dizer OK, três aqui, é igual aos folículos de texto azul, e então ir para a próxima cor de texto azul e assim por diante e assim por diante Com CSS, podemos mudar o cool fora de cada h três tag de apenas escrever. Um pedaço de código muito pequeno. Como o que temos aqui. Então, como exemplo, se eu entrasse aqui agora e dissesse três e então vamos dar uma cor e vamos dizer que a cor aqui é azul. Vamos ver o que vai acontecer. Vou entrar aqui agora mesmo. Arquivo. Vamos Ah, seguro. E agora vamos lá. O que você Rosa vem aqui se refere à página e agora você pode ver que cada tag de três anos está agora em azul assim. Então este aqui é o verdadeiro desligamento CSS. Você pode fazer alterações em todos os tipos de elementos a partir de um único código de linha fora. É simples assim. Mas se então aqui é isso Ok, você pode impactar vários tipos de elementos ao mesmo tempo. O que? Quero dizer, aqui está isto. Ok, então nós temos um Chuan nós temos h dois b se quisermos. Por alguma razão, se você quiser adicioná-lo exatamente o mesmo estilo em ambos os tipos de elementos, nós podemos fazê-lo também. Então tudo o que eu vou fazer neste caso seria vir aqui depois 81 vou adicionar um coma e depois h três. Agora, basicamente, eu estou dizendo para todos os H um e H três rebocadores, dê-lhes um telefone, diz de 30 pixels e alinhados ao centro. Vamos verificar isso. Vindo aqui de novo, Save. Volte para o meu Boza. Bem, primeiro a página e assim, você pode ver agora que o H um e o A três palestras estão todos alinhados ao centro e todos eles têm uma ciência de 30 pixels exatamente como essa. Então, aqui está o verdadeiro desligamento CSS tendo a capacidade de fazer várias alterações de estilo para vários elementos, tudo ao mesmo tempo. E a melhor coisa é, se no futuro eu quisesse mudar de ideia e dizer, quer saber? Em vez de dar a esses caras um tamanho divertido de 50 pixels, eu quero mudá-lo para 24 pixels. Tudo o que precisamos fazer é entrar aqui. Compartilhar desenvolvido 50 a 24 e é isso. Eu salvo minhas alterações e todos os H e as tags HB são afetados exatamente com o mesmo valor. Eu não tenho que ir a cada indivíduo h um Taegu, cada indivíduo cada um para atacar e fazer a mudança lá. Então, em mentiras, o verdadeiro desligamento CS é a capacidade de fazer várias alterações em vários elementos, tudo a partir de uma única linha de código desligado. 28. Propriedade de família fonte: Vamos falar sobre uma das propriedades mais importantes que você pode definir em seu site , e que vai ser a propriedade da família de fontes extremamente importante. E não é suficiente para você definir um valor e dizer: “ Ok, sim, sim, essa é a família do fundo de desenvolvimento. Vou seguir em frente. Não, você tem que ter muito cuidado. E há certas regras que se aplicam sempre que tentamos criar uma família apaixonada. A família da frente, essencialmente, é a propriedade. Eles ditam o tipo de frente que seus trabalhos usariam agora, idealmente, um novo documento HTML. Existem três tipos principais de tags que você pode falar que você pode direcionar sua cabeça em. Zero cada quer 86 Você pode levá-lo a um P tags, que seria o texto normal, e você também pode levá-lo suas oito tags também. Fora do curso. Houve certos casos em que você também pode obter como seus elementos menos e assim por diante. Mas os Três Grandes são geralmente seus títulos, seu texto normal e seus links de Heiple. Agora, aqui está a coisa certa. Existem diferentes tipos de famílias divertidas, milhares e milhares deles, mas também existem diferentes tipos de navegadores. Você tem um safari Chrome Firefox em alguém. Nem todos os navegadores são capazes de interpretar todos os tipos ou famílias de fundos. Na verdade, não há um único navegador que possa interpretar todos os tipos de família de frente. O que isso significa é que você pode escolher uma família de fundos particular que ficaria muito bem na mais esquerda afeta. pérolas são, mas em Coombe, pode parecer diferente. Isso é porque a tripulação pode ter dificuldade em ler ou este avião, esse tipo de família divertida. Lembre-se que seus irmãos são como intérpretes. Eles interpretam você, XML e irmãs código, e então eles mostram o que é que eles interpretaram. Mas isso sendo dito, não são definidos na frente famílias da constante de ser seguro na Web. O que isso significa é que estas são famílias divertidas que todos os navegadores podem interpretar. Agora, se você passar para W três escolas ponto com e você olhar para os conjuntos de documentos de formulários seguros da Web . Aqui, você pode ver as famílias telefônicas que estão seguras. Você tem os sete fundos, você tem os fundos sensoriais. Você pode ver os exemplos ali mesmo. Você tem seus modelos de telefones espaciais também, então essas são as famílias telefônicas que todos os tipos fora do navegador seriam capazes de interpretar. Isso é importante porque normalmente você deseja definir uma família de fundos de contingência sempre que escolher sua família de fundos principal. O que quero dizer é, se você escolher uma família de frente personalizada, você quer que ele de volta para que, no caso de uma determinada navegação, Eu não posso interpretar sua falsa escolha para a família de frente. Ele vai interpretar as segundas negociações, que será sua culpa de volta. E você sempre quer definir uma dessas famílias divertidas aqui como sua opção de recurso. Uma coisa a mencionar também é que para o seu texto regular, você tem sete fundos e você tem alguns. Então, se você normalmente quiser ir com essas músicas, senhor, nós temos Estes são os telefones que não têm, como estilo, por exemplo, como aqui onde você tem seus fundos lamentáveis. Dê uma olhada nos tees, por exemplo, e o G. Você pode ver a forma como ele é estilizado quando você tem texto e você tem um monte de texto. Isso pode se tornar um pouco mais difícil de liderar, mas com Sunseri, se você pode ver que o chá é a divisão normalmente o Jesus jogou normalmente. Sophia mensagem. Você normalmente quer ir com uma das músicas Serif fontes. É assim que você quer ir para as suas posições. Você poderia usar um dos telefones Seri. Acho que vai ficar tudo bem. Você não vai ter muito problema lá. Outra coisa a mencionar também é que sempre que você está definindo suas famílias de fundos, você não quer ir. Você não usa mais de um máximo de três tipos diferentes de famílias telefônicas em seu site. Normalmente, você definiria um para a família para seus títulos para seus títulos, outra família divertida para seu texto normal e, em seguida, talvez outra família de amigos para seus links hiperdiretos suas tags A. Mas velhos depois recomendam que você vá com para financiar famílias um para seus títulos e, em seguida, um para seus links anuais de texto regular. Normalmente é assim que você quer ir, então não mais do que duas ou três famílias de fundos em seu site. Certo, vamos voltar ao nosso documento HTML. Tudo bem. Quando eu quero fazer aqui é isso. Vou mostrar-te como podes definir a família da frente para as tuas etiquetas P, o teu texto normal ia começar. Veja, avalie. O que vou fazer é dizer P e depois vamos abrir o nosso estilo. Uma opção. Agora veja isso. Eu vou dizer, família Fund, tudo bem, e eu vou dizer músicas. Sarif será a família dos fundos. Isso é isso. Alguém chame o que está por vir aqui. Vamos salvar. Vamos passar para o seu navegador Agora note que a família de telefones padrão é normalmente vezes New Woman. Essa é geralmente a família de diversão padrão para profissionais. Como assim, vamos referir-se a pitch agora e como você pode ver que ele mudou para as músicas. Sirleaf. Certo, perfeito. Sun Surf é um dos cofre Web. Fonsi admite aqui, filho Sarif. Mas vamos usar uma forma diferente da Família agora como nossa família de fundos principal para as tags P. Agora, o Google tem quase 1000 fundos diferentes do Google, e um dos meus telefones favoritos é a frente Mont Vários. Gosto de usar essa frente para o meu texto normal. É o único que me deixa mostrar. Está bem aqui. É isto. Mais da Sarah, certo? Vamos em frente e tentar isso. Eu vou voltar para o meu documento HTML e se do que dizer algum Sarif. Vamos agora vir aqui e dizer Mont Serve Na boa notícia sobre Mont Seventh é o fato que quase todos os navegadores eu posso interpretar isso também. Mesmo sendo um costume, Google telefonou. Ainda é bem seguro. Então, vou dizer Monserrat, vamos poupar isso. Vamos voltar para um navegador corajoso em refere-se a página, e agora você pode ver o telefone mudou para mês. A Sarah. Incrível. No entanto, mesmo que Monster, o que é uma fonte do Google? E você tem todos os telefones do Google aqui, nem todos eles são capazes de ser interpretados facilmente pelos navegadores. Como exemplo, vamos descer aqui. Veja, há outra frente aqui chamada Sophia. Certo, Justice, um exemplo. Agora vamos descer aqui. Então aqui está. Sophia. Esta é uma família muito divertida para o seu texto normal, mas vou usá-la só para demonstrar o que quero falar. Certo? Vamos mudar o valor da família de telefones de um conjunto para semear medo. Em vez disso, Sophia, volte aqui em segurança. Vamos para o nosso corajoso navegador. Refere-se a Página. Você percebe uma diferença? É uma mudança. Já não é um monstro. Mas esta não é Sophia. Veja como Sophia parece você pode ver que é uma coleira muito, muito obsoleta. Mas o que você tem aqui é uma nova mulher porque o bravo irmão não pode interpretar a família divertida Sofia. Se eu for para o Five Fox e me refrescar, você pode ver que é exatamente a mesma coisa. Nenhuma diferença ainda é o mesmo tempo. Mulher nova. Isso é porque Bell é nós tipicamente temos dificuldade em interpretar a família de fundos E Sophia . Então, neste tipo de instância, você deseja definir uma opção de fallback padrão. Então, neste caso, agora, vou adicionar meu coma e depois dizer filhos Sarif como a opção completa. Vamos voltar aqui. Salve o treinador. Você é Broza. Bem, primeiro a página e agora você pode ver San Serif agora está em ação porque o navegador corajoso não pode interpretar Sofia. Então é exatamente por isso que você gostaria de definir uma opção de fallback. Mas e se você realmente quisesse usar essa família Sophia muitas vezes? Bem, há uma maneira de fazermos isto. O que você quer fazer é ir para o seu documento HTML e, em seguida, onde você tem sua tag cabeça, eu vou colar algum código aqui e aqui está ele. Basicamente, estou a fornecer a ligação para a família telefónica da Sophia e isto está bem aqui. É um P s e depois telefones que o Google apistock Com Force no ano passado diz, e depois a família liga. Sophia, não vamos salvar isso e ver o que acontece. Vamos voltar ao meu corajoso Broza aponta a página, e agora você pode ver que esta família Sofia está fora de família em ação? Isso é porque nós dissemos no documento HTML onde nossas bolas eu posso encontrar a família do telefone . Então, nos casos em que você define um fundo do Google normal para o seu texto e ele não parece estar funcionando, você quer ir para a sua tag principal e, em seguida, anexar esse tipo de link. Então você apenas substitui Sophia pelo nome do outro da família que você realmente quer usar. Mas isso foi dito, deixe-me dizer que mais tarde neste curso, vou mostrar-lhe uma maneira melhor de sair. Lincoln Ah, costume. Formulários do Google para o seu documento html. Isso funciona perfeitamente bem. É só que ele pode afetar a velocidade do seu site quando ele é carregado. Porque agora o seu site, ele terá que primeiro de tudo ligado ao Google e, em seguida, encontrar a família divertida que você especificou herda geralmente muito melhor para ter essa família divertida começar localmente em seu servidor Web . Eu mostro-te como podes fazer isso mais tarde. Então não se preocupe. Vou voltar aqui e mudar a Sofia de volta. Teoh Monserrat não servirá isso. Vamos voltar aqui. Vamos salvar. Volte para um Broza foram primeiro uma página e lá vai você. Ok, então isso é normalmente para as famílias divertidas novamente. Só uma breve recapitulação. Você tem seus fundos seguros da Web e deseja definir um deles para sua opção de fallback para seu texto. Você normalmente quer ir com os fundos sensoriais para sua cabeça como você poderia ir com um fundo Serie e também para telefones Google. Muitos deles caminhavam normalmente com seus navegadores. No entanto, em certos casos em que ele não parece estar andando, então você gostaria de ir para a sua tag de cabeçalho HTML e, em seguida, adicionar este link aqui. E, em seguida, adicione o nome da família de telefones que você deseja vincular ao seu site da Web. Então é isso por diversão. Família. Obrigado por assistir. Vejo-te na próxima aula. 29. Outros propriedades de fonte: já. Então, lidamos com sucesso com a família do fundo no vídeo anterior. Mas agora vamos dar uma olhada em algumas propriedades de texto adicionais com CSS. E como você pode ver, eu já adicionei para propriedades extras. Temos o tamanho da fonte, que, claro, indica o tamanho de um texto. Isso pode ir a qualquer lugar de um pixel a 10.000 pixels, e realmente depende de quão grande ou quão pequeno você deseja que suas letras apareçam. E então o peso da frente basicamente te refrescou. Quão ousado ou quão leve o texto seria. Agora o valor aqui que você vê é 600. Mas você tem outros valores, como ousado, mais leve. Então eu estou apenas remover este 600 vamos ver desenvolver que temos. Então temos uma pedra mais leve, ousada e normal. Normal é, é claro, o valor padrão, Mas como eu disse, melhor do que ir com pedregulho mais leve, você pode especificá-lo em números que você pode ir com, como 300 por exemplo, 405 100. Então, como exemplo, vamos em frente agora e salvar Thistle. É a diferença. Então são 300, o que é muito, muito leve. Vamos voltar para vamos mantê-lo fresco. Então agora você pode ver que este é o valor de 300. Mas se voltarmos e eu disser, quer saber? Eu vou fazer este 700. Agora, isso vai ser muito mais ousado. Vamos voltar aqui. Refresque. Agora considere o Texas. Ah, muito enrolado. Tenha em mente, entanto, que os valores aqui dependerão da família de fundos. Nem todas as famílias divertidas terão valores para 607 100 ou até 800. Tudo depende da família da frente. Muitas vezes você vai descobrir que a maioria das famílias divertidas, pelo menos, teria uma variação leve, que geralmente é 304 100. Eles terão a versão normal, que geralmente é 500, em seguida, uma variação ousada, que geralmente é 700 ou 800. Então você pode apenas jogar junto com os desenvolvedores e ver o que por US $5 estão disponíveis com a diversão especificada para mim que você escolheu agora altura da linha. Claro, isso indica o ah, a distância entre nossas madeiras em uma linha de ah diferente. Então agora isso é 16 pixels, mas demonstre, vamos em frente agora e muda o valor todo para, digamos, 24 pixels. Então você pode realmente entender o que estou tentando dizer aqui. Bem, vamos em frente e salvar isso. Vamos voltar para você sobre refere-se a página Então agora você pode ver que este é 24 picaretas. Além disso, não há mais distância entre as linhas de texto que temos. Você pode ver que é o que as alturas da linha são essencialmente faz. E então nós também temos um espaço de letra e o espaço entre as letras dois pixels é o que temos atualmente. Vamos fazer isso oito pixels para que você possa ver a diferença muito óbvia. Vamos voltar aqui. Então isso é dois pixels, e agora isso é oito pixels, o que é, é claro, apenas o que é simplesmente terrível. Idealmente, você não quer usar alface paciente. Na maioria dos casos, você tem outras propriedades sobre as quais falaremos em apenas um momento. Mas há mais uma sobre a qual precisamos conversar, e essa será a propriedade da cor agora. Até agora, temos sido usados para dar em valores como azul, verde vermelho, mas com CSS e até mesmo com extremo el você realmente tem acesso a milhares e milhares de diferentes tipos de cores. Agora, se você for para html kalakota dot com aqui, você verá esta barra, e aqui você pode escolher o tipo de cola que você quer ir com. Literalmente. Os milhões, é claro, estão aqui. Então o que você quer fazer é uma vez que você escolheu uma vez, você gosta de uma variante particular da cor. Aqui, você tem o que é conhecido como os valores hexadecimais. Simplesmente copie desenvolvido aqui. E então você pode simplesmente aplicar isso para o seu valor de texto em Coal Valley por isso. Então vamos fazer isso. Vou em frente agora e salvar isso. Então isso vai parecer todo ferido. Vamos voltar para uma atualização de comando de textura. E agora você pode ver que tudo agora é como uma laranja. Então, novamente, você pode usar isso para escolher colares muito específicos que você deseja aplicar em seu texto. Então isso é muito mais 81 coisa a mencionar se você vai para o w três escolas dot com CSS e, em seguida, olhar para o texto CSS acontecer aqui todo o caminho para baixo, você verá algumas propriedades adicionais, como o texto de direção decoração. Aqui é onde você pode especificar se você quer que você na linha. Sua mensagem. Talvez adicionar um traço. Coisas assim você tem transbordamento de texto, sobre o qual falaremos um pouco mais tarde. Você tem espaço na ala em que é como “Deixe-nos cair”. Mas agora isso lida com a distância entre as palavras em seu texto e, em seguida, é claro, alinhado verticalmente, o que falaremos sobre isso mais tarde hoje. Mais algumas propriedades, que discutiremos à medida que continuarmos no curso. Mas, por enquanto, essas são geralmente as propriedades mais populares que você aplicaria ao seu texto. Um mês de intervenção antes de eu reunir é a polícia? Tenha em mente que todos estes também são aplicáveis aos seus títulos, aos seus H. É estudante alguém e também, na maior parte, suas oito tags também. Basicamente, qualquer tipo fora de texto também inclui nossas listas. Então é isso que eu penso em assistir. Te vejo na próxima aula. 30. Cursos de CSS e IDs: Vamos continuar com nossa jornada para o mundo fora do CSS. E vamos dar uma olhada em algo muito importante, que você não pode prescindir. Quando se trata de código CSS em. Quero fazer-lhe uma pergunta. Tudo bem, vamos voltar para você. Ah, Editor Bem aqui índice dot html arquivo. Agora você notaria que temos várias dibs, certo? Temos um aqui, que é o primeiro dia que contém este texto. Temos um Dave vazio bem aqui. Temos outro Dave aqui também. Este é outro Dave. Há outro aqui em baixo também. Isso contém as imagens e alguns parágrafos. Ok, agora, nós poderíamos facilmente vir aqui e dizer, você sabe o que? Queremos dar aos nossos dibs uma cor de fundo. Ah, longe. Vamos dizer vermelho apenas como um exemplo, certo? Vou em frente e remover a cor do nosso texto. Os Estados voltam ao preto. Então vamos fazer isso de volta no carvão vermelho. Agora, se eu for ao meu Broza e me refrescar agora você pode ver que todos os nossos Dave têm o saco vermelho na cor. Incrível. Mas e se você quiser dar ao Dave específico a bolsa de Culo fora Red e outros deixá-los como estão? Como você faria isso? E se você quisesse dar um saco? Tio de Azul para Onley Um Dev em particular, como você faria isso? Este é realmente o conceito de classes e I ds entra em jogo, Digamos, com classes você pode atribuir uma classe a um grupo de elementos e, em seguida, aplicar o mesmo estilo em todos eles ao mesmo tempo. Mas então, com um I d, você pode direcionar um elemento específico e aplicar seu próprio estilo exclusivo ao elemento específico . Então vamos voltar para o nosso índice dot html arquivo aqui. Então é isso. Por exemplo. Eu queria dar a primeira vida aqui. Vamos dar a cor de fundo da Capa Vermelha. Eu vou dizer, Dave, Dave, classe é igual. E agora aqui em vermelho, eu dei este dia da aula de vermelho Vamos nos acalmar até o último dia, que é o que temos aqui. Vamos também dar a mesma classe fora do vermelho. Está bem, mas depois vou fazer outra coisa. Eu vou até a morte no meio. Na verdade, aquele que contém as imagens aqui em baixo. Vamos em frente e dar este aqui e eu vou dar-lhe uma identificação. Outra aula, mas no azul. Então o que eu vou fazer essencialmente é eu vou dar a este Dave em particular a cor de fundo de azul e os outros dois eles têm a classe de Lei-lo de volta e esfriar, vermelho. Então, para fazer isso, eu vou lá. Apenas salve meus estão no arquivo exato de estimativa. Primeiro, vamos para o nosso estilo que CSS Então o que eu vou fazer aqui? Isto está bem? Em primeiro lugar, vou dizer que os pontos não leem o médico o que ele representa classe. Então, basicamente, eu estou dizendo que qualquer elemento que tem uma classe de vermelho dar o saco e culo fora vermelho. E então qualquer classe que tenha um i d off idéias azuis, você usou a hashtag para representar um I d. Tudo bem, então qualquer elemento que tenha o i d off blue Bem, dê um saco. Cor marrom, cor de fundo fora azul. Tudo bem, então vamos colocar isso em prática. Vou em frente agora. e salve. Vamos falar com Broza a página e olhar para o chapéu. Então, o primeiro vivo aqui é na cama. O último é invadir enquanto este está em azul. Então é exatamente assim que você pode fazer uso de IDs e classes. Mas fica ainda mais interessante. Você pode realmente aplicar várias classes a um único elemento. Vamos voltar ao nosso índice com cada Samuel, certo? Digamos, por exemplo, Então, se este dia, se você quisesse aliar no texto para o centro o que eu vou fazer aqui é o primeiro dia do que tem um fim de vermelho. Vou adicionar outra classe do espaço e depois dizer “centro “Ok, e agora vamos dar uma olhada em outro Dave bem aqui. Ah, aquele vamos ver a que outro def podemos aplicar isso? Ok, nós temos na verdade, eu acho que o quê? Vou aplicar esta classe fora do centro não só a um Dave, mas a outro elemento. E isso vai agora eu vou dar a ele a tag P na idade para ser manchete que Cesar prevê na prática OK, então isso eu vou dizer classe P é igual a E então, claro, ler. Então saiba o que eu fiz aqui. Eu dei o eu sinto muito, não ler. Coloque o centro. Peço desculpas. Centro. Ok, Então nós estamos indo o primeiro dia da classe de centro e também dado estes p elemento direita na classe de centro também. Vamos em frente agora e salve. Isso é bom. Mova um reboque. Um estilo que CSS. Vou adicionar outra aula agora. Isso vai ser o centro. Está bem. E agora o que você quer fazer aqui é alinhar nossos textos com a frase. Vou ver uma mensagem. O centro da linha. Tudo bem, vamos em frente agora e salvar. Volte para um navegador. Refere-se à página e vamos ver o que temos. Ok, bem, veja isso. Então, o primeiro dia aqui tem o texto no centro, e então a tag P aqui tem seu próprio texto no centro. Você pode ver que é o que está por baixo de projetos entre parênteses. Se voltarmos para o nosso próximo documento de e-mail para que você possa ver previsões e pacotes aqui e em seguida, a classe p do centro. É exatamente por isso que o texto aqui é enviado quente para que você possa ver como você pode aplicar aulas , bem como idéias. Ideias são especificamente para um único elemento. Você não pode, você não deve se inscrever, e eu d para mais de um elemento. Ideias são únicas. Eles devem ser específicos para um único elemento. Mas com classes, você pode usar classes para atribuir estilo a vários tipos diferentes de elementos, e ele não precisa ser o mesmo elemento que você pode ver aqui. Voltando ao Hostel, é CSS. Nós aplicamos a classe de centro para a tag dois AP aqui e também para aditivo. E também podemos fazer isso porque o estilo ou propriedade em particular queria se aplicar, que é texto. A linha vai tanto para dibs quanto para cima texto. Não há nenhuma maneira seria construir para aplicar uma linha têxtil fora do centro para, digamos, uma imagem, por exemplo, porque você não pode tomar essa linha em um elemento de imagem não é apenas não vai acontecem agora. Você também pode obter muito específico ao usar a classe. Agora mesmo. Como é, estamos centro ST ponto basicamente com os alvos e cada elemento que tem a classe fora centro. Mas se eu entrar aqui e dizer p ponto centro agora, essas mudanças porque agora estamos dizendo que cada tag P que tem uma classe fora do centro fazer seu texto alinhar ao centro. Isto é muito diferente de Joe, dizendo que não são enviados para cima. Vamos colocá-lo em um teste. Vamos salvar, vamos. Mas você é Broza. Vamos atualizar a página e agora você pode ver o primeiro texto de davits é Não. Uma garota no centro, enquanto a classe P E aqui no centro. É o Texas alinhado ao centro, então eu sei a diferença entre incluir apenas a classe e depois em seguida, incluindo um elemento de ataque antes da classe. Há uma grande diferença entre esses dois agora. Você também pode segmentar várias classes e I ds exatamente ao mesmo tempo. Para demonstrar isso, vou dar um exemplo a vocês. Deixe-me ir em frente e remover a frente. Espere aqui na 700. Tudo bem, vamos em frente agora e apenas salve isso primeiro e vamos ver a diferença. Vamos refrescar. Tudo bem, então todo o texto agora é basicamente Bigelow. E em peso. Nada é muito ousado. Certo, vamos voltar aqui. Vamos fazer isto. Ok? Eu vou entrar aqui agora e dizer que todas as classes do centro e então eu estava agora em coma . E eu vou dizer que todas as turmas estão vermelhas, outra vírgula. E então eu vou dizer um “eu d off blue”. E agora podemos adicionar a propriedade e dizer isso na frente. Peso 700. O que eu fiz aqui é que eu disse que todos os elementos que têm uma classe de centro todos têm uma classe Harvard todos têm uma idéia de azul. Faça o seu conteúdo, ter um peso de fundo de 700. Saiba que usamos um coma para separar as aulas. E eu estou indo aqui agora e salvando Volte para nossas meninas estão atualizando a página e agora você pode ver que o primeiro dividido tem uma classe de vermelho. É divertido para ele é 807 100 neste também. É 700 também porque tem uma classe fora do centro. Enquanto o texto normal aqui ainda é Legler. Porque este Dave não tem uma aula de vermelho ou santo sobre a ideia de azul e assim por diante e assim por diante. Então é assim que você pode fazer uso das minhas aulas e das minhas aulas. A linha inferior aqui é classes podem ser usadas para segmentar vários elementos ao mesmo tempo. Enquanto as ideias são usadas para atingir um elemento muito específico que é a principal diferença entre classes e ideias. E, claro, você será exposto ao Walker com aulas. E 80 é muito mais à medida que progredimos neste curso. Obrigado por assistir. Vemo-nos na próxima aula. 31. Propriedade de imagem de fundo: Bem-vinda de volta. Espero que você esteja gostando deste curso CSS aqueles agora. Até agora, tão bom com explode. Uma maneira importante de adicionar um fundo elementos Teoh. E isso tem sido o uso da propriedade de cor de fundo, que, claro, adiciona um saco na cor. Mas e se você quiser adicionar uma imagem em vez de querer usar uma imagem como plano de fundo? Como vai ser fazer isso agora? Eu quero voltar para a pasta que contém são cada arquivos semelhantes em imagens cheias lá? Estas são as três imagens que temos, certo? Preste muita atenção, Tiu. A segunda imagem. Este aqui. São 300 pixels por 168. Isso vai se tornar um evento real muito, muito em breve. Mas quero que usemos esta imagem aqui como fundo. Tudo bem, então para fazer isso, eu vou voltar para colchetes e vamos para o nosso arquivo html index dot. E vou aplicar as imagens do saco neste Dave vazio que temos aqui. O um logo acima do r recebe estudo com seus arquivos são comentário. Tudo bem, então o que eu vou fazer é dar isso, Dave e eu estamos bem, e eu vou chamar essas imagens seção traço. Tudo bem, então é assim que você usaria mais de um se você vai nomear seus pais suas são suasaulas com mais do que um usaria um traço. Teoh, separe essas palavras. Ok, então seção de imagens eu vou continuar agora e salvar o arquivo. Vamos passar para um estilo de ponto CSS. Agora vou dizer Dev, sinto muito. Tag hash e, em seguida, seção de imagem de seção. Tudo bem, agora, primeiro de tudo, vou adicionar uma cor de fundo. Primeiro de tudo, então vamos fazer isso. Ah, chamador de fundo. E isso está ficando preto. Muito bem, agora vamos ver o que vai acontecer com segurança. Vá por cima. Teoh Broza refere a página e Ah, bem, como você pode ver agora, nós não vemos nenhuma div com um fundo preto. Isso é porque o Dave agora como ele é é Mt. Não há nada dentro dela. Não há impostos, nem imagem, absolutamente nada. Então, uma maneira de realmente mostrar um saco preto uma cor seria adicionar algum conteúdo ou podemos definir uma altura. E com para surdos, e eu vou apresentar a vocês agora para novas propriedades fora de alturas e porque eu vou dizer 1000 pixels e então com, digamos, 1250 pixels para digamos, que você possa defini-lo definitivamente esconder. E com para seus contêineres, seu Dave, suas seções e assim por diante e assim por diante. Então vamos em frente. Agora guarde isso. Vamos voltar para suas contas são atualizadas a página e tudo bem, então aqui está. Agora é o único que espera aqui para que você possa ver direito que agora temos nossa seção vazia . Eu sou muito Dave com 1000 pixels e esconde 1250 pixels e com a cor de fundo fora preto. Incrível. Ok, agora vamos voltar. Vamos agora aplicar a imagem de fundo. Para fazer isso, eu vou dizer imagem traço de fundo. Agora você terá que especificar o u. R L. Onde as irmãs vão encontrar este arquivo esta imagem que queremos nos usar um fundo para que nós vamos ver o seu de L e, em seguida, em colchetes casacos. Lembra-se do caminho do arquivo que aprendemos em HTML? Eu vou dizer imagens porque ele está em uma pasta chamada Imagens e Imagens e não vai haver CSS. São dois P e G. Esta é a fonte de nossas costas na imagem. Vamos em frente agora, Safe. Volte para a primeira página e dê uma olhada nisso agora você pode ver isso. Ok, a imagem agora tomou toda a largura e altura da nossa seção. Mas você também notará a espera um minuto. Está repetindo o quê? Lembre-se que esta imagem é apenas 300 por nossos 168 pixels, eu acredito, mas nós definimos a altura e largura desta seção para ser muito, muito maior. Como resultado, por padrão, CSS irá repetir a imagem de fundo para que eles possam ocupar ambos com e ocultar seu contêiner. Mas vamos fazer outra coisa. Vou adicionar uma nova propriedade e isto vai ser chamado de “suspiros de fundo”. Muito, muito, muito importante. Agora veja isso. Auto geralmente é o padrão. Este tipo de opção segura. Deixe-me salvar. Volte aqui dois barris sempre frescos e você pode ver que não há realmente nenhuma mudança nisso. Basicamente, tudo existe uma maneira de dizer Deixe os sinos determinarão a melhor maneira de exibir o verso na imagem. Certo, sem mudança. Mas se eu voltar aqui e disser que sabe o quê? Não vou mais repetir o fundo. Um novo plano de fundo de propriedade repete sem repetições. Isso é certo. Agora eu estou dizendo para não ser escolhido a imagem de fundo. Certo, vamos ver o que acontece. Volte para trás. Salve Vindo aqui. Estamos frescos agora? Você vê isso? Com CSS automático só exibirá a imagem da melhor forma possível. Não vai esticar. A imagem só vai ser exibida o mais ordenadamente possível. E, em seguida, para o resto fora do recipiente, ele irá exibir a cor de fundo. Você pode ver isso, certo? Ok, vamos voltar agora. Vamos mudar o tamanho do saco de carro para algo conhecido como capa. Qual é a diferença? Dê uma olhada. Vou continuar e salvar a luta agora mesmo. Volte, sérvia Elza e veja isso. Vou refrescar e Blalock olhar para isso. Basicamente, com a enseada Alu para o tamanho de fundo estavam dizendo Hey CSS, Eu quero que você para garantir que o saco na imagem vai sempre ocupar o cheio com e altura fora seu recipiente. Eu não me importo se a imagem de Baghlan é menor que o recipiente. Se você tiver que esticar essa imagem para que ela sempre esteja ocupada e oculte seu conteúdo. E é por isso que você pode ver agora que a imagem foi esticada, não é clara. Está desfocado e você pode até ver que parte da imagem foi cortada porque, no desespero diz que há uma tensão e dizer: “ Ei, Ei, ok, eu só vou me certificar que essa imagem sempre ocupará sua matéria continental. O que? Isso é exatamente o que o valor fora da cobertura faz. Há outro. Outro valor neste é chamado de conter. Semelhante, mas diferente. Vamos em frente agora, guarde isso. Volte para o nosso Boza. Estamos frescos e o olhar de que há uma diferença, certo? Agora você pode ver que mesmo que a imagem ainda esteja desfocada, ainda está embaçada. Você ainda pode ver a imagem inteira, e você pode até mesmo ver o saco e cor fora sexta-feira preto. Agora o que continha aqueles é que é um Z. Não importa o que aconteça, eu sempre vou ter certeza de que todo o saco na imagem é sempre visível. Não é como onde está a prioridade. O contêiner, basicamente o bagman. Imagens esticadas. Todo o recipiente é coberto em conter. É a própria imagem de Baghlan. Essa é a prioridade. Vamos certificar-nos de que a imagem de fundo é sempre mostrada. Está totalmente mostrado em todos os momentos. Mesmo que tenha que deixar algum espaço. Isso é bom. Neste caso agora, o espaço é a cor de fundo. Isso é bom. A prioridade é garantir que a imagem de Baghlan é sempre visível, mesmo que e também, é claro, às vezes o saco uma imagem será sangue, assim como com a capa. Mas novamente, pelo menos, toda a imagem de fundo será sempre mostrada. Essa é a maior diferença entre cobrir e conter. Vamos voltar aqui agora. Além de conter cobrir um auto você pode definir valores Lexus, por exemplo, Digamos 75 pixels endêmicos e também dizer, 50 pixels. Então, basicamente, nunca dizendo OK, vamos dar o saco em sites e alimentado pixels com e bebês pixels em altura. Vamos ver como isso pareceria Vamos salvar, vamos voltar aqui refere-se a página, e lá vai você. Então agora nós demos essa imagem de fundo, você sabe, com a gente e para picareta vendida e cabeça de 50 pixels para que você possa ver que é muito, muito pequena. Você poderia adicionar todos os valores como, digamos, por exemplo, sobre outro e usando dois caras diferentes, Digamos 400 pixels. Então, basicamente, o que isso faz aqui é que estamos dizendo, Defina um com off pixels financiador e, em seguida, a altura ajustá-lo para auto. Isso é o que isto é. Então vamos em frente. Salvar. Volte para Balza, atualizou a página, e eles vão bem com um fundo de pixels e uma altura definida para auto voltando. Também temos valores diferentes para o plano de fundo. Repita. Você pode ir com valores como, digamos, por exemplo, são repetição X. Tudo bem, então vamos verificar isso. Vamos repetir X. Basicamente, estamos dizendo que colocamos o saco na imagem, mas Onley horizontalmente. Isso é na saída X. Então, para demonstrar isso, vamos voltar ao tamanho do plano de fundo definido como auto. Ok, vamos em frente, salve. Volte para um navegador ou primeiro uma página para que você possa vê-lo agora mesmo em Lee preenchido o eixo horizontal cheio na bolsa na imagem. Certo. Mas se eu voltar aqui e eu digo em vez de repetir X gol com a repetição, por que isso aqui vai ser vertical em vez disso. Então vamos salvar. Volte para o navegador. Nosso refere-se a página e lá vai você. Agora você pode ver que sente a altura fora de seu recipiente melhor do que o com fora do conteúdo . Então isso é basicamente o chão do saco Repetir valores em ação. Agora há mais uma propriedade de fundo que eu quero dar uma olhada, e que vai ser a propriedade de posição de fundo. Então, neste caso, agora, ele vai estar de volta em posição. Agora o que é isso com as costas e o presente. Você pode dizer CSS em qual parte da imagem você deseja se concentrar. Então, para demonstrar isso, o que eu vou fazer é remover. Tudo bem, vamos voltar ao tamanho do carro para a capa, e podemos até remover o que mudou de volta. Repito, já que o tamanho de Carvel praticamente cobre todo o continente para começar, então não há necessidade de repetir Então vamos fazer isso. Vou em frente agora e salvar o “Não”. Eu não adicionei nenhum valor para a parte de trás em posição ainda. Então vamos voltar para o nosso Broza. Atualize a página e tudo bem, então agora você pode ver isso. Esse é o jeito errado? Esse status exibirá a imagem de Baghlan. Quando é que diz que disse para cobrir, Você pode ver parte do CSS aqui foi cortado. Mas e se eu entrasse aqui e dissesse para a posição, vamos nos concentrar no centro a partir de um eixo vertical e também dissidente da saída direita, então vamos nos concentrar no centro fora da imagem. Em vez disso, vamos salvar Voltar para o nosso navegador, refere-se a página, e agora você pode ver que CSS agora mudou seu foco para que a imagem está agora corretamente em seu centro é uma divisão, provavelmente em sua próprio centro. Agora você pode ver todo o seu e-mail e você pode ver tudo fora CSS. Mas há outro enfraquecimento de Vela. Sente-se nele também. Podemos ir, mas digamos esquerda. E então nós também poderíamos dizer fundo bem aqui. Esta é uma maneira Vamos em frente agora salvar. Volte, Teoh, procure nossa atualização, e agora você pode ver que a concentração está no lado esquerdo e depois no fundo. É aí que está a concentração aqui. Mas se eu voltar aqui e eu mudei para, digamos direitos inferior em vez seguro, Voltar para um broza, refere-se a página e como você pode ver o foco mudou agora para a direita fora da imagem e, em seguida, o fundo. Então você pode ver isso é sempre como você pode mudar a maneira ou no ângulo com o qual você quer diz é para exibir sua imagem em e geralmente para os primeiros valores aqui. Você normalmente vai com esquerda ou direita, ou talvez até mesmo centro, e então para o segundo valor isso seria para o eixo vertical será ou centro superior ou inferior, modo que esta é a posição de fundo em ação. Claro, vamos dar uma olhada nisso um pouco tarde quando começarmos a construir nosso site. Mas estes são os mais comuns tinham a maioria das propriedades de fundo de Cornell, especialmente quando se trata de lidar com a imagem de fundo que você estaria lidando com, você sabe, Baghran tamanho de volta na posição de Baghlan repetida em, é claro, a imagem de fundo em si. Você poderia definir mais do que mais hambúrguer uma imagem se você quiser. É possível, mas vamos dar uma olhada nisso, muito mais tarde. Quer começar a construir o nosso site, mas por enquanto isso tem sido como definir sua bolsa na imagem. Mas depois disse Imagem s seu plano de fundo avisado lá, menos intimação é que sempre garantir que as imagens que você está indo para usar como fundos, no mínimo são iguais em tamanho ao recipiente com o qual você pretende aplicá-los . Então, idealmente, se vamos aplicar uma imagem de fundo para esta seção, com a altura dos 1000 pixels no com fora do nosso 12 50 idealmente construir foram com esta imagem. Aquele, o maior. As irmãs que vaguearam PNG. Esta seria uma imagem muito melhor para usar como sua bolsa, e porque ela é muito, muito grande, muito grande, ela é grande o suficiente para compilar a largura e a altura da nossa seção. Assim, apenas como um lembrete, certifique-se sempre de que suas imagens de fundo, a imagem real em si, são grandes o suficiente para ocupar toda a largura e altura fora do continente. Você pretende colocá-los assim. Eles nunca serão esticados assim. Haverá sempre exibido de forma tão limpa quanto possível. Isso é tudo para imagens de fundo. Vejo você no próximo vídeo. 32. Propriedade de exibição: Agora vamos falar sobre uma determinada propriedade, que você acharia muito útil, e essa será a propriedade de exibição Now. Nós realmente discutimos sobre isso um pouco brevemente quando estamos falando sobre HTML e especificamente as diferenças entre os elementos de linha e elementos de nível de bloco. Agora, assim como elementos de nível de bloco de atualização são sua cabeça em uma igreja ganhou desculpa suas tags P , suas Debs e eles normalmente ficam sozinhos em uma linha eles não ficam ou sentam lado a lado uma linha. Elementos podem ficar lado a lado, e isso tende a ser o seu hiperlink, etiquetas de taxiway, imagens e assim por diante. Agora, com a propriedade display, você pode realmente alterar a forma como elementos de nível de bloco são exibidos, e você também pode alterar a forma em elementos de linha todos exibidos como um exemplo. Aqui temos o nosso H um, que diz que está recebendo celebridades CSS. E então temos hte para que diz que este é o seu guia agora por padrão, claro, eles estão agora em linhas separadas, como você pode ver. Mas se eu voltar ao meu estilo que CSS e eu disse, eu vou adicionar uma nova declaração e dizer h um h dois Vamos abrir. Nosso colega Brace é agora a propriedade fora de exibição. Vou dar-lhe um valor fora da linha. Tudo bem, isso é seguro. Vá até o navegador, atualize. E agora você pode ver que o H um e H para anunciar ficar lado a lado. Podemos fazer algo oposto com as imagens aqui embaixo, você pode ver que as imagens dois e três estão lado a lado. Se darmos a eles uma propriedade diferente fora do bloco, então eles estarão em sua própria linha separada. Então é assim que as pessoas são. Mas funciona, mas na verdade é outro valor, o qual quero que falemos. E lá vai ser chamado de valor de bloco em linha. Como exatamente isso funciona? Você vê, por padrão, você não pode adicionar uma altura ou com ao elemento de linha ou a um elemento de nível de bloco Você não pode. Mas se você dar-lhes um display off no bloco de linha, você será então capaz de fornecer-lhes um conjunto com Vamos fazer isso. Vou remover a nossa declaração que fica na linha para H um h dois. Vou descer aqui e dizer “imagem”. Tudo bem, então eu entro em três imagens no documento original. Eu vou entrar aqui e dizer “display”. Agora veja isso. Eu vou dizer em bloco de linha, tudo bem. E agora eu vou dizer você com 33 por cento de desconto. Então, basicamente, eu estou dizendo tudo bem, cada imagem em nosso documento HTML exibi-los como um bloco em linha e, em seguida, dar-lhes um com off 33%. Estes que 33% simplesmente significa que o isso é em relação ao seu recipiente. Neste caso agora, se você vier aqui, você notaria que as três imagens estão dentro de uma morte com um i d off azul. Então, basicamente, a primeira imagem ocupará 1/3 da largura de todo o recipiente Deve. Em seguida, uma segunda linha da terceira e, em seguida, a última ocupará 1/3 também. Isso é o que isso simplesmente significa. Vamos em frente. Documento seguro. Vamos até aqui agora e ver o que vai acontecer agora. Note que a primeira imagem, claro, é muito, muito grande. Vamos ver o que acontece. Eu vou atualizar, e agora você pode ver de repente as três imagens e agora lado a lado, porque nós demos a eles um conjunto com 33% de desconto. Mas antes que pudéssemos dar-lhes o seu com um 33% tivemos que defini-los ou eu dou-lhes o valor de exibição fora no bloco de linha. Então, este é o lugar onde em Lyon Block será favor útil quando você quiser definir ou fornecer uma altura, ou com um elemento de nível sanguíneo ou uma companhia aérea elementos que você deseja dar-lhes para exibir valor fora Inglaterra bloco primeiro. Agora há mais uma propriedade ou valor outro, qual é o valor desligado? Nenhuma basicamente. Então qualquer sim, e você sabe o que não exibir o elemento. Então, se eles salvarem isso, vamos voltar a procurar estão vindo aqui. Refresque. Bem, lá vai você. Não há mais imagens agora. A questão, claro, é quando você usaria esse tipo de valor para exibição? Isso normalmente é muito popular com telas responsivas. Menu projetando seu site para ficar bem em um dispositivo móvel. Existem certos elementos ou conteúdo, como talvez animações, controles deslizantes que não ficarão tão bons em um telefone celular. Então você poderia dizer isso especificamente. Ei, se alguém estiver vendo este site em um celular, não exiba essa luz. Eu não exibi essa imagem ou algo assim. Então é aí que você pode usar o valor fora. Nenhuma para a propriedade fora desta peça. Deixe-me ir em frente. Nós movemos isso Ouça de volta para exibir em bloco de linha, garoto. Então é isso. Muito obrigado por assistir. Vemo-nos na próxima aula. 33. Paddings e ordens: Bem-vinda de volta. Agora vamos falar sobre outro conjunto de propriedades que são muito, muito importantes. E estamos falando de margens, padrões e fronteiras, e estes são muito vitais para o modo como o seu conteúdo é. Isto tocou. Mas o que exatamente são esses três? O que está na margem? O que é estofamento? O que é uma fronteira? Bem, para demonstrar isso, vamos fazer algumas coisas. Primeiro de tudo, pensamos documento html. Vou em frente e remover estas ideias do azul para o Dave que contém as nossas imagens. E aqui em baixo, o primeiro Pitak no Dia das Mães. Eu vou dar uma chance, e eu d me desculpe, um i d de ah, digamos laranja. Está bem. E o próximo imediato ser tag, eu vou dar-lhe um i d de, digamos, cinza. Ok, vamos salvar ir para um estilo que CSS Agora confira isso. Ok, eu vou dar o primeiro 1 que é laranja. É um P todo interessado em um aparelho Kelly muito específico se abrir. Vamos dar-lhe uma cor de fundo laranja, obviamente, e então vamos dar-lhe um com de, digamos, 475 pixels e então eu vou dar-lhe uma altura de 100 pixels. Tudo bem, vou em frente e vou copiar tudo. E então eu vou colar, e então eu vou simplesmente mudar o i d off laranja aqui para cinza. E depois, claro, Jenny está a falar de Coca-Cola aqui de laranja a Glee também. Vamos salvar. Vá para o nosso Boza, atualize a página e vamos ver o que temos. E lá vai você. Tudo bem, ambos pretexto. Com isso de volta em Kahlo e com altura de 100 pixels com todos os 475 pixels Agora você pode notar que o texto está bem na borda fora de seu recipiente. Olhe para a esquerda e ele vai olhar para a direita do AHL. INGE Pitak, você pode ver por que o D para o fim? É mesmo ao lado do tabuleiro. É mesmo ao lado da borda. Como criamos espaço antes de eu te mostrar como fazer isso? Vamos adicionar fronteiras, certo? Vou entrar aqui e dizer “fronteira”. Dois pixels. Vermelho sólido. O que exatamente eu não ouço ter adicionado uma borda em torno da tag P e eu disse, fazê-lo espesso fora dois pixels. Então, para escolher dois pixels representa a espessura fora da borda. Sollied significa o tipo de corpo porque você pode ter sólido, você pode ter uma filha tracejada e assim por diante, e então vermelho representa a cor fora da borda. Eu vou em frente e salvar. Volte aqui. Estamos frescos, e agora você pode ver a fronteira bem ali. Mas ainda assim, o texto está bem ao lado da fronteira e aqui, bem como o Texas, bem ao lado da borda do recipiente. Então, se quisermos criar algum espaço entre o texto e ele é comprado todos os contêineres, vamos precisar usar padrões que são padrões fora para criar espaço entre o conteúdo. Mas é uma imagem. Ah, texto ou qualquer tipo de elemento basicamente criar espaço entre esse elemento e sua borda ou recipiente. Então, se eu voltar para colchetes e eu digo para o primeiro P laranja, vamos entrar aqui e dizer, preenchendo 20 pixels. Certo, vamos economizar. Volte aqui para primeiro a página, e agora você pode ver que há muito mais espaço em torno de 20 pixels dos 10 pixels superiores em ambos os lados. O fundo. É irrelevante porque havia. Há sempre espaço entre o texto na parte inferior para começar, porque nós demos o recipiente de altura fora de 100 pixels se nós não fornecemos qualquer altura. Na verdade, vamos fazer isso. Vamos remover as alturas completamente. Então não há mais altura de 100 pixels aqui também. Não há mais altura de 100 pixels. Vamos salvar. Volte para as contas, atualize e agora você pode ver a diferença. A primeira tag p parece muito mais limpa e limpa porque há tapinhas enquanto a segunda parece muito, muito áspera porque não há nenhum preenchimento. Mas vamos mudar isso. Ok, eu vou voltar para colchetes e não para a segunda tag p, que é aquela com a idéia de ótimo. Eu vou entrar aqui e dizer, Padden, veja isso. Vou dizer 10 pixels e depois 20 pixels. Você notaria a diferença que no 1º 1 aqui nós demos padrão 20 pixels. Aqui estão 10 pixels. 0 10 pixels, não 10 x desculpe. 10 pixels e depois 20 pixels. A diferença aqui é que neste cenário é onde você tem duas Velas diferentes para o seu padrão. Os amigos Vela serão para o topo e para baixo. O segundo será para os lados esquerdo e largo. Então vamos salvar isso. Go Bachir Barrels são foram primeiro uma página e eles vão agora P Tech número dois tem 10 pixels da parte superior e inferior 20 pixels para a esquerda e luz. Há outra maneira de como você pode usar padrões brancos aqui. Você pode dar 1/3 de valor e esse cara está certo Agora vai ser 50 pixels. O que isso fará são 10 pixels no topo, 20 pixels para ambos os lados, 50 pixels do fundo seguro. Bons barris boxeadores são refrescados na página e lá vai você. Então agora o fundo tem 50 pixels, certo? Há até 1/4 caminho fora direito em nossos padrões. E como fornecendo 1/4 valor neste caso agora, eu vou dizer 100 pixels. Se você pode adivinhar o que isso significa aqui é que 10 pixels no topo 20 de divide ferozmente da parte inferior 100 da esquerda Salvar Volte para seus arcos para fora, atualizar e como você pode ver que a esquerda tem mais porque é 100 pixels e o outros padrões permanecem os mesmos. Então estas são as quatro maneiras diferentes de como você pode escrever desenvolve fora. Seu padrão pode dar um válido desenvolve três valores ou quatro valores. Ok, incrível, linda. Vimos o que as fronteiras são, de certa forma, padrões. E quanto às margens? O que é exatamente uma margem? As margens são usadas para criar espaço, uma distância entre um elemento em outro. É diferente das bordas que criam espaço entre um elemento e seu contêiner ou seus padrões de borda são mais internos. Margens são margens externas é agora ok, Natal entre um elemento em outro. Se eu entrar aqui muito tem P laranja e eu disse, Ma Jing, veja isso. Inferior 100 pixels. Eu vou salvar. Volte para Ambrose. Observe a distância entre o primeiro Pitak e o segundo aqui . Não está muito certo, mas se eu atualizar agora, você pode ver que é muito mais porque nós demos uma margem. Valor inferior de 100 pixels. Basicamente, temos dito de baixo para fora do pitak com a idéia. Laranja deu uma distância de 100 pixels para o próximo elemento, que acontece a ser a tag p com o i d off cinza, poderíamos criar esse mesmo efeito fazendo exatamente o oposto vindo aqui agora e dizer OK, ah p Cinza. Vamos dar-lhe uma margem dos 100 pixels mais seguros. Voltar para o Broza refere-se a página, e não há diferença porque nós simplesmente desistimos da mesma placa de exibição, alterando os valores da maneira oposta. Assim, incidentes que dada a margem P laranja inferior de 100 pixels com BNP grande imaginar o valor superior de 100 pixels, então você também pode margem larga esquerda. Por que você pode ter aqueles para aqueles terminados da mesma maneira. Você poderia até escrever padrões da mesma maneira. Então violência dizendo, batendo 10 pixels do topo, você pode dizer batendo no topo e depois 10 pixels. Esta é essencialmente uma forma abreviada de escrever Op Ed revela para todos os quatro lados. Se você quiser adicionar preenchimento para apenas um único lado, vamos lex para convidar. Diria que perdoe as luzes do traço. Certo, então tenha isso em mente. Mais uma coisa a mencionar antes de eu contornar isso é um padrão nunca pode ter valores negativos . É impossível. Marge é, por outro lado, pode ter valores negativos. Confira isso. Está bem. Vou voltar para a praça. Parece bom, certo? O tipo de ideia parece decente. Mas e se eu entrasse aqui agora e dissesse: Vamos remover a margem superior, mas não o vejo. 100 pixels. Certo, vou entrar aqui e dizer 25 pixels negativos. O que vai acontecer? Isso é seguro? Volte aqui, Refresh. E agora você pode ver que a segunda tag p essencialmente saltou para a primeira tag p aqui. Você pode ver isso, certo? Se eu voltar, vamos aumentar o valor aqui para 50 pixels. Vamos dobrar. Volte aqui. Refresque. E agora você pode ver que agora se levantou ainda mais então este é o efeito fora. Adicionando um valor negativo para suas margens. Há definido em situações em que você pode querer usar algo assim. Você pode geralmente envolvê-lo tentando disse talvez como um vídeo de fundo para recipiente, e ele percebeu que você também quer o saco em torno do nosso vídeo para ocupar outro recipiente também . Estes são os tipos de cenários onde você pode precisar usar como uma margem negativa. Não é muito comum, mas há usos para isso quando você começa a construir lados com CSS HTML. Você pode querer entrar em tradicional onde você pode precisar usar margens negativas, mas na maior parte, você não precisará usá-las como tal. Então eu sou apenas alterado este 50 pixels de volta para faz apenas salvar um vidro 50 pixels salvar. Volte agora, vamos refrescar-nos e lá vai você. Então isso é essencialmente para Mougins. Padrões e placa também, é claro, estar lidando com eles muito mais à medida que progredimos neste curso. Obrigado por assistir. Vejo-te na próxima aula 34. Modelo de caixa de CSS: Tudo bem antes de progredirmos no curso. Eu quero falar sobre o modelo de caixa CSS porque é importante que você entenda exatamente prêmio. Isto realmente é. Então. O modelo de caixa é usado para calcular a altura total e com muitas vezes elemento assim , como um exemplo , se você está indo para calcular o total com elemento forno, este seria o de como você teria o com, eles disseram, com dos elementos para começar. E então você terá mais o bloco esquerdo e o bloco branco na borda esquerda da borda branca, se houver. E então, é claro, a margem esquerda e depois a marcha direita. E esta será a fórmula para calcular o total com muitas vezes elemento na mesma maneira. Você pode calcular a altura total de um elemento em primeiro lugar, adicionando as alturas definidas e, em seguida, o padrão inferior Adam superior, borda inferior superior e, em seguida, margem superior e margem inferior. Esta seria a maneira de calcular a altura total de um elemento. Então é a fórmula em mente. Vamos tentar calcular que isso não funciona bem com e esconder as etiquetas R P. Então vamos começar com P laranja. Primeiro de olhar, vamos calcular o total com que não vive aqui vai ser o conjunto com primeiro de tudo , que é para 75 e, em seguida, notar que temos dois pixels de borda esquerda e branco off para pixel, modo que serão quatro pixels. Isto vai ser forçado nos cinco mais quatro e, em seguida, o pad de Internet pixels em todos os lados . Então, à esquerda esta noite terá um padrão fora para os pixels combinados. Então vai ser forçado a cinco mais quatro mais 40 o que deve te dar 519. Então é pouco com fora do Peter com a idéia de laranja é 519. Mas e a altura? Não há altura definida, então vamos apenas com uma patente, em primeiro lugar, primeiro lugar, mas você será para os pixels porque temos um animal de estimação em 20 do top 20 da parte inferior e, em seguida, outros quatro, porque nós temos tem dois pixels de borda de cima e de baixo, então vai ser 40 mais 4, o que daria 44 pixels de altura. E o segundo Peter Regulated com um “I d off”? Ótima. Você pode pausar este vídeo e tentar calcular o total com uma altura total fora deste elemento vídeo Composer agora. E eu vou ir em frente e resolver o Então e sobre o total com Primeiro de tudo, nós temos que definir com ou 475 E então aqui os padrões são escritos diferentes. Mas sabemos que o segundo valor aqui é para a direita. O terceiro valor aqui é para a esquerda. Não havia fronteiras. Isso é bom. Então nós vamos apenas ir com 4 75 mais 20 mais 100 que deve dar-lhe 585 para pouco com e, em seguida, para a altura total, não há tal altura. Mas sabemos que ele batendo aqui 10 pixels é do topo. O terceiro sujeito aqui é para os pixels de baixo. Assim que seis de pixels e imaginar topo. E em alguns dos pixels, o que lhe dá ah, 110 pixels de altura total. Isso é basicamente como calcular a altura total e com fora de um elemento usando o modelo de caixa CSS . Obrigado por assistir. Te vejo na próxima aula. 35. Propriedade de largura máxima: elástico sobre outra propriedade, que você acharia muito útil e essa propriedade vai ser o máximo com propriedade. O que exatamente é essa propriedade? Bem, geralmente é usado para criar designs responsivos do seu site. E o que exatamente é um design responsivo? Bem, design responsivo é quando seu site ficaria muito bom, independentemente do tamanho da tela. Então, se alguém está visualizando seu site em seu computador, seu tablet ou talvez até mesmo um telefone celular, seu site sempre ficará apresentável e limpo. Agora, o máximo com propriedade é muito vital para criar tal efeito. Agora, para demonstrar isso, vou voltar ao nosso documento HTML e vamos dar uma olhada no que temos aqui. Nós temos a seção Dave aqui com a idéia da seção Imagem. O que eu vou fazer é ir para começar no CSS, e eu realmente vou esconder toda essa definição. Então vamos entrar aqui e dizer exibição e vamos dizer, uh, uh, esta peça é definida como nenhuma. Tudo bem? Ok, vá em frente e salve. Agora há outra coisa que vamos fazer, e que é eu vou remover o set com para o P marcado com o Grande com a idéia de Grey. Vamos remover esse conjunto com Salvar. Agora vamos voltar para as nossas pérolas. Vou nos encaminhar para Page, e isso é exatamente o que temos. Agora mesmo. Você pode ver a diferença óbvia entre os dois elementos p. O 1º 1 tem um conjunto com 475 pixels. O 2º 1 não tem mais um conjunto com e, como resultado, sendo um elemento de nível de bloco porque é uma tag P. Não é ocupação brincar com a tela A, como você pode ver. Está bem, mas deixa-me dizer uma coisa agora, se fôssemos tornar este ecrã mais pequeno? Agora, neste ponto, você pode ver que tudo ainda parece muito bom. E se alguma vez vai reduzir o tamanho da tela, que é o tamanho da tela, você pode ver que até mesmo as imagens estão ficando menores. O texto está ficando é como quebrar em várias linhas. Neste ponto, você pode ver agora, isto é, ainda é responsivo. E uma maneira como você pode dizer quando uma página responsiva é quando você não vê nenhuma caixa escolar horizontal neste momento. Agora, bem aqui. Você também pode agora temos uma barra de rolagem Sempre que você vê isso, isso significa que o site não é responsivo. E isso acontece quando há conteúdo que é maior ou maior do que o tamanho da tela da moeda. E eu era como resultado, você agora tem um tipo de transbordamento. Agora eu vou fazer isso o mais pequeno possível possível e você pode ver Sim, nós definitivamente temos um pouco de um transbordamento em algum lugar. Agora, se eu começar de cima, você pode ver agora que o dia de com um fundo vermelho não parece estar transbordando , porque se eu me deslocar bem aqui, você não pode ver nada. Mas se um cubano escolaridade para baixo, tudo ainda está alinhado, um ainda alinhado. Mas agora você pode ver que a etiqueta P com a idéia de laranja é a que está causando o transbordamento . Você pode ver com esta parte particular aqui está fora do tamanho real da tela, e é aí que agora temos esse estouro. Mas se eu continuar a descer, vamos ter a certeza que é o único, para que possas ver que ali é o único. O fundo vermelho diferente final é responsivo. Mas é este grande Peter aqui. Isso não é responsivo. E a razão para isso é simplesmente porque nós demos a ele um conjunto com off 407 5 pixels. Mas é verde. tamanho da tela atualmente é provavelmente cerca de 400 pixels. Ok, então qual é a solução aqui? A solução é mudar o com para Max com segurança. Volte para ele. Mas eu estava lá. Atualize a página. E agora você pode ver que não há mais um fluxo excessivo. A página inteira agora está responsiva. Esta é a grande diferença entre com e Max com basicamente, com Max dizendo ok, nunca vá além desta partícula. Ah, com este conjunto particular com se você precisa fazer o com menor para que seja responsivo , então faça isso também. Isso é exatamente o que o máximo com propriedade é tudo sobre. Então é isso. Antes de ir, , vou dizer algo rápido e vai ser como uma pergunta, na verdade. E se quiséssemos centralizar a tag RP aqui? Os elementos P queriam centralizar. Faça colocá-lo bem ali no centro da nossa tela. Como você faria isso? Não podemos usar têxteis. E porque os proprietários de terras do Texas caminham com texto real. Mas estamos lidando com um elemento basicamente aqui para centralizar isso. O que você quer fazer é ir para o elemento. Neste caso agora, é o P laranja. O que eu vou fazer é dizer margem e depois zero e um auto. Certo, vamos em segurança. Volte aqui. Bem, primeiro a página, e agora você pode ver que Ah, elemento laranja está agora bem ali no centro perguntando. Então este é um dos truques CSS que você precisa estar ciente fora. Basicamente, para centralizar qualquer elemento de nível de bloco, você precisa dar-lhe um conjunto com e, em seguida, disse as margens para zero e auto, assim como fizemos aqui. Nós damos-lhe um conjunto com Agora, você também pode fazer o irregular com e fazer margem zero auto. Ele também irá centralizar o elemento de nível de bloco. Mas lembre-se, não vai ser responsivo, mas você faz isso no máximo. E então você diz Jim margens a zero. Um auto que irá centralizar automaticamente seus elementos de nível de bloco. Então é isso que acontece com os Maxwells. Mas o que você acha? Uma fortuna. Vemo-nos na próxima aula. 36. A propriedade de posição: Vamos olhar sobre uma propriedade final, e esta vai ser a propriedade posição agora. Como você já deve ter adivinhado a partir do nome, ele é basicamente usado para definir a posição fora no elemento em nossa página da Web. Agora, por padrão, sempre que você criar conteúdo com HTML e você usa deixa de estilizá-lo navegar também, Vanda tal conteúdo. Naturalmente, você pode ver agora que o conteúdo vai da esquerda para a direita, os elementos presos uns sobre os outros e assim por diante, e até aqui com a tag P com a idéia de laranja estavam no vídeo anterior. Definimos o valor aqui para o centro exato, usando margens. Seu auto, Todos estes são naturais por. Mas e se quiséssemos? Digamos, por exemplo, deslocar a posição desta etiqueta P aqui, um pouco mais para a luz, ou talvez um pouco mais para o topo. Como você faria isso? Este é o lugar onde a propriedade fora de posição entra em jogo. Agora, por padrão, temos um valor fora da estática para cada elemento. Então, se eu entrei aqui agora e disse posição e então eu disse, Ah, estático isso aqui é eu sinto muito. Posição. Isso é um erro de ortografia. Tudo bem, então se eu entrasse e dissesse posição estática, isso realmente não faz nada porque todos os elementos têm uma posição estática por padrão, certo? Mas e se eu entrasse aqui agora e dissesse que vou mudar isso? Não. Muito raramente conseguir. E eu vou dar um valor fora dos 400 pixels top. Agora, preste muita atenção. O que é esse valor relativo para a posição? O que isso faz é que fique. Considere a posição natural fora deste elemento. Primeiro, use sua posição como um tio e, em seguida, a partir dessa posição, mude sua posição por quaisquer valores substituídos por talvez uma escola superior esquerda, luz ou inferior. Então aqui, nós dissemos do topo agora 400 pixels. Certo. Vamos ver esse efeito em ação. Vou até os poderes, prestar muita atenção à posição natural deste elemento agora. Como se essa fosse a posição natural no centro. Se eu atualizar, você pode ver agora que ele caiu para baixo em 400 pixels de sua posição natural. É assim que o relativo funciona. Então você pode estar pensando em si mesmo. Espere um minuto. Não dissemos que era suposto ser do topo? Sim, você pode estar pensando porque estamos no topo aqui. É suposto aumentar o conteúdo para cima, certo? Bono é o oposto. É assim que funciona. Se eu entrasse aqui agora e dissesse, Ok, vamos fazer 200 pixels à esquerda, você pode pensar, OK, isso vai mudar. A tag pico vai mudar seu conteúdo para a esquerda, mas sob pixel, mas na verdade vai ser para a direita. Vamos em frente e em segurança. Volte para os rebeldes agora, refresque-se. E agora você pode ver que ele está pulando agora para o branco por mais 200 pixels. É exatamente assim que o valor do parente funciona. E assim como com a parte superior e esquerda, você também pode Advil útil direita e inferior também. Basta ter em mente que os valores aqui tendem a agir na direção oposta, por isso, se você der um válido para a parte inferior, ele irá enviar o conteúdo para cima. Você dá seu valor para a direita, ele mudará o conteúdo para a esquerda. É exatamente assim que funciona. Ok, incrível. Vou em frente agora e remover isso. Certo, vamos economizar. Deixou sobre o segundo valor para a nossa posição. Propriedade. E esse será o valor da AB. Então, Lute, vamos passar para o nosso índice de arquivo HTML. Agora, preste muita atenção aqui, certo? Temos uma div, e em vez disso ao vivo, temos a tag H dois b. Também temos uma pizza com a turma fora do centro. Caso eu não tenha mencionado isso ainda. Todos estes elementos são basicamente crianças fora destes Div. Este Dave que ocupa tudo está lá é essencialmente o ancestral ou o pai fora cada elemento dentro daqui. Agora, isso é importante para entender porque nós vamos estar falando sobre a posição absoluta agora. A posição absoluta ignora essencialmente a posição natural fora do elemento em como, relativo que diz, OK, a partir da posição, a posição natural desses elementos, vamos agora mudá-lo por social. Então e assim com absoluto, ele não considera a posição natural tudo para o elemento. Em vez disso, vai admitir que a posição fora do imediato e sentido arrancou esse elemento. E se não houver nenhum ancestral imediato fora desse elemento. Ele simplesmente usará a porta de visualização como um tornozelo. Do que estou falando? Vamos entrar aqui. Apenas vá para as starups. CSS. E eu vou mirar nesta classe bem aqui, fora do centro. Ok. O pico último centro de vídeo. Vamos alvejar. Eu vou entrar aqui agora e dizer posição, posição? Absoluto. E eu vou dizer top off. Digamos que 20 pixels vão para o Broza. Agora, este é o elemento do alvo, certo? Este é o texto aqui. Nunca vá em frente e atualize. Agora você pode ver que foi empurrado para cima bem aqui. Como é que isso aconteceu? Veja, a posição absoluta tem uma lei. Ele tem uma regra e eles vão essencialmente aqui é este Primeiro de tudo, ele vai dar uma olhada no elemento Nós aplicamos atualmente o valor off absoluto para a sua posição neste caso. Agora é a classe P fora do centro da luz. O que vai fazer é que ele vai dizer OK, o que é o ancestral imediato fora deste elemento particular neste caso agora é o Dev faz o direito aqui agora porque nós não demos isso, DIV um tal sujeito para a posição. Ele vai olhar para o próximo possível e sensato, que neste caso, se formos até o fim, vai ser esta tag de seção bem aqui porque este Dave está dentro desta seção. Ele irá verificar para esta seção para ver. Ok, e quanto a esta seção? Será que ele tem uma posição disse alimentos companheiros? Se isso não acontecer, ele vai dar uma olhada no próximo possível ancestral, que seria o corpo e eles finalmente. Mas ele não tem um melhor se o ancestral final não tem qualquer, disse cara para a posição. Ele vai simplesmente usar o View Port, que é o navegador, como é um Cole. É exatamente assim que funciona. Então, para demonstrar isso, vamos passar por cima dele e dizer OK para isso, Dave, Vamos usar este Dave, Como os pontos do tornozelo dirão, estilo Dev é igual e então vamos dar-lhe uma posição fora do parente. Tudo bem, vamos em frente agora e salvar agora se voltarmos para o navegador e atualizarmos agora, ele pulou aqui porque agora ele está usando seu Dave. É um ancestral imediato, que é um Dave como o ponto e carvão. Vamos tentar outra coisa. Vou pegar o que fizemos aqui. Este estilo. Vou cortar isso para que esse Dave não seja mais o ancestral imediato. Vamos fazer todo o ritmo de seção de opiáceos que vamos economizar. E se voltarmos para o navegador e atualizarmos agora, você pode ver que ele está aqui embaixo porque está usando cerca de. Está aqui porque agora está usando esta tag de seção como seu e carvão. É exatamente assim que funciona a posição absoluta. Ele ignora a posição natural fora do elemento ao qual o valor de absoluto foi aplicado. Mas é para olhar para o próximo um dedo do pé sentido para ver se há um disse Bella para ele? E se não houver nenhum, ele simplesmente usará a porta View como seu próprio tornozelo. É exatamente assim que a posição de saudação APP funciona agora. Para ser honesto, você provavelmente não pode encontrar muitos usos para o absoluto. Na verdade, ele tende a quebrar o layout de sites um pouco, mas ele tem seus usos, e vamos dar uma olhada naqueles Are It beat mais tarde? Mas, por enquanto, vou remover o valor porque não precisamos mais dele. Vamos salvar. Vamos sair para o índice do HTML e eu também removerei o estilo para a seção. Ok, isso é dar uma olhada no aviso, mais valor para a posição, e ele só vai agora ele vai ser o valor off fixo. Tudo bem, isso é muito, muito interessante. Um fixo, Essencialmente dizer que é isso. Ei, não importa o que aconteça, não mova a posição deste elemento. Mesmo se o usuário estiver navegando para baixo ou navegando em aeroportos. Mantenha esse elemento exatamente onde deveria estar. Como exemplo, vamos voltar aos nossos sinos, hein? Então, em sua mente, você pode ver como nós rolamos para baixo as escolas de conteúdo para cima essencialmente para a direita. Você pode ver que basicamente, como ele funciona. Mas vamos dizer hey, quer fazer força de edição rápida e JavaScript que você quer fazer isso sempre aparecer não vai fazer ele corrija que quando nós escola para baixo, ele não escola para cima. Vamos fazer isto. Eu vou rever o índice de HTML e é ah, aquele onde está? OK, é o que está aqui. Edição rápida para CSS e JavaScript, direita. Então vamos é eu vou apenas muito, muito rapidamente dar isso e eu d para que possamos usar o nosso início do CSS. Apenas comichão I d é igual e nós vamos dizer Fixo Não, certo, Vamos salvar ir estilo eleitor que CSS E então apenas ah, aqui em baixo. Vou dizer “consertado”. E eu vou dizer que a posição aqui é basicamente fixa. Ok, vamos salvar Voltar para o navegador. Vamos atualizar a página. E agora você pode ver que ele está bem aqui em todos os momentos, mesmo que seu objetivo suba sua escola para baixo, ele sempre vai parecer tão essencialmente, que é pegajoso. Então, sempre que você vê esses menus de navegação, o topo de sites que são sempre dia, mesmo quando você escola lá em baixo basicamente usando esses valores bem aqui fora fixo para a posição fora dos elementos navegacionais deste é um dos os melhores usos para este valor específico. Você pode usá-lo para definir menus pegajosos na parte superior do seu navegador e fora do curso. Se você queria colocar esta idade para retomar no topo ou apenas vir aqui e dizer top off zero, mas é semi cólon, vamos salvar voltar para um navegador. E agora, se nos refrescarmos, será sempre no topo, bem aqui. Não importa o que aconteça, e use ir para baixo. Vai estar sempre no topo, não importa o que você faça. Além disso, isso ignoraria set em têxtil, mentindo para o centro ou coisas assim. Então, por exemplo, se viéssemos aqui e dissemos “Ok”, vamos fazer esse texto nessa linha. Ah, centro de salvamento. Volte aqui. Refresque. Você pode ver agora que ele não vai para o centro. Ainda está no local exato ali. Então, se você quiser empurrar isso para o centro, este é o lugar onde você não precisa usar. Tende, como vir aqui e dizer esquerda, digamos que talvez 400 pixels. E, na verdade, vamos. Mais para 700 pixels, suponho. Então salvamos aquele colecionador Broza fresco. Então agora é Sim, talvez sete era um B 200 mais como 600, mas agora é mais para o centro. Então é basicamente assim que a válvula fixa funciona para a propriedade posição. Uma posição final para falar antes de voltarmos. Isto vai ser o valor fora pegajoso. Agora eu sei que acabamos de falar sobre a posição fixa e como ela é usada para colar menus, mas na verdade, o valor fora do pegajoso é realmente um pouco mais útil. E é um pouco melhor de usar do que a posição fixa. Do que estou falando agora? Você pode ver que a edição rápida CSS completo e JavaScript. Está sempre consertado. Nunca se move. Ele nunca escola. Ele nunca escola para baixo. Certo? Se você voltar para nos ajudar a arquivar, o que eu vou fazer é eu vou mudar fixo aqui muito pegajoso. E vamos remover a esquerda. 700 pixels. Vamos salvar. Voltem para os sinos agora. Se eu me refere a página agora, você pode ver o texto aqui. Desde a posição natural normal. Certo. E à medida que começamos a escola para baixo aviso, ele também está escolhendo. Normalmente, nada aconteceu até agora. Mas à medida que continuamos estudando, o casal está chamando para baixo agora você pode ver que ele chegou. Eu sinto muito. Agora você pode ver aqui. Chegou ao topo da porta de visualização. Esse é o tipo de irmãos agora se eu continuar rolando para baixo aviso. Não é mais escola em todo o conteúdo. Benefit agora vai começar a escola em cima, escolhendo acima, escolhendo acima em azul-petróleo para chegar a este ponto onde agora também escolas acima, mas em um certo intervalo aqui ele não rolar para cima. Agora por que, isso é porque há uma restrição com elemento pegajoso. Basicamente, um elemento continuará a ser pegajoso, desde que seu pai seja visível na porta de exibição. Se voltarmos ao nosso índice dot html e viermos aqui, o pai aqui é esse Dev em particular. Então, enquanto pudermos ver o conteúdo de todo esse Dev, o elemento aqui, que deixa a pessoa desligada grudenta, continuará a ficar no topo do navegador. É assim que funciona. Então, para demonstrar isso melhor, vamos fazer isso. Ok, eu vou remover estes I d. Aqui. Vou levá-lo até o topo aqui? E, na verdade, vamos fazer isso. Eu vou criar uma nova tag aqui e chamar isso. Vamos chamar isso de outra tag Hone. Vamos dar-lhe o ideal fixo, e vamos apenas dizer, uh, uh, eu sou pegajoso, você sabe, como cada um. Ok, eu vou ir em frente e remover estes h uma etiqueta aqui mesmo porque nós não queremos ter mais de um h uma etiqueta em uma página. Salve isso. Volte para um Boza. Vamos vir aqui. Atualize a página. Tudo bem. Você pode ver que eu estou pegajoso no topo bem aqui. E isso é o que se chama lá em baixo começa a estudar. Mas agora ele vai estar para sempre no topo porque é pais é essencialmente a tag corpo que basicamente ocupa, que é basicamente o pai fora de todo o conteúdo na página da Web. Vamos demonstrar um pouco mais. Eu vou voltar para o fixo aqui e eu vou dizer, Ma Jin top off, digamos 100 pixels, direito que salvar isso, voltar para a pesquisa para cima, Vamos atualizar e OK, então você pode ver agora esta é a posição repentina porque nós demos Imagine de 100 pixels no topo Agora, cada escola para baixo, você pode ver que está esfriando. Está chamando até que agora o levante, e então sempre estará lá em cima. Então, na realidade, se você quiser criar um menu pegajoso, usando a posição off pegajoso pode realmente ser melhor do que usar isso off fixo. Então eu sei que este tem sido um vídeo muito longo, mas espero que você agora tenha aprendido os diferentes valores para sua posição. Propriedade relativa, figos absolutos. E, claro, pegajoso. Muito obrigado por assistir o vídeo. Vejo-te na próxima aula. 37. Propriedade de Z: Vamos dar uma olhada em uma propriedade final. Eu sei. Eu disse no vídeo anterior que a posição seria a última propriedade, mas prometo que esta será a última propriedade sobre a qual falaremos. E esta vai ser a propriedade Z Index. Bastante útil. Agora, para explicar o que esta propriedade em particular faz. Eu fiz ah algumas pequenas alterações em nosso documento HTML. Basicamente, o que eu fiz aqui foi dar a posição P laranja tag de absolutos e, em seguida, posicionar top menos quatro pixels e, em seguida, a grande tag P. Dei-lhe posição absoluta e, em seguida, posição superior menos 10 pixels. Mas então eu também fiz o Dave bem aqui que os detém. Eu dou-lhe a posição de parente para que eles usem este Dave em particular como seus pontos de tornozelo. E, claro, este é o resultado aqui. Você pode ver agora que o segundo dia de com o i d off cinza está sobrepondo a primeira tag API com o i d off orange. Este é o lugar onde a propriedade de índice Z entra em jogo. E se quiséssemos que o Pitak laranja realmente fosse exibido primeiro e, em seguida, exibirá a tag P cinza atrás dele. Quem usaria isso? O índice para este tipo de situação. Então o veludo padrão cai, o índice é zero. Então tudo o que você precisa fazer neste caso agora para empurrar o Pitak Ford laranja seria basicamente vir aqui e então ir para o P no motor e dar-lhe um índice Z de qualquer coisa acima de zero. Então podemos apenas dizer querer, por exemplo, vamos em frente, salve isso. Volte aqui, atualize a página. E agora você pode ver que o elemento P com a idéia de laranja está agora na frente. Este é o uso fora do Índice Z. Da mesma forma, poderíamos voltar aqui e dizer, OK, bem, vamos dar ah tag cinza agora mesmo. O índice está fora de quatro? Não, eu salvo. E como você já deve adivinhar, ele vai voltar na frente da pizza com o eu d off. Sempre. Isso é basicamente o que usamos Dizzy index 4. Obrigado por assistir. Vejo-te na próxima aula 38. Especificidade de CSS: uma rodada desta seção sobre CSS. Vamos falar sobre CSS Spacey C T. Agora este é um conceito extremamente importante de CSS, e é um que você deve estar familiarizado porque, como eu disse, é muito, muito importante. Então, o que exatamente é especificidade? Bem, digamos, por exemplo, havia duas ou mais regras CSS conflitantes que apontavam exatamente o mesmo elemento. Seu irmão, neste caso, seguirá algumas regras para determinar qual delas é mais específica e, portanto, será aplicada aos elementos. Agora pense na especificidade como uma escola ou um posto. Eles vão determinar qual declaração de estilo é finalmente aplicada a um elemento. Agora, só para que você saiba, especificidade, especificidade geralmente é uma das razões pelas quais algumas de suas regras CSS não se aplicam a certos elementos. Mesmo quando você acha que eles disparam, geralmente é porque há outra regra lá fora que é um pouco mais específica do que aquela com quem você está caminhando. Então, o que exatamente é essa especificidade, hierarquia? Todas estas regras bem, existem basicamente quatro categorias que irão definir o nível de especificidade fora de um seletor . Você tem os estilos de linha, que, claro, nós bifurcados com ele é basicamente aquele em que você aplica um estilo diretamente a um elemento, geralmente em documento HTML. Em seguida, você tem as idéias com, claro, o símbolo de hash tag. Então você tem suas classes, atributos e classes de cedro. Falamos sobre classes e atributos. As aulas falarão sobre isso mais tarde. E finalmente, no nível quatro, você tem seus elementos e seus pseudo elementos, que, claro, não estamos falando. Ainda assim, os elementos falarão sobre isso um pouco mais tarde. Estas são as quatro categorias principais com a linha vende os quatro mais poderosos por DS e classes e , em seguida, seus elementos. Então, como exatamente você calcularia essa especificidade? Bem, vamos dar uma olhada em alguns exemplos aqui. Agora temos a sua regula cada etiqueta só por conta própria, mas a próxima você tem a classe H, e depois a seguir você tem o I.D I.D mas a próxima você tem a classe H, e depois a seguir você tem o I.D . One também. E então, finalmente, você tem o estilo em linha cheio do H. Todos eles têm cores diferentes se aplicam a eles, mas, em última análise, é a Opção D, que tem o Ellen Stallion disse ao vento para fora porque, bem, é o mais poderoso agora, se tivéssemos apenas três opções com os elementos a I D e classe. Bem, é a identificação identificação neste caso que ganharia porque as ideias são mais específicas. Eles são mais poderosos do que as aulas. E então, finalmente, é claro, se você tivesse apenas duas opções entre o elemento e na classe, a classe ganharia. Porque a turma é mais específica. É mais poderoso do que apenas o elemento de pé sozinho. Agora, em uma ocorrência rara em que a mesma regra é escrita duas vezes em um estilo externo, então geralmente é a regra Lowell que será aplicada. Então, neste caso, por exemplo, se você tivesse duas cores de fundo diferentes para o mesmo elemento exato neste caso agora o amarelo é aplicado primeiro e depois lido, que é o segundo, será o que será finalmente aplicado porque é menor do que a Declaração Amarela na folha de estilo. Vamos agora dar uma olhada na especificidade CSS em ação. Usando alguns exemplos de vida e nós vamos fazer é nós vamos atingir esta estrutura bem aqui. A bomba com a etiqueta do corpo até aqui. Então basicamente temos o elemento corpo, que é o elemento mais externo. Nós vamos ter a seção, a próxima, a carne, é ah, elemento interno. E, em seguida, dentro desta seção sem ter Dev e, em seguida, em vez do dia, se temos o Pitak aqui e então você pode ver também tem o imposto m de um bem que vamos ser alvo do ataque porque é o elemento mais interno será usando isso como uma cobaia . Neste experimento, deixe-me, primeiro lugar, ir em frente e remover estes h um porque não precisamos mais dele. Vamos salvar. Eu vou passar para o meu estilo que CSS e eu também vou remover a cor de fundo para este Dev particular com a classe de vermelho. Está bem aqui, por isso vou remover isto. Vamos remover esse fundo. O Kahlo. Vamos salvar. Volte, Teoh Broza E tudo bem, então parece bom como deve encontrar. Não vamos voltar para colchetes, e o primeiro que vou fazer é dar ao corpo tag o elemento corpo. Vamos dar-lhe uma cor, e vai ser o meu favorito de todos os tempos. cadela da Kahlo está pagando. Eu estou brincando. Essa não é a minha cor favorita. Vamos voltar, Teoh. Como é que isso? Atualize a página e tudo bem, então rosa assumiu. OK, vamos voltar. E agora o que vou fazer aqui é isto. Certo, vamos dar esta seção. Vamos dar uma aula de, digamos, seção oito, ok? E então, enquanto estamos nisso, vamos também descer aqui e dar a essa classe de elemento p, digamos, classe, classe, não um exército de classes. Vamos dar uma aula de folga. Você sabe, Dash P, nós também vamos dar em I d Oh, fora Dash P. Eu não sou tão criativo com minhas idéias e aulas, mas hey, que seja. Vamos apenas fazer isso. Vamos apenas seguir em frente. Vou salvar isso. Vamos voltar para a Estella. CSS. O que vou fazer agora é dar aula de seção oito. Era a seção oito? Estou confirmando que foi a seção dele. Está bem, só estou a certificar-me de que não estou a enlouquecer. Auxílios de seção. E então vamos dar a isto uma cor de Aquaman. Tudo bem, Akwa seguro. Volte para o navegador. Ah, atualize a página. Akwa assumiu o controle. Ok, tudo bem. Nós sabemos tudo isso. Ok, vamos continuar. Este está acontecendo bem aqui. Só para que saibam, a classe obviamente é mais poderosa do que os elementos normais, então a classe ficará mais perplexa e sangrenta Nós já falamos sobre isso, mas vamos voltar ao índice de cada dia de correio. A menos que haja algo mais nele. Temos como alvo esta classe, certo? Seção oito. Nós vamos adicionar uma cor para o Dave agora, que também tem uma classe de vermelho e também vai dar a estes classe P aqui outra cor diferente também. Então vamos fazer isso. Eu vou entrar aqui agora, e eu vou dizer OK para Red. Já tenho a colecção aqui. Vamos dar-lhe a sua própria cor vermelha, mas depois vê isto. Eu vou entrar aqui agora, e eu vou dizer, qual é a classe P de novo? Não é P. Então eu vou entrar aqui agora e ver em um painel. P tem sua própria cor fora e vamos com Ah, vamos ver, qual deles vamos? Vamos com o coral. Tudo bem, isso é seguro. Ok, então agora quem vai ganhar este concurso? Porque estamos lidando com aulas. Agora temos dado seção oitos sua própria cor. Demos à classe vermelha o seu próprio Qala. Também demos à classe NRP seu próprio chamador também. Então, qual deles vai ganhar? Vamos voltar para nossos arcos para fora prefere a página e agora você pode ver que vai ser ondulado. Essencialmente, isso tem um. Mas a cor onde também ganhou de certa forma. Por que, se voltarmos ao nosso documento, dê uma olhada nisso. Mesmo que este Dave contém esta classe P aqui em um p e nós demos esta cor de em um pedaço de coral por, nós demos este Dave aqui mesmo de vermelho porque a classe P aqui está mais perto destes m tag bem aqui com o texto. Vai aplicar-se ao M. O M vai ter a chamada do coral. Se voltarmos para um navegador aqui, você pode ver que os colchetes são um tipo diferente dele. Tem a cor coral porque está dentro. Está dentro de um elemento p que tem uma classe fora em um P. Então, mesmo que o Dave aqui mesmo que também de certa forma detém estes tag m. Mesmo que tivesse o seu tio de Red, o M iria com os ancestrais mais imediatos do nosso estilo. Neste caso agora, a Classe P tinha a chamada “P”. É por isso que o “ M” foi com ele. Mas vamos fazer uma pequena reviravolta aqui. Vamos voltar ao estilo que CSS esta mesma classe P exatamente aqui que tem um fim de uma API que vamos dar seu próprio I d uma cor diferente. Está fora. R p Eu vou copiar isso. Vamos voltar aqui. Pace isso. Vamos nos trocar. Apareça agora também. Fora p E depois para a cor. Vamos ver. Mas vamos com o Blue. Seguro simples. Volte aqui para Broza. Atualize a página. Oh, espere um minuto. Oh, eu acho que pode ser cometido um erro e Oh, sim, claro. Nós cometemos um erro. Sim, eu não mudei a aula para um “I d”. Eu sou tão idiota. Perdoe-me. Tudo bem, para o Pete. Isso é o que eu disse. Voltar para o Broza. Estamos frescos e agora lá vai você. A cor agora mudou para azul porque lembre-se que as idéias são mais específicas do que as classes. Mas ainda não terminamos. Vamos voltar ao índice de HTML e sair para o M aqui. Vamos dar-lhe o seu próprio estilo, igual a chamador. E vamos com ah, Azzurri. E eu tenho certeza que agora você já sabe qual será o resultado fora do curso aqui. Você pode ver que esta é agora a cor Azzurri em ação porque nós demos. E no estilo de linha, que é, é claro, o mais poderoso é o fechamento que você pode dar a um elemento particular. Então é isso para CSS. Especificidade estará andando com isso muito mais na próxima seção. Mas é isso. Muito obrigado por assistir. Vejo-te na próxima secção. 39. Pré-visualização de seção de projetos: Tudo bem. Chegou a hora, e eu espero que você esteja pronto, porque juntos vamos construir nós mesmos este site de página quente completo chamado Web Impact. Agora, onde está o impacto, uma empresa de negócios fictícia construiu o seu negócio. Eles são especializados em serviços da Web. Serviços de Internet. Basicamente, a oferta. Coisas como serviços de segurança cibernética. Web design. Que aplicativo devoto homem? Instância de aplicativo como essa. Então este aqui, Pedro Upside é tudo sobre promover a empresa e descrever o que a empresa é tudo sobre. Então, como você pode ver na cabeça de nós temos, ah, logotipo, temos ah Mei menu de navegação. Nós também temos esta seção onde você descobriu, como a manchete principal, como a manchete principal,quem eles são. Você pode ver a imagem de fundo basicamente se mistura com o fundo porque o logotipo e no menu de navegação estão no topo da imagem Baghlan. Então eu vou te mostrar como você pode conseguir isso. Você tem a idéia de dois botões, e cerca de uma Seção sete é fornecida seção também. Por que andar com esses mitos muito, muito importantes? A equipe Havia oito deles seção de depoimento uma seção de cliente, é claro. E, finalmente, um contato ou seção com um formulário. E, claro, haverá um rodapé com mais alguns links, mídias sociais e, claro, todos os direitos reservados texto. Então, como você pode ver, este é um completo. página estava chateada, mas não é apenas sobre o conteúdo e as seções nas colunas. Também vai haver alguma animação que você pode ver. Agora você vê este botão bem aqui para a luz. A maioria de todas essas seções têm este particular são trazidos nestas duas setas. Quando você clica nessa seta, ele leva você todo o caminho de volta ao topo, o que é útil, muito útil para sites de uma página, então eu vou te mostrar como você pode conseguir isso. O host logotipo também tem um pouco. Animação contra quando você paira sobre o círculo começa a girar são continuamente assim também essas outras pequenas habilidades adicionais que você pode aplicar para realmente fazer um site se destacar e torná-lo favor animado. Então, até agora, tudo bem. Você aprendeu sobre html até mesmo ver avaliar. Mas é outra coisa ser capaz de combinar ambos para construir um site completo. Então isso é exatamente o que você vai aprender nesta seção. Você vai em um pouco mais HTML E claro, você vai aprender muito mais. CS também é. Espero que você tão animado quanto eu estou, porque agora este é o negócio real agora, mas fica em um mal realmente, realmente dívida. Veja, estamos construindo algo real. Então sentem-se, relaxem e espero que gostem da seção. Vamos começar. 40. Faça o download da seção de projetos de arquivos: tudo bem assim sempre para começar o produto. Mas antes de o fazermos, preciso que descarregue alguns ficheiros. Você os encontrará na seção de proteção ou nos anexos deste vídeo, dependendo de onde estiver fazendo este curso. Mas você vai encontrar o seu de arquivos código final e proteger o kit Starter. Trabalharemos com os projetos. Tema isso. Primeiro de tudo, você encontrará um arquivo de índice. Aqui diz arquivo, que é o código que vai estudar, colocá-lo com. E então o código final é o código completo para todo o curso. Você pode usar isso como uma referência sempre que você ficar preso e, finalmente, há um guia de sistemas externos de crédito para você. Ele vai fornecer-lhe algumas dicas muito rápidas sobre CSS XML e também alguns links para alguns outros sites. Podemos aprender mais sobre HTML e CSS. Então eu espero que você ache este arquivo muito, muito útil. Então é isso. Vá em frente com os arquivos e te vejo no início do projeto. 41. O código para iniciantes: Então espero que você tenha sido capaz de extrair os documentos e os arquivos, e isso é o que você deve ficar com. Uma vez feito, você terá o arquivo html index dot, que é bem, como você pode ver agora, não há conteúdo ainda e o arquivo, Mas então, em sua pasta Ativos, você deve ter para todas as pastas que você terá o CSS e, em seguida, imagens. É bem simples aqui. Você teria o logotipo do seu ícone favorito. O herói, que será um saco na imagem, vai dar uma olhada e, em seguida, você terá imagens para os membros da sua equipe para os clientes também . E então, é claro, para as rodadas de saco, que serão usadas e, em seguida, para a pasta CSS levando aqui, você terá que arquivar o principal ponto CSS, que terá algum código já nele. Toda essa Cordy já está familiarizada com por que você tem a etiqueta do corpo? Você tem o fundo, tamanho da fonte da família, saco e cor e assim por diante. Eu tenho o ataque aqui para forte, que fará o texto negrito no peso frontal de 700 e, em seguida, para a cabeça como off editar alguns styling para H uns H dois h três e em para o parágrafo também adicionaram três propriedades para a diversão altura da linha tamanho e, em seguida, alguma margem. Então, é claro, medida que progredimos no curso, podemos estar fazendo alguns pequenos ajustes aqui e ali. Mas este é o frio que você deve ser deixado com para o principal ponto CSS e, em seguida, para o índice dot html, nós temos o código semelhante que você já viu antes. Cada língua humana, alguns ataques na cabeça também. Aqui temos o título será impacto construir sites incríveis e aqui temos ligado as duas folhas de estilo normalizado CSS, que eu vou falar em apenas um momento principal de CSS e, em seguida, também o ícone cinco. Você vai encontrá-lo aqui também. Esse é o ícone de cinco para o site e agora parece um olhar para o normalizado em CSS . Então, o que é isso? Basicamente é. Deixe-me descer aqui. O CSS normalizado é um arquivo escrito por um indivíduo particular que ama CSS. Mas o que ele faz é que eles arquivem homens para estabilizar a forma como seu conteúdo parece em todos os navegadores diferentes. Então a idéia aqui é que, por padrão, os diferentes tipos de navegadores Firefox, Internet, Explorer, chrome. Eles têm maneiras ligeiramente diferentes de interpretar conteúdo. Então, como exemplo, se você tentou exibir em um H uma tag com, Vamos Digamos Firefox, Firefox pode adicionar, gostaríamos de 0,5 pixels de margem para um H antes do komm, komm pode adicionar um apontar para estagiário Explore pode não adicionar margens e assim por diante e assim por diante. Então, basicamente, a idéia aqui é fazer seu quantum olhar exatamente o mesmo em todos os navegadores. Agora, se olharmos mais de perto o código em si. Mas, quero dizer, eu abri isto aqui, há muita coisa. Há um monte de cordas aqui, muitos visualmente familiarizados com, por exemplo, então aqui você pode ver que os comentários bem aqui, certo, por exemplo, como heavy say remove o margem em todos os poderes como assim. Como eu disse, alguns irmãos podem adicionar alguma margem adicional para definir tipos de tags. Então aqui nós dissemos que a margem é definida como zero para o corpo. O principal mostra que para bloquear uma onda aqui embaixo, você tem algumas propriedades adicionais e alguns valores. Então, basta rolar para baixo. Você começa a ver tudo. Os meus mortos do espaço modelo da família enchem as etiquetas do K.B . Sam e assim por diante. Você vem até aqui e vê outras informações. Não se preocupe. Eu sei que algumas dessas que você ainda não está familiarizado com, mas no final deste curso, você será capaz de entender exatamente o que todas essas propriedades são e o que os valores significam também. Então esse é praticamente o código com o qual vamos começar. Então, Alemanha, muito próximo vidro disponível agora começar a construir o cabeçalho para o nosso site. 42. A ferramenta de inspeção: Certo, antes de começarmos a seção do projeto, eu queria passar alguns minutos para apresentar a vocês uma ferramenta que usaremos nesta seção . E esta é uma ferramenta que você não pode prescindir como um desenvolvedor da Web. E vai haver a ferramenta de inspeção. Agora. O que você está olhando aqui é o produto acabado que terminou estava chateado, que nós vamos construir até o final desta seção. Mas não, é que quando eu clicar com o botão direito em qualquer lugar no site, você vai ver esta linha aqui frio Inspect. Agora deixe-me apontar que eu estou usando o navegador Brave, mas é praticamente o mesmo conceito em qualquer outro tipo de visualização do navegador. No Firefox, você está usando o Chrome usando o Safari Internet Explorer da Apple. É praticamente a mesma coisa. Você vai ver, inspecionar, inspecionar elementos ou inspecionar ferramenta qualquer um desses três. Quando eles clicam nele, é basicamente Oh, desculpe por isso. Eu não pretendia que isso acontecesse. Uh, ok. Você diz que é sempre estranho quando eles gravam coisas estranhas começam a acontecer. É como, Ah, você acha que isso navega. Eles têm uma mente própria. Eles sabem quando estou gravando e começam a se comportar mal de qualquer maneira. Então, o que aconteceu? Basicamente trouxe esta janela em particular. E aqui, isso é o que chamamos de ferramenta de inspeção. Ele nos permite dar uma olhada no código html na linha, bem como o código CSS que compõem o site. Então aqui à esquerda, temos o código externo aqui para a luz. Temos o código CSS. No entanto, se esta é a primeira vez que você está abrindo essa ferramenta, você pode descobrir que ela não está desanexada do navegador. Você pode ver o meu já é detalhes. Posso movê-lo. Então o que você quer fazer para separá-lo seria simplesmente um limão demais. Primeiro de tudo, nós anexamos de volta. Por isso, aqui em cima, tenho estes três botões. Vou encaixá-lo de volta ao fundo para que você possa achar que o seu é algo assim . Como você pode ver, ele não está mais separado, ele está conectado, ele está fixo na página. Então você quer procurar três botões no topo bem aqui. E isso depende do seu navegador. você pode dizer algo como se separar. Geralmente está dentro da primeira ou segunda opção. Então, o meu neste caso porque estou usando os poderes corajosos. Eu sou semelhante vai clicar no bloqueio aqui e agora é livre. Então, se você está usando bruto, você pode dizer algo como separar ou libertar-se ou algo assim. Tudo depende, mas geralmente é a primeira da segunda opção. Ok, então o meu foi anexado. E vamos dar uma olhada no que exatamente temos aqui. Como eu disse, Alia, aqui à esquerda, temos o código HTML à direita. Nós temos o código CSS, Mas observe que quando eu passar o mouse em torno dos elementos no lado HTML diferentes partes da minha página de ser destacado Isso é para dizer que Hey, onde você está agora. Mas você está se concentrando nesta área em particular notar que eu tenho minha boca agora sobre esta classe de marca, e você pode ver o que foi destaque cabeça o caminho do impacto eo logotipo não foi destacado. Isso deve te dizer isso. Ok, momento, este é o elemento segurando ou controlando que todo o site na cabeça longe, eu tenho o logotipo e o texto. Se eu rolar para baixo, para baixo. Se eu me mudei para a classe de homens Naff, de repente você pode ver que o menu fica destacado. Então, se eu quiser andar no menu, eu posso entrar aqui e então simplesmente abrir o menu e começar a entrar. Ele também vai notar que temos maçãs apontando dá para a direita que irá indicar que dentro deste elemento particular, existem outros elementos. É por isso que quando eu clicar no curso de marca clicando, seu aviso de que agora temos um DIV ou a classe de logotipo traço rap e, em seguida, também há um nome frio classe SPAN. Ambos também têm elementos suficientes para que eu possa clicar no fechamento do rap local clicando lá, e agora eu tenho uma tag A, mas eles ainda são um estreito. Eu cozinho no novamente, e aqui você pode ver que agora temos a imagem, um aviso que quando eu passar o mouse sobre a classe de imagem, ele pode ver o aspecto fora do logotipo. Isso não foi destacado especificamente o logotipo circular e notar que não há mais . Eu estava apenas nos dizendo que a imagem causa bem aqui esta é a enorme criança fora deste dia em particular. Se a mesma coisa se aplica à classe espanhola de nome, eu posso expandi-lo em vez de ter uma tática e gastá-lo novamente e convidar e dizer, nós temos a Espanha classes um para o texto da Web para um pouco a Web, quatro texto barra e em seguida, a ordem para o impacto. E aí está. Então o que eu vou fazer agora é basicamente expandir todos os elementos e aqui você pode ver isso é basicamente os grandes avós das grandes múmias desta página em particular que tivemos. E então temos corpo corpo corpo é a marca segura em tudo. Mas mesmo com essa nota que ambos ainda estão dentro do HTML a tag html todo-poderoso , a tag cabeça, basicamente ritual tomou um barco tem apenas os links para cinco ícones. Dois scripts e assim por diante falarão sobre isso mais tarde. Na verdade, é a tag body neste caso que contém todo o conteúdo de toda a página. E quando eu expandir a etiqueta do corpo, vocês podem ver que estes são como o tenente, o tenente David, as seções de tenente ou os generais de toda a seção principal. Então, temos cabeça erguida. Note, a propósito, que quando eu tenho em Hedda, parece que é a página inteira. Isso é Bean destacado, mas isso não é verdade. Se eu rolar para baixo aqui e eu voltar para a cabeça, eu notei que a cabeça para fora pára logo acima do texto branco de Bagram Bethea Potter que nos diz que Ok, esta é a área que a cabeça que uma etiqueta ocupa. Ele ocupa o saco, uma imagem de ver o logotipo e, em seguida, é claro, o menu. E então se eu começar a rolar para baixo aqui, membros chamados com os sinos para cima você pode ver que temos a seção sobre destacada. Temos o limite. Cerâmica. Isso pode ser um pouco menor. Ok, vamos descer ainda mais. Você pode ver que temos a seção sobre nós serve uma seção. Nós temos o ah, Por que nós seção bem aqui foi destacado. Como você pode ver, o mesmo acontece com a equipe. Você tem depoimentos e assim por diante. E assim por diante. Está bem, deixa-me tornar isto um pouco maior. Você também pode notar que quando passamos o mouse em torno de todas essas seções, você pode começar a ver diferentes tipos de cores, mais notavelmente o verde Kahlo. Vê esta cor verde aqui? No fundo, bem ali. Deixe-me usar drogas um pouco. Então você disse que esta cor verde ali mesmo que diz que é Padden Green neste caso indica uma patente. Também pode depender do seu navegador. Estou usando Brave it. Como eu disse. E com Brave Green significa nosso Padden. E se ele notar, é se eu clicar na seção I d. Deixe-me vir aqui. Vou desmarcar esta caixa de registro que permanece píxeis patenteados. Se eu não verificar isso, eu removo o padrão. Agora você pode ver que há um estofamento normal. Serviços Eman Eindhoven. A cor verde não existe mais. Então, mais uma vez , verde habitual representa Padden. E então, para a margem, você pode ter um tipo diferente fora de cor, que geralmente é talvez laranja. Então isso vai agora mesmo notas é que quando eu pairar sobre a morte, fechar o conteúdo, notas muito largas é que agora temos laranja na ciência esquerda nas luzes que significam que mostra monitor que mostra margens foram aplicado. Então, novamente, depende do seu navegador Laranja meus homens padronizando em suas próprias sobrancelhas sobre a minha. Neste caso, laranja é do nosso para as margens e em verde, que também pode ver idéia verde é ou os padrões. Vamos falar sobre os aspectos do CSS. Agora, aqui para a luz. Como eu disse, você tem as seções CSS. OK, então tudo depende de qual aspecto de qual área fora do seu site você decide inspecionar. Se eu vim aqui e eu clicar com o botão direito do mouse no botão de envio e eu vou inspecioná-lo, agora vemos que, de fato, a ferramenta nos levou direto para a área HTML onde o fundo foi para fora Coloque, você pode ver que está bem aqui. Você pode vê-lo. Pertence ao diff fechar fora campo traço carvão, e tem uma classe de botões de carne e em verde tem três classes diferentes. Mas curiosamente, olhe aqui para a esquerda, e eu tenho certeza para a direita e para a direita aqui você pode ver que o CS foi aplicado a esse fundo . Você pode ver que é aqui que temos o mensageiro. O Coehlo. Então eu vim aqui agora e eles clicaram no valor. E eu disse: “ Quer saber? Vou mudar para ler. Agora você pode ver de repente a cor mudou de verde para vermelho. Nota. No entanto, não fique muito animado. Essas mudanças eu quis dizer vida. Não é como quando você faz uma mudança aqui. Ele é salvo automaticamente. Não, isto está cheio. Nossa frente e testes basicamente viáveis. Atualize a página. A mudança voltará ao normal. Para voltar ao inicial são a cor de limão. O uso do inspetor é apenas para permitir que você veja suas mudanças de vida à medida que você aplicá-las, modo que, em vez de você ter que ir para o backhand, aplique seu código. Digamos, se você voltar para procurar cada fresco, você pode simplesmente aplicar essas alterações. Luta branca lá no get go e ver como eles se parecem da mesma forma que eu poderia mudar o tamanho do telefone, que é de 15 pixels agora. Eu poderia ir com algo maior. Isso é ouro maneira de 30 pixels no meu dia pode ver isso é como os pixels se parecem. No entanto, eu também quero que você também queria sua atenção para algo que alguns botões podem ter, como um efeito de pairar. Ou alguns alunos podem ter efeito de pairar. que significa que quando você paira sobre eles como eu estou fazendo agora, quando você paira e eles algo acontece, como você pode ver agora, quando eu pairo no fundo cada um e está em algum lugar para verde. Então, se você quiser verificar o CSS para tal, o que você vai precisar fazer é um pouco complicado um pouco. Mas não se preocupe. Vou te mostrar aqui, eu digo. Mas você tem o são basicamente a barra de ferramentas que você pode ver. Você tem o estado elementos de alternância Hoff de um clique lá. Neste momento, você pode ver os diferentes tipos de estados que a cannabis que pode ser aplicada ao fundo estamos procurando pairar direito? Então, se eu clicar em passar o mouse ali mesmo, observe que agora você tem o CSS foi aplicado quando nós ho sobre a parte inferior. Está tudo bem. Ele não pode ver, diz Button. Que enviar e, em seguida, dois-pontos pairar e você considera, no entanto efeito à direita que está sendo aplicado. Então a razão pela qual eu disse que é o meu truque de bebê é porque irmãos diferentes têm maneiras diferentes de desencadear os estados flutuantes. Mas todo mundo tem. Você vai encontrá-lo em algum lugar ao longo da barra de ferramentas. Então, limitadores ligados. Verifique isso de novo. E como eu disse, todo o ponto sobre os inspetores permitem que você dê uma olhada na estrutura html na linha de uma página e, em seguida, tentou aplicar mudanças CSS ao vivo. Então, de novo, vamos fazer mais uma. Se eu fosse para o digamos, deixe-me vir aqui para baixo Serviços Teoh noite, então temos serviço fornecido luz de seção aqui. Se eu ir a serviços todo o caminho até aqui e eu clicar lá agora você pode ver que serviços tem a idéia de serviços. Esta é a imagem de Baghlan sendo aplicada. Eu poderia optar por possuir marcar a caixa e você pode ver agora que não temos mais uma imagem de fundo foi aplicada porque não marcamos a caixa novamente. Você pode fazer mudanças na vida. Deixe-me colocar isso de volta. Deixe-me expandir a seção. Eu tenho uma classe de conteúdo. Ok, eu vou expandi-lo para o Eu tenho um serviço H dois fornecido. Então, se eu clicar na idade para marcar agora aqui à direita, você pode ver que tudo isso foi aplicado ao nosso H dois. Temos um telefone diz depois de dois pixels, um resgate de texto de maiúsculas e assim por diante. Então, novamente, eu posso vir aqui e dizer, OK, o peso frontal financiado. Vamos testar 800 em vez disso. Agora você pode ver o Texas muito mais ousado porque mudamos de 400 para 800. Você pode expandir a tag A aqui para este link. Você pode olhar mais de perto e ver como ele é construído, fazer mudanças de vida e assim por diante e assim por diante. Então essa é toda a idéia por trás de usar a ferramenta de inspeção em qualquer site. Agora, para encerrar isso, eu só queria lembrá-los que você pode aplicar a ferramenta de inspeção em qualquer site na Internet. Não importa se o site é para o FBI, CIA e Casa Branca M.I.6 . Seja qual for. Enquanto o site estiver ativo na Internet, você pode inspecionar esse site. Então eu fiz. Por exemplo, eu estou na web monkey academy dot com que eu posso decidir fazer é clique direito Clique aqui, clique em Inspecionar e, em seguida, começar a fazer Ah, apenas algumas mudanças divertidas, Certo? Então, como exemplo, eu poderia até clicar aqui onde você tem o HTML e eu poderia mudar o texto apenas por diversão e dizer Ah, e apenas dizer, Ei, pessoal, você sabe, Olhe para mim ou algo assim. Algo estranho, certo? Um “press enter”. E agora, de repente, o texano aqui diz: “Ei, pessoal, pessoal, olhem para mim. Apenas o ponto da China fazê-lo é que você pode você pode fazer qualquer coisa que você quiser fazer no site como nós se você é o único que realmente possuiu esse site para que você possa fazer alterações para o Kahlo, os tamanhos de telefone e assim por diante e assim por diante em frente e apenas ter um pouco de diversão. Mas nas notas mais sérias, se você quiser realmente dar uma olhada e ver a estrutura HTML ou talvez até mesmo o sexo tenha sido aplicado a um site, você pode fazê-lo com Inspector apenas para obter alguma inspiração ou apenas para obter uma idéia fora . Como algo que não faz foi feito como um exemplo. Tenho o Facebook aqui, e gosto muito do colarinho azul que o Facebook tem. Este tom particular de azul é um dos realmente este provavelmente o meu tom favorito de azul . Então, se eu quisesse descobrir o que é essa cor, eu posso provavelmente bastante dia na barra, clique em inspeções e, em seguida, tudo simplesmente começar a olhar ao redor aqui e ver. Basta começar a alternar entre os elementos e a Síria. Ok? Você pode ver agora este é exatamente onde temos o fundo Corbyn aplicado e para confirmar que se eu desmarcar esta caixa Ok. Continua a mesma lição. Livros de damas. Ok, então agora você pode ver que a cor de fundo azul não está mais lá. Então isso definitivamente nos diz que Ei, esta é a cor foi aplicar este tom particular de azul e esse é o valor. São três bestas. Vai ser 5998 e lá vai você. Então, novamente você pode usar inspecionar elementos para descobrir mais informações sobre o site Quais cores eles usam em. Até o conselho formou uma família que estão usando, certo? Então, se eu talvez realcei este texto aqui, clique com o botão direito, vamos inspecionar. Vamos ver que famílias divertidas estão sendo usadas aqui. Vamos sentar. Você pode encontrá-lo? Ah, nós não vemos Ok. Era como Helvetica Arial. Alguns sobreviveram, mas isso foi cancelado, como podem ver. Então, sempre que você vê como um traço aparecendo na propriedade e é Celadon, quarta-feira outro valor fora da iluminação é desenvolvido que você está olhando atualmente. Então, para fazer isso, precisamos de “Ok “, para que você possa ver o porquê. Hoje é outra família divertida pervertida sendo declarada aqui. E chama-se Herdar. Então herdar significa que a família de telefones foi tirada de uma morte que está acima desse diabo em particular olhando. Então, se começarmos a clicar aqui em cima, continuar clicando aqui, você pode ver se ele ainda permanece herdado. Isso não nos mudou. Continue indo mais alto e mais alto. Certo, vamos fechar isso. Vamos expandir este herdar herdar parece que vai todo o caminho para o corpo e, finalmente, no corpo. Agora você pode ver que é aqui que temos Helvetica Ariel e sensorial. Então, de fato, estes são. O telefone foi aplicado no site, e lá vai você. Então eu vou fazer de acordo com passar algum tempo, brincar com a ferramenta, ir para seus sites favoritos, clique direito ferramentas inspecionadas. Tente descobrir o que a diversão diz ter sido aplicada em particular Barton ou descobrir a cor de fundo que está sendo aplicada. É assim e apenas divirta-se. Quanto mais você usar a ferramenta, mais confortável você terá isso em usá-lo. Então isso é graças a tanta sorte. Se você tem alguma dúvida sobre como usar isso para, por todos os meios Richard estar para chegar pode ser mais do que feliz em responder a sua pergunta, porque esta é uma habilidade muito, muito importante para ter. Obrigado por assistir, e verei na próxima aula. 43. Construindo o cabeçalho 1: Ok, então vamos construir o cabeçalho para o nosso site. E eu puxei o produto acabado aqui, e você pode ver que este é o objetivo. Isto é o que pretendemos. Então vamos dar uma olhada mais de perto no que temos à esquerda. Nós temos o logotipo, mas você pode notar que este logotipo é na verdade duas partes. Você tem a imagem que o IHS girando ao redor quando passamos o mouse sobre ele, e então você tem texto real, que nossa web e um impacto. Quero que pense por um momento. Como você acha que podemos alcançar esse tipo de design? Estou falando especificamente de uma mensagem agora. Você notaria Web é em branco e estes quatro trenós e o que está bem e um impacto tem uma cor azul claro. Como você acha que podemos alcançar esse tipo de design enquanto você pensa sobre isso? Aqui, à direita, temos os itens do menu. Temos sete deles e eles também têm algum estilo que vai dar uma olhada um pouco mais tarde. Mas vamos pensar sobre a estrutura porque estamos falando de HTML agora. Então a estrutura aqui é que vamos ter um recipiente que vai segurar o logotipo e, em seguida, os itens do menu na luz. Mas, em seguida, também podemos ter uma coluna especificamente para o logotipo, que enfraquecem métrica em estilo e, em seguida, outra coluna especificamente para os itens de menu. Então vamos fazer isso. Eu vou passar para os meus colchetes, e antes de começarmos a adicionar o HTML ao arquivo xml index dot, há algo que precisamos fazer que é favor importante, e eu deliberadamente deixei isso de fora. A coisa é, geralmente um monte de desenvolvedores tendem a esquecer de fechar suas tags. Eu sou culpado disso. Eu já fiz isso tantas vezes antes, então dê uma olhada no arquivo agora e me diga, qual imposto você acha que precisamos fechar? É bem simples. Deve ser bem óbvio. Precisamos fechar a etiqueta do corpo, então vamos em frente e fechar essa. Primeiro de tudo, vamos descer aqui, tudo bem, e finalmente, também precisamos fechar a tag HTML. Essa é outra etiqueta que precisamos fechar. OK, isso é que eu vou criar algum espaço agora. Então vamos trazer isso aqui e deixe-me ir em frente e mudamos aquela Índia e Oh. Está bem. Tudo bem. Então, o primeiro de tudo precisa fazer aqui é que vamos adicionar a etiqueta Hedda porque estamos caminhando na cabeça para cima. Então vamos fazer essa. E depois o poder da cama. Eu também vou em frente agora e simplesmente fechar o Hedda Vamos criar algum espaço. Tudo bem, então o que vamos fazer agora? O primeiro que eu vou fazer é criar o recipiente que irá conter tanto o logotipo e os itens do menu. Então vamos fazer isso. Vamos adicionar uma div, e podemos chamar isso. Vamos dar uma aula do nosso conteúdo. Vamos reutilizar esta classe em particular uma e outra vez e vais ver porquê. Então este vai ser o Dev contendo os itens do menu e o logotipo. Vamos em frente e simplesmente fechar o negócio agora mesmo. Ok? Vou criar espaço e tudo bem. Certo, então agora temos o contêiner pronto. Não precisamos adicionar uma coluna especificamente não para o logotipo. Então vamos criar outro Div. E vamos dar uma aula e eu vou chamar essa marca de classe porque o logotipo é a marca . Vamos dar uma classe de marca. Vamos fechar o Dev E agora dentro da marca Dev, vamos começar a adicionar o conteúdo para o logotipo. Primeiro, o primeiro ano dele é adicionar outro Dev aqui e podemos ligar para este dia de aula. Vamos dar uma aula a isso, digamos rap local, certo? E agora dentro deste Dev em particular, vamos adicionar a imagem, o logotipo em si. Então vamos em frente agora e dar-lhe imagem e nós vamos apenas dar essas aulas. Bem, vamos chamar o logotipo da turma. E agora, para a fonte, será que temos em ativos. CSS Não, como eu sinto muito, ativos, imagens e logo o PNG. Certo, isso deve estar correto. E eu vou adicionar outra coisa chamada “Todos os textos”. Agora, se nós não falamos sobre todo o texto e você não sabe o que é basicamente todo Texas muito, muito útil porque as pessoas que são cegas, eles usam software particular para levar o conteúdo de um site agora porque não conseguem ver as imagens. E como tal software não pode descrever imagens, eles usariam o texto alternativo para essa imagem para descrever o que essa imagem é para a pessoa cega. Então, é ótimo para usuários cegos. E também motores de busca como o Google irão recompensá-lo. Se suas imagens têm texto alternativo, então é muito, muito, muito importante. Então, adicionar todo o texto era simples. Estado Ault é igual a e, em seguida, e Coats. Eu vou dizer logotipo de impacto na Web, porque é isso que é, certo? Logotipo de impacto na Web E eu acho que estamos bem e bem, eu vou apenas ir em frente agora e salvar isso e vamos dar uma olhada no que temos veio aqui em baixo. Mas primeiro uma página e tudo bem, então tudo bem. Agora temos o logotipo aparecendo. Ok, vamos voltar. Dois pretos. Está tudo bem. O que vem depois? Fui Agora vamos adicionar o nome do texto de impacto na Web. Então, novamente, vamos criar um novo Dev ou se nem precisamos dele. Dado este caso, podemos ir com uma extensão simples. Leslie, está tudo bem. Eu vou com este período e nós chamamos é uma classe gastar classe igual e e foi simplesmente chamado seu nome. E então quando uma nova linha, eu vou entrar aqui agora e dizer que classe span é igual. Então agora vamos adicionar o texto de força raved, que é web. Então, vamos dar uma aula a isto. Deixe-me entrar aqui e dizer o nome. Vamos dizer web, ok. Então esse texto aqui vai ser Web e, em seguida, Ford slash porque lembre-se, eu ouço isso no logotipo. Vamos voltar aqui mesmo. Você vê Web e, em seguida, quatro barras não é branco. Então, eles estão juntos e depois impactam isso e explodiram. Será uma classe diferente. Vamos voltar. Então essa é a Web. Vamos parar de fechar esta panela. E agora podemos adicionar o novo espaço para os impactos de classes span iguais e então eu vou dizer nome e depois impacto, ok? E então o texto em si agora será impacto. E agora podemos fechar o span e então podemos fechar o span em si o span principal segurando o texto e é isso. Então certifique-se de que estamos bem. Eu remova qualquer espaço vazio e tudo bem. Há um pouco de um problema porque você pode dizer agora que o corpo e HTML estão em vermelho. Então isso nos diz agora que algo está faltando em algum lugar. Vamos nos certificar de que tudo está correto. Então esse Dave está fechado. Este Dave foi fechado. Este Dave também foi fechado. E Oh, bem aqui. A extensão não foi fechada. Então vamos em frente e fechar esse espaço. Certo, Certo, esse é o tipo de problema que você enfrentará como desenvolvedor da Web, especificamente com HTML e CSS. Então comece a se acostumar com isso. Eu vou continuar agora, salvar o arquivo e vamos voltar aos nossos golpes. Ah, e vamos ver o que temos. Vamos refrescar e tudo bem, tudo bem. Agora temos impacto na Web e, é claro, não terá que fazer algum estilo para fazê-lo parecer exatamente como este, o que vai ser bastante interessante. Mas você deve estar pensando nos tipos de propriedades serão aplicadas aqui, por exemplo, Web um impacto. Obviamente, o tamanho frontal será maior. Eles terão classes separadas para seus vãos e, claro, transformar texto. O logotipo em si será muito menor do que o que temos atualmente. E o mais importante de tudo, o texto e o local aparecem lado a lado. Então essas são coisas que devemos pensar. Vamos para os nossos colchetes e vamos para o nosso principal que CSS. E já que somos Stylin especificamente a seção da marca, lembre-se, estamos lidando com a área da marca agora mesmo. Vou criar algumas mensagens aqui, então vou copiar este branco aqui. Vamos copiar isto. Acalme-se aqui e cole que Andrew Cold é marca. Este vai ser todo o estilo e especificamente para a seção da marca. Tudo bem, então qual é o primeiro? Vamos com o caminho mais fácil. Vamos com o festival de texto. Ok, então voltando ao nosso índice de HTML, nós temos o nome span Web, que é Web e, em seguida, o impacto do nome. Então vamos fazer isso muito, muito rapidamente. Vou entrar aqui agora, digitando nome, digitando nome, impacto no traço. E a única coisa que os minutos fazem aqui é dar a cor. Então vamos fazer essa cor e é branca. Então vai ser f f f f f f f f f f f f f f f f f f f Eu só vou copiar isso velho, venha aqui, nós colamos. Mas agora estamos lidando com um nome que seria ah, Web, eu acredito que então vamos descer aqui mudar a extensão para Web. Agora, para a cor eu sei que a cor aqui vai ser cinco b a D a f OK, mas se voltarmos para a nossa estrutura HTML aqui em cima, lembre-se, nós temos uma classe span de nome segurando ambos e eu especificamente criado é porque nota que o texto é capital é, e também o tamanho do telefone. Então, se eles não estão tendo que aplicar o mesmo tamanho de telefone e o mesmo texto transformar um caso pobre para esta classe poupadora e, em seguida, este banco menos pronto bem aqui, bem como nós podemos apenas uma placa sobre Lee para este nome de classe de dor fora. Foi por isso que criei esta aula. Então vamos fazer isso. Vai estar no topo, bem aqui. Celeste é que eu vou entrar aqui agora e dizer, uh nome. Então vamos em frente e adicionar algumas propriedades. Então o primeiro 1 aqui vai ser o tamanho da fonte. Ah, vamos com 17 pixels. Por enquanto, talvez precisemos mudar essa transformação de texto. Obviamente, é um caso e então vamos com o telefone para esperar também. Vamos fazer isso quer 700. Então é um pouco ousado, e acho que devemos ficar bem. Vamos em frente agora e simplesmente salve isso. Vamos dar uma olhada no que temos atualização. E OK, então, obviamente, você não vai ver o impacto porque, bem, é o Wides e acima. Vamos precisar adicionar a imagem de fundo para que você mostre. Mas, oh, nós fizemos. Eu sinto muito. Cometeu um erro. Web é a de branco e, em seguida, o nosso impacto é o de azul. Meu Deus, peço desculpas por isso. Vamos rapidamente fazer essa mudança. Ah, Web, certo. O dele deve ser branco. Ah, eu sou tão idiota. Vamos descer aqui. Torne isso geral rápido. Uh, ok. Ok, agora isso deve ser, eu prometo. Ok, agora isso deve ser, Isso deveria ser. Eu me demito. Agora vamos voltar aqui o seu fresco e bom, então as armas e o impacto branco estão em azul. Ok, vamos voltar. E agora vamos dar uma olhada no que mais podemos fazer aqui. Vamos tentar obter o texto para alinhar ao lado da imagem. Então, para fazer isso, vamos ter que fazer algumas mudanças no logotipo em si. Vamos dar uma olhada no que temos no índice com HTML. Aqui temos a classe de rap local segurando o logotipo. Então talvez possamos aplicar exibição em Lane bloqueado para esta classe de rap logotipo. Então vamos fazer isso. Eu vou entrar aqui e vamos com o logo no topo. Então vamos criar algum espaço. Então eu vou entrar agora e dizer logo Oh, isso é um pouco demais. Deixe-me adicionar espaço aqui. Ok, logo. E eu vou dizer, Dash rap, vamos abrir o aparelho do nosso colega. E então, bem, vamos com isso. Jogar fora no bloco de linha. Certo, então vamos transceptar o que vai acontecer? Eu vou em frente agora e salvar. Vamos voltar. Isso é refrescar. E isso ainda não funcionou. OK, não há problema. Vamos voltar e ver o que mais podemos fazer aqui. O que eu vou fazer é definir um com para o logotipo em si. Dê uma olhada no logotipo. Você pode ver aqui que é significativamente menor. Então, vamos adicionar um logo aqui. Então eu vou entrar aqui e nós vamos simplesmente vir aqui. Logotipo escuro. E eu vou dar um com isso fora. Vamos com 60 pixels por enquanto. Então, meu cólon, digamos que agora vamos dar uma olhada no que temos. Volte aqui. Vamos atualizar a página. E agora você pode ver que agora temos o tamanho exato fora. 60 são pixels, mas você também notará a borda circular, certo, Jake, e verá que está em azul. Então, a fim de alcançar esta característica em particular que teremos que fazer é que vamos ter que adicionar alguma fronteira e, em seguida, um rádio de fronteira. Então vamos tentar essa. Eu vou voltar aqui e vamos para a própria classe de rap local, então eu vou dizer fronteira dois pixels. Vamos com sólido e então eu sei que o colar é exatamente o mesmo. Vai ser cinco b d e f f. E f f. então fazer as fronteiras circularem. Lembro-me que é esta propriedade chamada Border Radius e eu acho que é que é quatro pixels . Isso é o que precisamos para fazer com que ele circule. Vamos salvar, vamos voltar, vamos atualizar a página e lá vai você. Embora você notará que o logotipo em si é um pouco mais longe para o topo. Ele não está alinhado perfeitamente no centro fora da borda, então há uma propriedade que podemos aplicar, e é chamado de vertical, nossa linha que irá garantir que o logotipo é colocado diretamente no centro lá no a meio da nossa fronteira. Então, para fazer isso, eu vou pular aqui, voltar para um CSS mental e, em seguida, para o logotipo bem aqui. Eu vou me candidatar a você e dizer Vertical ah, linha vai ser no meio. Certo, vamos guardar isso. Vamos voltar para os rebeldes. Vamos refrescar. E agora você pode ver que o logotipo agora é colocado perfeitamente bem ali no meio, e é por isso que eu vou parar para comprar maconha. Uma vez a segunda parte do salto. Onde vai continuar a projetar o cabeçalho fora do nosso site? Vejo-te então. 44. Construindo o cabeçalho 2: Bem, retornos. E se o seu vídeo for adicionado com sucesso, ah logotipo, mas fez algum design e também adicionamos o texto de impacto na web. Mas agora é hora de adicionar os itens do menu todos os sete deles. Então a cabeça de nós você colchetes e no meu HTML inexato, eu vou adicionar a nova tag logo abaixo da extensão. Por favor pague. Muito atenção, garoto branco. Este div para o da marca bem aqui. Vamos adicionar uma nova tag para o menu logo abaixo dessas hierarquias particulares. Então aqui eu vou adicionar um pouco de espaço, e então a etiqueta será usada para o menu será o valete. É um imposto HTML especificamente para seus itens de menu. Então sempre use este ataque em particular em vez de Davy poderia usá-lo, Dave, se você quisesse. Mas é mais estranho ir com a etiqueta do valete. Então, bem aqui, vou dar uma aula a isso, e nós simplesmente chamaremos seu menu de muito, muito, muito simples. Tem o menu da aula e tudo bem, vamos fechar o valete. Oh, eu vamos criar algum espaço e nós vamos adicionar em muitos itens como uma lista, então nós vamos com a lista de ordem de U L. E então apenas assim, nós vamos adicionar L Eu sinto muito. Vamos fechar o festival. E então dentro, vamos adicionar L I O primeiro 1 o primeiro item da lista. E isso é, na verdade, não me lembro. Vamos voltar aqui. Tudo bem, então sobre serviços, certo? Vou voltar aqui. Então o que eu vou fazer aqui é eu simplesmente vou adicionar todos os itens da lista para o menu e seguida, sempre, hum, o vídeo, uma vez que eu tenha terminado de boas-vindas de volta e é contra o agora, eu adicionei o tentativas de menu restantes. Eu também adicionei as tags para eles. As etiquetas A, as ligações basicamente, e estas serão chamadas de etiquetas de tornozelo. A idéia aqui é que quando as pessoas clicam nesses links, ele os levará para as seções onde temos o conteúdo do item em que clicaram . Não se preocupe, falaremos sobre isso um pouco mais tarde. Mas por enquanto, certifique-se de que você tem suas hashtags e, em seguida, o texto que representa o item de menu real. Agora, aqui está a minha página. Depois de fresco, Você pode ver ali mesmo temos todos os nossos itens de menu, mas precisamos fazer algumas alterações CSS sérias. Então vamos voltar para Teoh colchetes e eu vou abrir principal que CSS. O que vou fazer aqui é pegar a marca. Vamos copiar isso. Vamos vir até aqui e adicionar a nova seção entre, Claro, ser menu. Certo, vamos criar muito espaço. Vamos voltar aqui, tudo bem. primeiro interesse é a própria classe de menu. Vamos fazer algumas mudanças aqui. A família divertida. Você precisa ser alterado e geralmente é uma boa idéia para ter uma família forma diferente para seus itens de menu e em outro para a sua tecnologia tão monstro que será para o corpo. E então, para muitos itens estavam indo para usar um latell. Sinta-se livre para usar um item de menu diferente, se quiser. Nós também poderíamos adicionar o colarinho fora do nosso texto, que será branco, mas eu não quero fazer isso porque o saco já é branco e nós precisamos ser capazes ver nossos itens de menu comprados. Extras de Definitivamente além caso estamos indo para fazer a posição relativa, bem como, para uma boa medida, relativo e OK, isso é para a classe menu vai vir aqui. Vamos fazer uma mudança no menu. Você l Porque queremos remover o padrão, estilizando esses círculos para os itens de menu tão bem vindo agora e dizer que o tipo de estilo lista . E, claro, vamos dar. Isto não é nenhum. Não queremos estilos de lista. Vamos dar a isso um padrão também de um pixel. E para uma boa medida, margem será definida como zero. E então vamos descer aqui e fazer o mesmo para os itens Airlie em si veio para baixo aqui. Vou estranhar a margem de 10 pixels e depois um pixel para a esquerda e para a direita? E seria isso. Vamos em frente, e isso é apenas salvar e ver como isso parece agora. Vamos atualizar e OK, olhando muito, muito, muito melhor agora como está, mas podemos fazer algumas mudanças reais no próprio texto. Podemos talvez mudar o tamanho do telefone em algum peso funk também, mas também podemos exibi-los como um sabão de bloco em linha. Vamos fazer tudo isso. Eu vou voltar para colchetes e para baixo aqui terá menu e, em seguida, tem um tão como Agora vamos fazer mudanças diretamente na tecnologia. Então eu vou para o tamanho divertido e ah, vamos com a fonte de 16 pixels. Espere. Vamos ver. Frontal, espere. Estou pensando em talvez algo como, digamos 400, eu acho. Vamos lá 400 e depois a cor novamente. Podemos mudar a cor para branco, mas não quero fazer isso. Mas vamos mudar o display dois no bloco de linha. Ok. Ah, posição vai definir este para relativo também. E ah, para uma boa medida, decoração de texto. Vamos dizer isso ao Non. Não queremos decoração. O que é que sempre? Ok, vamos em frente, salve e vamos dar uma olhada no que temos. Fresco e bem. Não parece mal. Estamos chegando lá agora. Obviamente, o grande desafio aqui é tentar levar nossos itens de menu para a luz e mantendo nosso logotipo para a esquerda. Agora, esta é uma propriedade que eu ainda não falei, mas há uma propriedade conhecida como a propriedade flutuante. A ideia aqui é flutuarmos. Você pode enviar elementos ou conteúdo para a esquerda da página ou para a direita. Então o que vou fazer é voltar aqui para ter colchetes. E se formos para a estrutura HTML, lembre-se que temos duas colunas principais uma segurando o logotipo, uma segurando os itens do menu. O único para o logotipo é a classe da marca enquanto eles querem para os itens do menu é, claro, a classe fora do menu. Vamos adicionar nossas propriedades flutuantes. Eu vou para manter CSS e para a marca bem aqui. Vou abrir a marca da classe da marca, e vou dizer que flutua à esquerda. Então estamos flutuando a marca para a esquerda. Eu também vou dar-lhe uma posição fora relativa realmente tive. E lá vai você. E, em seguida, aqui para o menu, eu vou flutuar o menu para a direita. Vamos em frente agora e salvar e vamos ver as mudanças. Vamos refrescar e voilá! Agora você pode ver algo muito interessante acontecendo que os itens do menu estão agora à direita. O logotipo está agora à esquerda, e você também notaria que o texto que o impacto na Web está agora ao lado do local porque nós flutuamos o conteúdo da nossa marca para a esquerda. Mas os nossos aliados uma lista de itens ainda são exibidos como blocos para que pudéssemos mudar isso. Eu também adiciono na gripe o flutuador certo? Eu sinto muito. Flutua à esquerda, irmão pelos nossos aliados. Um Leicester. Este carro ficou seguro. Vamos voltar. Vamos refrescar e lá vai você. Então, ainda estamos de alguma forma de alcançar o que temos atualmente aqui. Mas estamos chegando lá gradualmente. Então é isso para adicionar nossos itens de menu e também trabalhar com a propriedade de inundação. Alemanha, Vendex Variable continuará a andar em nosso cabeçalho. 45. Projetando nosso cabeçalho parte 1: Bem, volte. Então vamos continuar a desenvolver a cabeça para fora. Mas antes disso, preciso apontar sua intenção para uma flecha que fiz aqui. Todas as armas na estrutura. Então aqui, onde temos a classe Dev da marca tão perto e eles aqui devem realmente estar fora porque este Dave da marca clássica deve conter o logotipo, bem como o nome do impacto da Web também. Então eu vou cortar isso aqui, e eu vou colá-lo fora das roupas e envergar assim. E então eu vou fazer um convite bem aqui, e é assim que deve ser. Então, no contêiner da marca, você tem o logotipo da classe rap, e então você terá essa classe de dor fora do nome. Então eu peço desculpas. É um erro da minha parte. Mas estas são algumas das coisas que aconteceram quando você constrói nossos sites. Você sempre propensa a cometer esses tipos de erros ou se desculpar por isso. Mas agora vamos seguir em frente. Eu vou ir em frente e salvar e vamos dar uma olhada no que podemos realmente fazer em nosso site. Agora. Então, aqui mesmo. Você notaria que o conteúdo é mais para o centro, certo? Não é como o que temos atualmente, onde o conteúdo está bem aqui nas bordas. Então precisamos colocar um conteúdo no lado de um recipiente e, em seguida, tentou alinhar o conteúdo no centro. Então vamos voltar, Teoh documento html. E aqui você pode ver que temos o dia do conteúdo da aula. Este é o conteúdo principal que mantém o objetivo baixo, os itens de menu e assim por diante. E, de fato, essa classe fora de conteúdo é uma classe que vamos continuar usando repetidamente neste tribunal. Então vamos fazer isso. Vou ao Maine e vou pegar o texto da marca. Vou adicionar um pouco de estilo para uma aula de conteúdo. Deixe-me adicionar isso aqui, e eu vou chamar este conteúdo, ok? E agora vou adicionar a classe de conteúdo em si. A menos que haja alguma coisa. Ok. A primeira coisa primeiro é que vamos declarar o com, que seria, claro, 100%. É uma boa ideia, 100%. Mas agora vamos definir um máximo com 402.140 pixels. Então este vai ser o recipiente com para o nosso conteúdo. Vamos em frente agora em segurança. Vamos voltar ao Broza Refresh. E agora você pode ver que o conteúdo basicamente aqui é empurrado. Mais são para o branco para a esquerda, como você pode ver melhor. Então ainda temos que tentar descobrir como podemos centralizar nosso conteúdo mais para o centro. E como mudamos a estrutura XML para o contêiner da marca, você pode ver agora que nosso Texas agora alinhado ao lado do local. Então, novamente, peço desculpas por essa confusão. Eu deveria ter notado que Ah, eu venci Alia. Mas vamos tentar obter o nosso logotipo e os itens do menu mais para o centro. Então, você se lembra desse truque, não é? Eu mostrei a margem e depois zero truque automático. Bem, eu vou tocar isso aqui, então vamos fazer isso. Isso é seguro. Volte para uma atualização do navegador e lá vai você. Então agora você pode ver que o conteúdo está agora mais alinhado em direção ao centro, então novamente muito rapidamente você quer conseguir isso muito, muito, muito rapidamente. Você vai adicionar um máximo com para o seu recipiente e, em seguida, simplesmente disse margens. Você também aqueles que isso lhe dará são estes tipo fora estrutura. Muito bem, mais algumas coisas para fazer Vou voltar para o nosso CSS e bem aqui eu vou espremer alguns estofamento também, que possamos ver Pat em 20 pixels para a esquerda. E agora, você se lembra do modelo Decisions Box, onde o total com também incluirá a borda como os padrões imagina. Bem, vamos fazer isso. Então vai ser o tamanho dos livros vai ser o tamanho da caixa de propriedades e, em seguida, o velo fora das caixas de fronteira o que vamos adicionar. Então isso aqui vai significar que vai com vai incluir nossas margens e padrões. E normalmente é o jeito que você quer ir. Quando estiver na sua posição de contêineres, vou com relativa como de costume e voilá. Ok. Eu vou descer bater sua marca também. E se você notar bem aqui, o logotipo ainda está bombardeado por lá no topo. Então precisamos adicionar alguma margem. Então vamos adicionar margens para a classe ou que o contêiner segurando o logotipo, que é, claro, a marca. Então vamos voltar para a marca agora e bem aqui eu vou dizer Margem e eu vou dizer 20 pixels e, em seguida, zero esquerda e direita. Vamos em frente agora e em segurança. Vamos voltar para os sinos são refrescar e lá vai você. Então as coisas estão definitivamente parecendo muito, muito melhores agora, mas ainda há algum trabalho que precisamos fazer. Precisamos adicionar algumas margens ao item do menu, e se você notar aqui mesmo no nosso produto acabado, você notaria que o logotipo e os muitos itens basicamente a cabeça para cima eles são um pouco mais largos do que o resto fora do conteúdo real . Pode não ver agora, mas acredite, está lá. O cabeçalho é apenas um pouco mais largo. Então nós vamos fazer é nós também vamos aumentar o máximo com fora da cabeça são especificamente ok, Então vamos fazer isso, por exemplo, foi, Vamos voltar para colchetes e é passar para manter CSS. Vamos em frente agora e adicionar margens ao nosso menu, então eu vou entrar aqui e dizer que a margem é 25 pixels zero. Ok. E agora para o nosso cabeçalho. Confira isso. Vou passar para indexar com HTML. E aqui temos o conteúdo da classe da morte. Eu vou adicionar outra classe fora de largura. Ok, então basicamente, temos duas aulas aqui, conteúdo e ampla. E agora estou guardando isso. Deixe-me salvar o arquivo. Vou para o Maine. Aquela CSS Emma. Temos o conteúdo aqui. Eu vou entrar aqui e dizer conteúdo de ponto e então não aviso. Não há espaço porque estas duas classes pertencem aos mesmos elementos. Então eu vou entrar aqui agora e simplesmente dizer Max com e eu vou dizer 12. Vamos 12 50 pixels. Então é apenas um pouco mais largo do que os 1140 pixels. Vamos em frente agora e salvar isso. Vamos voltar. Navegador Teoh. Uh, ele está vindo para cá. Vamos refrescar. E lá vai você. Ok. Muito, muito melhor. Agora, por aqui, você pode ver como ele se parece, e nós precisamos descobrir uma maneira de obter esse efeito onde, ao passar o mouse sobre os itens do menu , você pode notar que o texto inicial seriamente como sobre, por exemplo, ele vai para baixo e, em seguida, outro sobre como, vem sobre ele. Então, basicamente, é como se tivéssemos dois textos aqui, um que podemos ver, e então outro que tira o lugar do anterior quando passamos o mouse sobre esse item de menu e você também pode ver a cor de fundo muda para azul também. Então, como podemos conseguir isso? Bem, a primeira coisa que vamos fazer aqui é mudar a estrutura dos itens do menu . Basicamente, vamos repetir o texto. Então, em vez de ter apenas um sobre link agora, nós vamos ter que ter que ter para os serviços, por que nós? E, em seguida, vamos esconder um no estado padrão. E então, quando esperamos sobre o padrão, ele agora vai se esconder, e agora eles vão mostrar a versão dos Estados de Harvard basicamente, então eu os ajudo a fazer sentido. Não se preocupe. Deve fazer sentido à medida que continuamos a construí-lo. Então o que eu vou fazer é eu vou voltar para o nosso índice de cada semelhante e nós vamos mudar a estrutura de nossos itens de menu, então veja isso. Eu vou criar algum espaço aqui, primeiro lugar, e eu vou adicionar uma nova linha bem aqui. Vamos fechar este também, e ok, então olhe para o que eu vou lidar bem aqui. Eu vou dizer que uma viagem é sobre Vamos criar algum espaço aqui. Tudo bem, aqui. Então a idéia aqui é que vamos adicionar o texto sobre duas vezes, que significa duas classes de span diferentes. Ok, então eu vou adicionar o primeiro espaço bem aqui, e ele chamou sua classe de caneta igual “ Vamos chamar este padrão. Ok, então este seria o item de menu padrão que vemos quando carregamos a página. Então vamos adicionar texto aqui sobre e, em seguida, eu vou fechar a extensão, e então a próxima classe pan aqui será a que vai aparecer quando nós Khobar no item do menu. Certo, então vamos acabar com este. Ok? Então, basicamente, vem aí quem acaba comigo no item do menu. Vou repetir o texto e chamar essa também. Eu vou em frente fecha pan. E aí está. Então, aqui mesmo. Esta vai ser a estrutura para os nossos itens de menu. Como eu disse para a defesa pan classes um que será o padrão. E então maravilha aparecerá quando esperamos sobre o padrão são muitos item. Então o que eu vou fazer aqui é eu vou fazer exatamente a mesma estrutura para todos os itens principais. Vou pausar o vídeo e continuar assim que terminar. Bem-vindo de volta e é novamente. Veja, agora, Eu adicionei as classes de espanhol padrão e mais para todos os itens de menu que eu salvei. Agora, quando você faz o mesmo, isso é exatamente o que você atira. Veja, quando você se refresca, você pode ver agora que temos a mensagem com pizza dentro, mas está tudo bem. Vamos fazer grandes mudanças agora. Vou voltar para os corretores, não vejo avaliação e a primeira coisa que vamos fazer aqui. Isto está bem? vamos estilizar as aulas de extensão Primeiro,vamos estilizar as aulas de extensão. Ok, vamos adicionar alguns de todos começando para eles. Então vamos fazer este menu A e, em seguida, vão. Então todo o texto nos itens do menu terá esses estilos juntos. Primeiro, vamos definir uma posição de um parente e isso vai ser muito, muito importante. Muito, muito em breve exibição. Consideramos isso como um bloco em linha também, e vamos adicionar algum preenchimento de 10 pixels. E também vamos fazer o Buda. Sinto muito, o tamanho do livro na propriedade também. E, claro, vamos com o valor dos livros de Buda. Vamos em frente e salvar isso. Vamos voltar para o navegador. Isso é refrescante e eles dizem, OK, tudo bem. Então agora você pode ver que há mais espaço agora porque nós adicionamos algum padrão também . Adicionamos a exibição no Lyon Block, então está começando a parecer bem arrumado. Agora vamos estilizar. Os estados padrão fora de nossos itens de menu aqui. Você pode ver que o Estado padrão tem o fundo escuro acastanhado. Tem a fronteira. Tem como, ah, borda azul mais clara cor superior lá também. Então vamos ver como podemos adicionar que o projeto vai voltar aqui. Então vamos atingir basicamente a classe span fora do padrão. É por isso que vamos dobrá-lo e vamos fazer isso aqui mesmo. Aqui em baixo. Eu vou dizer ponto Menu espaçado ou padrão. Ok. E vamos ser possíveis no fundo Coehlo. Ok, então nós temos o saco e o culo e eu tenho aqui mesmo. É 40 40 40 40. Vamos adicionar uma borda também, que é um pixel. Vai ser sólido e também castanho. Então isso vai ser para me desculpar. 555 e, em seguida, a cor top bullet. Tem a cor azul mais clara, então eu vou dizer, mas é uma cor e o valor lá vai ser um 00 b um e quatro. Creio que está correcto. E vamos também fazer a exibição para o bloco online também. E ah, ok, vamos em frente. Agora segura. Vamos voltar e ver o que temos. E voilá. Certo, estamos chegando lá. Vai entrar lá. A única coisa agora é que precisamos tentar descobrir uma maneira de obter os itens de menu de volta para Div ICT, mas também como podemos esconder o estado sobre os itens do menu. Então, todos os itens de menu sem a cor de fundo, precisamos escondê-los. Mas como podemos fazer isso? Como podemos esconder tantos itens? Bem, para poupar tempo, vou dizer-te exactamente o que vamos fazer, certo? Nós vamos voltar aqui, e eu vou adicionar o menu da turma. Isso vai ser muito interessado e agora eu vou entrar aqui e muito silenciosamente eu vou dizer Posição. Consegue adivinhar o véu da posição aqui? Vai ser absoluto. Voilá. Vamos em frente. Salve isso. Volte para uma atualização Broza e aí está. A idéia aqui é que lembre-se, sempre que estamos lidando com posição absoluta, tal elemento irá ancorar-se ao elemento pai mais próximo com a posição desligada relativa. Está bem aqui, Frank. Sobre dois índice dot html. Está bem aqui. Você pode ver que temos a classe span cerca sobre o qual é absoluto. Mas, em seguida, o próprio imposto aparente um imposto na posição relativa. É aqui, no principal, que a CIA diz que você pode ver bem uma posição Vela tive. Então é isso que está acontecendo agora. Os elementos de absolvição agora estão se ancorando às marcas A. Mas você vai notar que o texto ainda está meio que espalhando. Então, para consertar isso, eu vou voltar aqui agora e para o adulto acima da aula, eu vou dizer, deixado de fora zero. Então meu cólon e muito rapidamente vamos descer aqui para o menu. Vamos acrescentar, eu estou no menu A's. Em vez disso, vamos adicionar a cor agora para Branco. Ok, vamos fazer isso. Isso é seguro e meio à frente de volta aqui, e eu me refresco. Lá vai você. Então, basicamente, porque nós dissemos esquerda para ser zero, nós basicamente empurramos os elementos absolutos empurrando para a borda fora dos recipientes aparentes , que têm as tags A. É por isso que você também pode notar que o sexo agora é ousado. Eles não são como a luz leva, você vê bem aqui. Isto é como um peso dianteiro de talvez 300 bem aqui. Isso é mais como um peso frontal de 600 Cain entende por que é porque estamos vendo ambos os textos ao mesmo tempo. Você tem o padrão sobre o texto dia certo e, em seguida, atrás do sobre X, você tem o sobre ambos para a classe acima, Então, basicamente, o texto está dobrando para cima. É por isso que agora é negrito. Você entende isso? Então basicamente você tem o primeiro texto aparecendo e logo atrás dele. Agora você tem o texto com a classe desligada. É por isso que é ousado. E precisamos fazer algo sobre isso. Então, como podemos esconder o texto atrás do texto com uma classe fora do fim? Como podemos Onley mostrar a classe fora do padrão, mas no alto a classe acabou. É muito, muito simples. Eu vou voltar aqui, e aqui está exatamente o que vamos fazer. Vou dar uma olhada nisso. Ok? Vou dar uma altura aos pais um imposto. Então eu vou entrar aqui e vou dizer alturas. Vamos com 40 pixels, ok? E então, para o fim, eu vou me ligar agora, e eu vou dizer top menos 40 pixels desgastados. Então, basicamente, nós vamos jogar as mensagens com a classe fora de cima, mas vamos três sobre as oito etiquetas eles mesmos quando eles vêm aqui agora. Cabeça segura de volta aqui. Estamos frescos e lá vai você. Agora esse texto desapareceu. Você pode eu te dar melhor entender? logicamente mostrar algo se eu voltasse aqui e dissesse OK, o que é amor? Banners para 21 Vamos com menores são 13 em vez e vamos ver a diferença. Ok, quando eu atualizar agora, você pode saber? Veja, este é o texto por trás de que é sexta-feira. Então estamos tentando empurrá-lo. Oportunidade afastada. Então o que eu simplesmente fiz novamente foi dar ao conteúdo de si mesmos o menu uma extensão que nós damos suas cabeças para os pixels e, em seguida, simplesmente para esconder a classe fora de ordens. Dê menos 41 pixels até a morte. E se eu voltar aqui, refrescar mais uma vez, você pode ver que sumiu. Então esse é um truque que você pode querer aplicar no futuro. Na ordem Seasons projetos. Isso já passou muito tempo. Então, obrigado por assistir evento alemão excitável. Continuar a construir a nossa cabeça erguida 46. Projetando nosso cabeçalho 2: Bem-vinda de volta. Espero que você esteja gostando das lições Aqueles tão longe que anteriormente fomos capazes de torcer certa extensão esconder o texto span para a classe sobre. Neste momento, tudo que repousa no menu é o texto para a extensão padrão. Mas o texto para o overspan ainda está lá. É bem aqui em cima. Não podemos vê-lo porque os itens de menu em que o texto foi definido como branco. Temos um saco branco na cor. Então, para vê-los, vamos fazer algo que eu vou voltar para colchetes e para a classe sobre, Vamos em frente e adicionar uma cor de fundo. Tudo bem, então vamos fazer isso. Não é assim que se escreve saco de fundo na cor, e vou dar-lhe 00 b um e quatro. E vamos também providenciar a fronteira. E desenvolvi idiotas certos, um pixel, uma borda sólida. Mas a cor desta mesma coluna 00 b. Eu não vou e quatro. Tecnicamente, você nem precisa adicionar a borda. Mas vamos acrescentar isso. Tudo bem, eu vou em frente agora e salvar. Volte para trás. Teoh Broza estava fresco e lá vai você. Sobreviveu. Agora você pode ver que está bem ali. Mas isso não deveria estar acontecendo, eu porque nós realmente fornecemos uma altura. Não se esqueça disso. Nós viemos aqui e dissemos para a extensão A que vamos dar uma altura de 40 pixels. Isto aqui é definitivamente maior do que 40 pixels. Então, o que poderia estar acontecendo? O que precisamos fazer é que precisamos fornecer uma nova propriedade conhecida como a propriedade overflow e configurá-lo para oculto basicamente com overflow sempre que o conteúdo pertencente a um elemento sai de seu recipiente. Poderia ser porque você posicionou tal conteúdo. Absolutamente O que acontece bastante. Você pode usar a propriedade overflow para ocultar esse conteúdo. Então aqui está o executável que vamos fazer. Eu vou entrar aqui, e eu vou para o elemento aparente, qual é o menu? A não a classe span, mas o elemento real em si. Eu vou entrar aqui, e vou dizer “transbordamento”. Escondido. Tudo bem. Então, basicamente, estamos dizendo agora que qualquer conteúdo que vá acima de 40 pixels o esconde basicamente. Então voltamos aqui bem, primeiro a página e como ela foi. Ainda está lá, tecnicamente, mas agora dissemos que ele não escondeu. Não queremos ver isso. Então isto, idealmente, é o que queremos ver. Mas como é que conseguimos agora este efeito aqui? tal forma que quando passarmos o mouse sobre os itens de menu a classe off padrão desaparece. E então o de mais aparece. Considere a cor de fundo azul que aparece. Isso nos diz agora que é a classe fora lá foram vistos agora quando chegamos sobre os itens do menu. Como conseguimos esse efeito? Vai fazer isso, vou apresentar-lhe um novo seletor conhecido como o hover selecionável. Basicamente, com este eleitoral, podemos aplicar tipos de definição de mudanças sempre que Khobar em um elemento. Então, para fazer isso, confira isso. Vou voltar para os seus colchetes e vou criar uma nova declaração. Eu vou dizer que eu pensei menu A e agora o cólon e, em seguida, pairar. Este aqui é o seletor de pairar em ação. Então você escolhe o elemento. Você quer aplicar o efeito sobre você adicionado Colônia e Inditex Hauver espaço. E agora o que vou fazer é selecionar. Vou rebocar a turma. Queremos agora mostrar o texto sobre quando chegamos sobre o nosso item de menu. Espero que isso esteja fazendo sentido. Vou entrar agora, aparelho adequado e vamos fazer isso. Como você acha que podemos agora exibir o texto sobre quando adiamos o item de menu? Pense em tudo o que fizemos para escondê-lo em primeiro lugar, que foi o que nós demos a ele uma posição de topo fora de mineiros por 21 pixels. Portanto, para fazer isso aqui, podemos simplesmente entrar aqui e dizer top zero. E lá vai você em um salvamento semi cólon. Volte para um Boza, atualize a página. E agora olha para isto. Quando eu espero sobre os itens agora você pode ver que o Vertex O está aparecendo agora porque com o saco em mudanças de cor agora sabemos que é o texto pairar que está realmente lá, mas não terminamos. Se você der uma olhada no nosso site modelo, observe que a mudança no texto em segundo plano é meio suave, como o que temos atualmente. Agora mesmo. É muito, muito instantâneo com mais sobre os itens do menu e é imediato, como se não houvesse mudança. Quero dizer, não há atraso, não é suave, é muito, muito instantâneo. E mesmo que isso funcione, não é exatamente o mesmo que o que temos atualmente aqui. Isto é muito mais chique e muito mais suave. Então, como podemos alcançar esse efeito onde há um pouco de um atraso quando seguramos os itens do menu e, em seguida, também notar que o texto padrão parece ir abaixo enquanto as ultrapassagens vem de cima, Se você pode ver esse efeito direito Lá. Então, como conseguiremos isso? Bem, vou apresentar-lhe um novo conjunto de propriedades. Transições CSS conhecidas. Basicamente, transições CSS permite aplicar efeitos a um elemento. Normalmente, quando esperamos barra sobre esse elemento agora como ele é, se eu voltar para os colchetes, onde estamos aplicando os efeitos hover também? Vai ser para a classe superior que não tem direito aqui. E depois vamos aplicar a mesma coisa a algo muito semelhante à classe padrão também. Então, em vez de também jogar a transição para a classe over e, em seguida, também para a classe padrão , vamos apenas aplicá-la a uma classe que cobre ambos, que vai ser o menu. Uma extensão novamente, se eu voltar para minhas notas de documento HTML está bem aqui. Temos mais, temos padrão. Ambos são vãos, e ambos caem sobre isso. A tag A que coincidentemente cai em que a classe de menu. É por isso que vamos especificamente atingir este elemento em particular. Esperou menu Um gasto. Então aqui está. Transição. Tudo bem. E agora em outro para transição de transição para o trabalho, precisamos aplicar os efeitos. Então, um tipo de propriedade de configuração, poderia ser o com ele poderia ser a altura. Pode ser a posição neste caso agora. Já que estamos movendo elementos no topo. Normalmente vamos levá-lo para os valores superiores. Vai estar lá em cima. Então basicamente disse que estamos aplicando a transição para a propriedade superior, e agora podemos aplicar algo conhecido como duração. Quanto tempo você deve levar mais quatro a transição para começar e terminar. Neste caso eu vou com 40,2 segundos porque vai ser bem rápido. E então, finalmente, podemos adicionar o efeito real em si. Como queremos fazer a transição? Ela começou rápido e devagar. Deve ser que coisas lentas e rápidas assim. Eu vou com a facilidade para fora que ele é traçado para fora que seria desenvolvido. Então basicamente o que isso significa é que ele será rápido, mas então e lentamente, isso é o que é a facilidade para fora. Facilidade em seria o oposto onde ele vai começar lentamente colocar fim rapidamente. Então lá vai você. Isso é uma transição. Vou em frente agora, salve. Vamos voltar a um navegador. Nós primeiro uma página, e agora você pode ver o efeito? Basicamente, está levando 0,2 segundos para terminar a transição, mas você pode ver que faz uma diferença o que tínhamos originalmente. No entanto, se voltarmos aqui, notamos que ainda há algo faltando e que é um fato que o texto padrão vai para baixo, ele vai para baixo quando esperamos sobre o item de menu enquanto o texto sobre aparece de acima, temos sido capazes de alcançar as ultrapassagens nosso pagamento porque já nos nossos bolsos. Já dissemos quando seguramos o nosso no item, o elemento a adicionar zero superior para a classe sobre. Então, conseguimos alcançar o texto sobre que eu pinto de cima. Mas como vamos agora configurá-lo de modo que a classe padrão vai para baixo quando nós ho sobre o nosso item de menu , ele é praticamente vai ser algo muito semelhante neste caso. Vou apenas copiar isso aqui sob o padrão. Eu vou entrar aqui colar, vamos mudar a classe acima para padrão e agora vai ser difícil. Mas agora podemos ir com 41 pixels. No entanto, ainda não foram embora. Uma coisa que você deve estar ciente é que sempre que você está tentando aplicar transições para os filhos de um elemento sua propriedade, você está direcionando unidade para disse que a propriedade para o próprio elemento pai. Neste caso, o que exatamente todos estão fazendo? Estamos aplicando os efeitos de transição para as classes desligadas, e o direito padrão e a propriedade onde o direcionamento é a propriedade superior. A classe diferente tem desenvolvido para 21 A classe sobre tem um valor fora de zero quando estamos plantados transição como tal, precisamos ir para o elemento pai, que é span menuet. Quando é uma comunidade agora e simplesmente um top é zero. Dê a ele o valor padrão. Isso é importante para que suas transições funcionem. Então, tenha isso em mente no futuro. Sempre que você estiver jogando uma transição para elementos Filhos e você perceber que eles não estão trabalhando nessa propriedade específica, seus alvos definem sua propriedade para o elemento aparente e dão a ele seu valor padrão em potencial. Sua caminhada transferível então. Então vamos em frente agora e salvar isso. Vamos voltar para o nosso Broza. Vamos atualizar, e agora você pode ver o efeito andando corretamente. E lá vai você. Na verdade, vamos fazer mais uma coisa antes da parada. Vamos alterar a duração de 23 segundos, para que você possa realmente ver o efeito em ação. Vamos voltar aqui. Vamos atualizar a página e agora você pode vê-lo direito? Morto três segundos. E lá vai você. Muito legal, certo? E, de fato, poderíamos fazer algo interessante. Em vez de ir com o top 4 a 1 pixels para o padrão. Que tal demos negativo para o dedo do pé? Um pixels? Vamos salvar. Vamos voltar aqui. Vamos atualizar e agora você pode ver a diferença, certo? Você pode tipo de defesa do jeito que funcionaria. Então é realmente velho as dores em sua preferência particular. E agora isso parece meio feio. Mas se voltarmos aos nossos suportes e fizermos isto 2,2 segundos, vai parecer muito melhor. Vamos voltar, inalar. É muito fresco, e agora você pode ver a mudança que é Parece um pouco melhor, mas parece meio estranho porque parece que ambos os itens do menu lado a lado estão pulando ao mesmo tempo, se você vê isso. Então eu só queria mostrar a vocês o que você pode fazer com os efeitos de transição e, ah, apenas deixar você saber que há possibilidades. Você sabe, é tudo sobre mudar os valores e assim uma favela. Apenas certifique-se de que isso é dito de volta para o padrão, que é 41 pixels, não negativo para 21 salvar. Volte aqui. Primeiro a página. E lá vai você. Então, quem finalmente fomos capazes de quase terminar de construir a cabeça erguida. E não se preocupe com transições. Vamos falar sobre transições muito mais tarde neste curso. Tudo bem, então não se preocupe. Vamos cobrir transições com mais detalhes. Então Alemanha para o próximo vídeo suportável. Agora, vá em frente e adicione a imagem de fundo para a nossa Hedda. Te vejo então. 47. Adição do fundo de cabeçalho: Bem-vinda de volta. Então vamos continuar tentando adicionar a imagem de fundo para Hedda. E esta é basicamente a imagem de Baghlan que estamos tentando aplicar ao fundo. Então vamos fazer isso. Eu vou para parênteses, obviamente. Agora vou criar uma nova seção. Salam Ambrose poderia agarrar a cabeça como texto e nós podemos colar este deslumbrante para Heather apenas aqui e em vez de cabeça como eu vou chamar estes o cabeçalho apenas cabeça para cima e vamos fazer isso como eu vou ir em frente agora e adicionar o fundo. Eu sinto muito. Vamos fazer o ataque à cabeça. Primeiro de tudo, acerte uma etiqueta. Abra as chaves de código, e agora vamos adicionar a imagem de fundo, plano de fundo, imagem, e então você está bem abrir os colchetes e ah, vamos adicionar os casacos duplos também. Então, como direcionar a imagem que queremos usar? Bem, se voltarmos para a nossa pasta agora, as tendências são muito chamadas dentro da Main, que a CIA diz. Mas a imagem que estamos tentando segmentar está dentro de outra pasta chamada Imagens, e esta é a imagem aqui, herói doj PG. Então, basicamente, precisamos deixar essa pasta chamada Assets e então pular. Sinto muito, chamado CSS e, em seguida, saltar para a pasta chamada Imagens, e então eu estou pegando a imagem em si. Então, para conseguir isso, verifique este Ártico. Eu vou entrar aqui e adicionar a co dois pontos em vez de escapar da pasta CSS. E agora vamos saltar para dentro da pasta Imagens e, em seguida, especificamente alvo o Curado ou J. P. ArquivoP. G. Vamos em frente agora salvar isso e, ah, vamos ver o que vai acontecer aqui. Vamos atualizar a página e nada. Não há imagem de fundo, mas isso é porque nosso cabeçalho não tem altura. Precisamos dar uma altura ao cabeceira de algum tipo. Então vamos voltar para os nossos suportes. Então, digamos que, por exemplo, eu possa vir aqui e dizer “oi”. Ah, vamos para 500 pixels. Digamos que o ouro apoiado er porque eu atualizar a página e lá vai você. Então agora você pode ver com 500 pixels de altura, você pode ver parte da imagem ruim da arma. No entanto, note que aqui a imagem de fundo essencialmente sente toda a altura fora do nosso olhar. É só quando começamos a rolar para baixo que você não vê nenhuma, hum, fora da imagem de fundo. Então, para conseguir este efeito, o saco na imagem ocupa a altura total fora da tela. Quando você iniciar a página, teremos que adicionar um valor muito especial chamado View Port Altura, o H. Então confira isso. Eu vou voltar aqui e em vez de 500 pixels, eu vou mudar para 100. Então ele não removeu que eu vou mudar para 100 inveja h. Este aqui é o valor padrão dado a qualquer altura quando você quer que o saco uma imagem para cumprir a altura total. E eu vou em frente agora salvar. E agora vamos ver um pouco de magia. Vamos entrar aqui, refrescar a página e lá você vai logo de cara. O saco na imagem combina a altura total, e isso é por causa de dar a cabeça são uma altura de 100 portas de visualização, então outro valor pode achar interessante poderia ser a porta de visualização com a qual seria VW. Ou seja, no caso de você querer que seu plano de fundo para ir o completo com da sua tela. Mas já que estamos usando um saco uma imagem que é grande o suficiente. Não precisamos definir isso. Então lembre-se dos 100 V h. Isso sempre dará a sua cabeça, uh, uh, qualquer elemento que você está jogando desenvolvido para sempre ter certeza que ele ocupa a altura da comida fora de sua tela. Tudo bem, eu vou adicionar algumas propriedades adicionais aqui. Vamos com o tamanho do fundo. Lembra, falamos sobre tamanho? Temos cobertura de contêiner que cidadãos cobrem. Vamos também dizer que o fundo por posição do solo, eu vou com o centro e, em seguida, mais um anexo de fundo da propriedade, e eu vou chamar este um seguro fixo. Agora você sabe o que o saco de tamanho faz? O que a posição faz os anexos. Basicamente, fará com que a imagem de fundo seja corrigida. É o valor que você vê aqui. É o que você vê aqui quando tentamos rolar para baixo notas é que o saco uma imagem apenas fica bem ali. Ele não vai para a escola enquanto nós rolamos para baixo. Então, para alcançar esse efeito, é por isso que eu adicionei o acessório por arma fixo. Sobel disse que, na verdade, quer começar a adicionar texto logo abaixo do nosso cabeçalho. Então eu guardei isso e vamos voltar aqui e atualizar. E ok, a próxima vez que você precisar adicionar o seria a capacidade notado a camada preta bem ali . Precisamos ser capazes de adicionar isso à nossa imagem de fundo para que quando começarmos a adicionar nossos textos, como o nível do seu negócio, ele seja mais legível. Então, para conseguir isso, há algumas semanas que podemos fazer isso. Mas vou te mostrar a maneira mais fácil de fazer isso. Tudo bem, vamos voltar para colchetes. Agora, onde você tem a imagem de Baghlan, eu vou adicionar um pouco de espaço, e então eu vou fornecer um nouvelle um delineado frio Grady int. E agora dentro de Li Lina. Ótimo. E eu vou adicionar um modelo de cores chamado RGB A. de que você já ouviu falar. Isto é basicamente significa vermelho, verde, verde, azul e, hum, al Fahm. Então, com isso, podemos realmente adicionar o preto excessivamente, então confira isso. Ok. Vou abrir novos suportes de novo. Eu vou escolher zero para vermelho, zero para azul, outro zero para verde, e então eu sinto muito, Kaiser para vermelho zero para verde aqui para azul. E então, finalmente, vamos com 0,7 para o Alfa. Mas então precisamos repetir esse Oliver contra todas as cópias RGB A até o 0.7. Vou adicionar um coma aqui pagar de novo. E depois, fora do suporte de fecho, vou adicionar uma saída para a U.R. I e ah, isto deve ficar bem. Deixe-me ir em frente e salvar. Vamos voltar para dentro. Aqui se refere a página e a maneira como você vai. Então, basicamente, o 0.7 é o que dita o quão escuro é o saco e, essencialmente, vai ser . Então, se você voltar aqui, por exemplo, e nós dissemos, bem, vamos fazer este 12 em vez de vir aqui, fazer este também. Vamos voltar. Você notará uma atualização de diferença imediata. E lá você pode ver que não é tão dockage como antes. É muito mais praga, essencialmente. Então os valores que temos no final ditarão nosso quão escuro será. Se fôssemos até 0,9, por exemplo. Ok, volte aqui e depois volte para as minhas sobrancelhas primeiro. Agora está muito, muito, muito escuro. Então 0.7 é um bom lugar para estar. Então eu vou mudar tudo isso de volta 2.7. E lá vai você. Certo, vamos voltar aqui. Os sinos para fora, refresque-se. E estamos quase lá. Quase apenas algumas coisas porque precisava mudar. Obviamente, o texto de impacto na Web aqui é muito menor do que o que temos aqui. Então vamos tentar consertar isso. Eu vou entrar aqui e usar o meu in espectral e vamos ver se eu chegar lá para nome da turma de espanhol e eu mudei o tamanho do telefone de 17 e eu estou em idade avançada, 26 pixels, por exemplo. Acho que isso parece muito bom. Vamos também tentar adicionar um meio de linha vertical. Ok, E então talvez você também pode adicionar, como margem à esquerda para apreciar longe do local ou apenas um pouco. Vamos com, uh, uh, cinco pixels e vamos ver, eu acho que isso se parece com o que temos aqui, embora isso ainda seja um pouco maior. Vamos voltar aqui e Ah, vamos com talvez 20 8 pixels, talvez. E Ah, OK, isso deve ser perto o suficiente. Acho que está perfeitamente bem. Tudo bem, eu vou voltar aqui e vamos adicionar esses valores. Estou mirando na classe de nomes. É aqui em baixo. Certo, então o que temos exatamente? Temos alinhamento vertical definido para o meio e na margem esquerda para cinco pixels. E não vamos esquecer qual é o tamanho do telefone de 17. E acredito que fomos até 28 pixels que salvaram isso. Volte para suas contas são refere-se a página e lá vai você. Então nada ruim em tudo foram muito, muito quase o Na verdade, nós realmente adicionamos com sucesso tudo o que precisamos para o cabeçalho com a exceção fora apenas o texto aqui e os botões que normalmente adicionam no próximo vídeo. Então eu acho, é muito para a fortuna. Se você tiver alguma dúvida, como sempre, certifique-se de entrar em contato e eu verei na próxima aula 48. Adição de o Herói: Bem-vinda de volta. Então vamos continuar construindo a cabeça e nós vamos fazer aqui é adicionar o texto para o nível um negócio puro são construídos uma presença web impactante e, basicamente, a nossa chamada para botões de ação. Então, para conseguir isso, vamos ter que adicionar alguma estrutura aos arquivos HTML. Vamos cabeça de 02 colchetes e eu vou para o meu índice de HTML. Então, onde exatamente vamos adicionar esse texto? Bem, vai cair no menu, mas ainda vai estar dentro do Dave principal, que é o que está aqui, que é o conteúdo branco. Portanto, temos que ter certeza de que estamos adicionando o conteúdo. Mesmo assim, em vez desse David e eu clicamos aqui, você pode sentar aqui. É aqui que fecha. Então logo acima do membro, remova o espaço aqui, logo acima dele, diretamente na faca. O valete. Vou abrir um novo Dev e vamos fazer isso. Vou chamar isso de Dave. Vamos dar a ele uma classe de herói. Tudo bem, então vamos fazer aquele herói, e eu vou seguir em frente agora e simplesmente fechar o Dev para garantir que não esqueçamos mais tarde. Mas dentro deste Dev, vamos abrir outro Dev e podemos chamar isso. Vamos dar uma aula fora de plano para ação. Ok, então vamos nessa chamada Dash Two traço ação. E agora deixe-me ir em frente e fechar esse Davis Well e OK, dentro deste dia. Não vamos começar a adicionar o texto. Vamos com o festival H um tack porque normalmente, isso é o que você quer fazer para sites são para S E O Popper diz, basicamente, basicamente, você quer ter suas palavras-chave como um H um imposto em algum lugar em sua página web. Então é para lá que vamos com a etiqueta H 1 aqui. Então vamos fazer isso. Eu vou abrir uma nova linha, e eu vou usar a tag forte porque notar que em nosso design, a luz de nível aqui é ousada em comparação com o seu negócio é negrito impactante esta bola aqui também, enquanto o outros são regula r. texto. Então é por isso que não há uma marca forte ali. Então isso vai ser forte e nível é o texto, e vai ser nível de espaço acima de você e então o negócio vai ser forte também . Então, como fazer isso em forte. Vamos fechar isso e aqui dentro vai haver um nível de negócios acima do seu negócio. Vamos fechar esse. E então eu vou adicionar a tag break para que o próximo o próximo o próximo texto estatísticas sobre a nova linha. Vamos adicionar essa. E então na nova linha, eu vou dizer construir e eu vivo. Acabei de confirmar o texto novamente. Tudo bem? O impacto impactante vai ser forte. Então que presentes? Ok, entendi. Vamos voltar, construir um e então eu estava vindo aqui. Isso é chamado de um passeio. Vamos fechar uma etiqueta ali. Então construir e impacto, Full Web presença K espaço Web. Senso de imprensa. Ok. E é isso. Vou em frente e fechar a etiqueta 1, está bem? E acho que deve ficar tudo bem. Vamos em frente agora e salvar e vamos ver como isso seria com fresco e ah, ok. Oh , ainda está acordado. Eu estava olhando para cá. Na verdade, é aqui em cima. Ok, o resto do texto está aqui em cima também, nível do seu edifício de negócios edifício impacto para a presença deles. Ok, então obviamente nós vamos ter que fazer um pouco de estilo e colocar bem no centro. Mas vamos em frente e adicionar os botões romenos que temos são serviços e, em seguida, entrar em contato . Então vamos adicionar isso à estrutura HTML também. Por isso, por baixo do H, vou adicionar os nossos botões. Então nós temos a tag h ref é igual e, em seguida, em casacos estavam indo para ir com serviços e então nós vamos apenas digitando nossos serviços. Vamos fechar isso e basicamente a sentinela mais uma vez sobre a diferença aqui é que nós vamos mudar de serviços para contatos. Vamos entrar em contato aqui. Essa seria a ligação do tornozelo para o texto, que seria ah, entrar em contato. Acho que está a ser tocado. Só estou confirmado. Isso é apenas voltar aqui e sim, então entre em contato. O texto está bem? Vá em frente e certifique-se de que está tudo fechado e acho que terminamos. É isso. Então esse Dave está fechado. Esta divisão aqui está fechada. Esse Davis fecha todo o caminho até aqui e então nossa Hedda está fechada. Ok, vamos em frente, salve. E devemos estar prontos para ir agora. Lá vai você. Tudo bem. Então nós temos todo o texto necessário, e então nós também temos nossos fundos são links. Então, Alemanha para o próximo vídeo disponível. Agora, vá em frente e mostre que se parece exatamente com o que temos aqui. 49. Seção de heros de estilo: bem, retornos no vídeo anterior é adicionado com sucesso o texto para a nossa seção de heróis ,bem como , os botões, os nossos serviços e entrar em contato. Mas não precisamos fazer com que esse conteúdo se pareça exatamente com o que temos aqui. Agora. O grande desafio aqui vai ser ter que centralizar mentiras o texto, bem como os botões bem ali no meio da tela que é em cores de fundo. Neste ponto, é fácil, você sabe, alterar o tamanho do seu texto. Tudo isso é bastante simples, mas como você obtém conteúdo no meio da tela? A beleza do CSS é que geralmente há mais de uma maneira de alcançar o mesmo resultado . No entanto, uma maneira geralmente pode ser melhor do que todo o caminho. Então, para conseguir isso, vou mostrar a vocês uma nova maneira de colocar nosso conteúdo bem ali no meio. E para fazer isso, vou apresentá-los a um novo veld para a propriedade de exibição, que vai ser flexível. Até agora, nós lidamos com bloco de exibição em linha em bloco de linha. Mas agora vou apresentar-te um novo Velu Cold Flex. Antes de eu chegar lá, há uma coisa que precisamos fazer. Se eu for para colchetes e der uma olhada no índice de HTML, vamos observar a estrutura com muito cuidado. No topo, temos o cabeçalho, certo? Mas então nós também temos o Dev, que é o conteúdo e, em seguida, amplo. Este Dave basicamente contém todo o conteúdo. Ele contém o nosso logotipo, os itens do menu, bem como a seção Huell. Para que possamos usar o flexor que usa display flex, precisamos definir o contêiner pai para 100% com 100% de alturas. Isso vai ser importante, tudo bem. E, claro, a morte dos pais para o herói dividir aqui está o conteúdo pronto? O dia da aula de conteúdo como os pais, Dave. Então, basta seguir junto. Mas eu vou fazer Eu vou voltar para o Maine, aquele CSS e bem aqui. Mas temos o Hedda. Vou adicionar o nosso CSS ali mesmo. Então digamos, Hedda Space, esse conteúdo então vai ser altura vai ser 100% com 100%. Agora eu sei que esta é a primeira vez que estamos lidando com valores percentuais e não pixels ou a porta View. A vista parte alta da vista com porta. Então, o que exatamente esses percentuais fazem neste caso agora? O que isso vai fazer com o contêiner Dave é que ele vai definir sua altura para 100% fora da altura de seus próprios pais, Dev. Isso é o que a porcentagem faz quando você aplica um valor de porcentagem a um elemento neste caso. Neste momento, ele está aumentado com ele vai definir o aumento com fora do nosso conteúdo lá agora para ser exatamente a mesma altura e com fora de seu próprio pai. Se voltarmos para o índice que HTML, quem é os pais fora do dia do conteúdo da aula? É a Hedda. Mas também lembre-se que já demos o cabeçalho A esconde 100 ver o nosso pH de altura da porta de modo que basicamente a cabeça da luz, ele terá exatamente a mesma altura e com, claro, off 100%. Tecnicamente, você poderia vir aqui e dizer altura 100 VH com 100 VW. É o mesmo que você terá os mesmos resultados. Mas este é o primeiro passo para usar o display flex. Certo, vamos tirar essa do caminho. Agora eu vou descer aqui. Eu vou criar uma nova seção especificamente não para o diferencial Huell. Eu vou vir aqui. Vamos colar isso e certo, eu vou mudar isso para herói. Ok? E agora vamos descer aqui para uma nova linha, dada a turma fora. - Heave! Oh, esse é o Dave. E agora é aqui que a magia acontece primeiro, para que possamos obter o texto para uma linha bem ali no centro, este Dave hold em nosso conteúdo também precisa ter uma altura de 100%. E com 100% de desconto isso é importante para centralizar o texto, certo? Então eu vou voltar aqui, e eu vou dizer com também 100% esconde 100%. Até agora, tudo bem. Agora aqui está realmente magia entra em jogo. Eu vou dizer filmes de exibição, ok. E agora, para fazer os elementos do centro, vou dizer justificar o conteúdo. Esse é um novo público para justificar o conteúdo enviado. Agora somos um leão em forro aéreo horizontal. É preciso um detetive os botões, mas também em um pouco de luz eles verticalmente. Eu vou entrar aqui e dizer a nossa linha e, em seguida, traço e em itens. E então ele vai ser o centro também. Lá vai você. Vou em frente agora e seguro. Vamos voltar aqui. Vamos refrescar. E lá vai você. Agora você pode ver que o texto aqui e os botões estão quase no centro da nossa tela. Mas agora como vamos colocá-los exatamente no centro? Agora, para responder a pergunta, precisamos nos perguntar por que o conteúdo ainda não está no meio? Tudo está bloqueando o conteúdo de chegar ao meio. Bem, vou apresentar o inspetor aqui, e vamos dar uma olhada no que está acontecendo. Então aqui você pode ver que o cabeçalho é toda largura e altura. E, claro, a classe de conteúdo também está cheia e altura também. Você pode ver por que a morte Mas agora se eu descer aqui, note que o dia do herói de classe não está indo altura total de 100% mesmo que já dissemos explicitamente altura 100%, mas não está indo 100%. Está parando bem ali. Por que, isto é, porque nós temos margens aplicadas ao menu e ao logotipo também. - É. Esses muito está indo especialmente para o menu que é o que está empurrando o conteúdo para isso para baixo. A coisa sobre este jogo flexiona que ele vai levar em consideração margens de outros elementos colocados acima dele. É por isso que este conteúdo aqui não está exatamente no centro. Então como fazemos com que a classe de herói da morte ignore as margens ditas pelo menu e o logotipo? Eis exatamente o que vou fazer. Eu vou entrar aqui agora, e eu vou dizer posição absoluta. E lá vai você agora mesmo. Quando pairamos na aula de Dave aqui, agora você pode ver que vai de altura total. Isso é porque você disse que a posição de absoluto e absoluto sempre ignorará padrões, imaginações e todas essas coisas. E se você olhar para o texto agora, é sexta-feira no centro da nossa tela. Então essa é uma informação útil para você. Espero que sim. Nunca volte aqui e aplique essas mudanças que descobrimos. Então, eu vou entrar aqui agora mesmo. Só digo posição e chamamos isso de alaúde abso. E nós também vamos dizer top zero esquerda zero também. É uma boa ideia. É uma boa prática aplicar esses valores também. Então vá em frente, guarde essa. E, hum, lá vai você. Eu vou voltar para o Broza Refresh, e lá vai você. Incrível. Mas temos um problema. Veja, se eu tentar pairar sobre os itens do menu agora, você lê notar que não funciona mais. Por que é isso? Bem, isso é porque nós demos a seção de heróis a altura total porque nós dissemos que a posição é absoluta. E agora é basicamente ficar na frente dos itens do menu e do logotipo para provar isso. Confira isso. Está bem. Vou mudar o com de 100% para 75%. Está bem. Agora você pode ver que é com você pode ver agora que o sobre itens de menu serviços são y equipe O R são todos cobertos. Vários tentam pairar sobre estes. Você pode ver que nada acontece. Mas então, se eu tentasse ter em depoimentos, agora ele começa a andar. Os clientes estão trabalhando. O contato está funcionando. Mas isso é porque a classe de herói fazer com não se estende para além de apenas as primeiras 2 letras fora do item de menu de depoimentos. Isso é o que os Seminoles ainda podem exibir. Clássica divisão pode exibir contato em exibição, mas vendo enquanto os serviços e sobre e não mais este avião. Então, essencialmente, precisamos fazer isso. Precisamos empurrar o conteúdo do inferno atrás dos itens do menu ou empurrar os itens do menu na frente do conteúdo do herói. Então, como conseguiremos isso? Lembra-se da propriedade que podemos usar? É a propriedade Índice Z. Sem propriedade, podemos empurrar o conteúdo para a frente, todos atrás. Então vamos fazer isso semelhante mudar o com volta para 100%. Ok, mas agora eu vou para a classe Naff e dar o índice Naff classe Z de digamos 10. E agora você pode ver que os itens do menu estão agora andando um jogo. Então lá vai você, a energia desligada a propriedade do índice Z. Então vamos fazer isso. Eu também vou nos dar o índice para o logotipo, bem como, apenas para uma boa medida. Então eu vou voltar para colchetes e vamos fazer isso. Então Menu, eu vou dar a isso um índice Z off. Digamos que 10. E então vamos também dar para a banda também, porque esse é o dia do conteúdo são logotipo. Então vamos dar Z Index e vamos dar desenvolvido fora. Nove. Lá vai você. Isso é seguro. Vamos voltar para as contas são atualizadas a página e lá vai você. Incrível. Agora, Mas precisamos fazer é simplesmente aplicar nosso estilo em nosso texto e nossos botões também. E para fazer isso, eu vou voltar para parênteses, obviamente. E, ah, vamos fazer isso. Certo, vou abrir a nova classe de chamada à ação. Vamos abrir as chaves do nosso colega para que a cor seja branca. Serão para o texto com 456 textos. Uma linha vai ser central também. E o que mais temos? Temos o tamanho dos livros. Vamos com o tamanho do livro na propriedade. E, claro, a caixa de borda será o valor porque agora vamos adicionar algum preenchimento e as válvulas padrão serão 10 pixels. Isso é bom com 10 pixels está indo 50 pixels e também 10 pixels. Há uma maneira mais curta de escrever esses valores, quais já falamos. Então tente descobrir questão que temos direitos nos quatro valores para o pátio. Essencialmente, você só terá três Veloso a culpa para que você possa se dar aquela pequena tarefa e, hum, ok, então vamos em frente e salvar isso. Vamos voltar aqui cada fresco e olhar melhor. Certo, mas vamos fazer o tamanho muito maior agora. O H um tag, que é o que está mostrando o conteúdo do herói contra a direita aqui. H um h um foi definido para o que validado? Damos o H. É como cinco pixels. Isso é meio pequeno, Então vamos tomar este caminho antigo para 40 pixels e talvez h para se tornar idade para 25 pixels e, em seguida, talvez HDB podemos fazer HDB 20 pixels. Por agora. Talvez precisemos mudar é um pouco mais tarde, mas vamos guardar como estão. Volte aqui. Vamos atualizar e OK, agora que é muito, muito melhor do que o que temos atualmente. Nossa capa. Impressionante agora para os botões notar aqui que eles compartilham semelhanças no tamanho da fonte , o caminho da frente, os padrões também. Então o que precisamos fazer é fornecer-lhes a mesma classe e aplicar a mesma para protestantes, aquela classe em particular. Então vamos fazer isso. Vou voltar para colchetes. Vamos passar para indexar dot html. E agora aqui, onde temos o treff A. Eu vou entrar aqui agora e dar a aula fora. Vamos chamar o botão de classe porque é um fundo. Mas eu também vou dar outra aula para os serviços porque notas é que a grande diferença entre ambos é a cor de fundo. Então vamos ter uma classe extra que irá aplicar o fundo roxo e também o fundo verde . Então, nossos serviços teremos uma aula fora do roxo, ok, e agora para o contato, podemos dar o botão de desligamento da classe também, e depois espaço e depois verde. Isso vai ser para os fundos. Vamos em frente agora e salvar isso. E agora vamos voltar para o Maine, diz o Docs. E vamos começar a aplicar os botões. Então, para os botões, eu realmente vou aplicá-los logo abaixo da Hedda. Eu acho que o meu melhor auto vamos jogar abaixo do nosso parágrafo. Então, vamos entrar aqui. Vou copiar isto e, em seguida, aqui em baixo, vou mudar o parágrafo dois botões. Você vai ficar bem. Então temos botões e vamos começar. Ok, então a primeira classe, é claro, será comprada em si mesma, e nós temos uma série de válvulas para fornecer o botão. O 1º 1 que vai ser o telefone ao tamanho, o que é claro, vai ser 15 pixels. Eu vou adicionar o peso da frente também, que eu sei que são 400 são a cor do texto. Claro, não vamos esquecer essa. Vai haver F f f f f f f f f, e precisamos remover a decoração do texto também, porque os links estão na terra automaticamente. Então, vamos remover os links. Então, essa pergunta não seria nenhuma. E, ah, o que mais temos? Vamos em frente e salvar isso. E vamos dar uma olhada no que temos um fresco e, uh, ok. forma de Textron, eu acho, deve estar em ordem. Transformação de texto. Podemos ter um pouco de estofamento. Adicione algumas margens também. Então vamos fazer isso. Tudo bem, eu vou voltar aqui. Vamos fazer o texto. Transformar. transformação de texto será maiúscula. Certo, vamos adicionar a margem. Vamos com 10 pixels. Por enquanto, podemos mudar isso. Vamos lá. 10 pixels e tapinhas. Claro, vamos adicionar esse fundo muito, muito em breve. Vamos lá. 10 pixels e 20 pixels e ah, vamos com isso. Jogue no bloco de linha também. Certo, isso deve ser bom. Ah, vamos no raio da fronteira para que possamos fazer as fronteiras um pouco. Circulares vão três pixels e estamos bem. Ok, próximo que eu vou fazer agora seria adicionar ao fundo real Kahlo. Então nós temos roxo vai ser o primeiro 1 Então por pool e eu tenho a cor fundo chamador de fundo para Pop Earl vai ser 40 b sete f f e vamos também fornecer sua borda, que seria um pixel. Vai ser sólido, claro. E depois as cores dos nossos limites. Vês? O que eu tenho? 1/2 cc sete para F. Ok, vamos fazer algo muito semelhante para o botão verde também. Vou me acalmar aqui. Vamos adicionar o fundo, uh, chamador aqui, que seria o que eu tenho? Eu tenho oito c b 913 E, finalmente, vamos também adicionar a borda, que vai ser um pixel sólido também. E o vale final será d a f 37 estar bem. Acho que isto deve ser bom. Vamos em frente agora, salvar e ver o que temos. Um fresco. E lá vai você. Na verdade, não é assim tão mau. Ok, incrível. Incrível. Incrível. Sabonete incrível com muito estilo lá dentro. Finalmente conseguimos fazer o nosso conteúdo parecer quase como o que temos aqui. Exceto pelo fato de que esperar um segundo. O frio aqui não é exatamente o mesmo. O que está acontecendo? Um membro acabou de confirmar isso muito, muito rápido. C c um 03 d d oito. Oh, ok. Eu peço desculpas. Deve ter cometido um erro com a cor de fundo. Vamos mudar isso rapidamente. Vamos voltar aqui. E essa era uma cor diferente que eu escolhi. Peça desculpas por isso. Ah, deixe-me verificar. Está bem. Você deveria ser curry. Vamos em frente agora e salvar isso. Vamos voltar aqui. Vamos refrescar. E lá vai você. Ok, isso é muito mais parecido com tudo. O meu. Eles foram durou. Claro que sim. Agora é que você notaria que há um efeito quando passamos o mouse sobre os botões. Você pode ver que ainda não temos isso. Então Alemanha Pfennigs vídeo onde eu vou agora mostrar-lhe como teve alguns efeitos de pairar legal para seus botões. 50. Transição dos botões: Bem, volte. Então vamos agora dar uma olhada em como podemos aplicar os efeitos de transição aos nossos botões. E aqui, bem, nós temos, nós temos, basicamente não é nada realmente extravagante. A grande mudança aqui é a garrafa Coehlo o único para roxo muda para azul claro e o outro para verde muda para branco. Então vamos em frente e fazer cardo. Vou voltar para colchetes, obviamente, obviamente, e vamos adicionar a aula de roxo de novo. E o que vou fazer agora é mudar a fronteira. O Coehlo. E a chamada que vamos estar indo com vai ser 40 será sete f f então meu cólon fora do curso eu vou adicionar o seletor de pairar. Não vamos esquecer isso. Uh, caso eu vou copiar isso e nós vamos fazer exatamente a mesma coisa para verde também. Então deixe-me mudar a classe roxa para a classe verde. Mudamos a cor da manteiga para 123456 branco e esfriamos. Então é isso para o pairar nossa ação efeitos. Agora vamos em frente e aplicá-lo a transição em si para nossos botões. Então vamos entrar aqui em transição e vamos mudar a fronteira, Coehlo. Porque a propriedade, nós vamos mudar. Alguém chame a lei. Vamos com 0.4 segundos e vamos aliviar. Isso é ir em frente, salvar e bolívar deve definir. Isso está voltando para cá. Essa é a primeira página. E lá vai você. Então 0,4 segundos talvez seja um pouco lento, mas , ainda funciona. Ok, agora que estamos aqui, eu quero usar esta oportunidade para aprofundar um pouco mais o mundo das transições e só para mostrar alguns truques que você pode realmente aplicar a coisa aqui. Isto está bem? Você pode realmente aplicar transições sem sequer ter que escavar sobre o elemento agora . Os efeitos são realmente aplicados. Se ele notar que quando atualizarmos a página, olhar imediatamente para a parte inferior, você verá a transição realmente acontecendo. A garrafa chama realmente mudando quando eu atualizo. Olhe para isso. Você vê isso? Eu vou fazer isso de novo. Está bem. Espero que você tenha visto isso, mas para demonstrar isso melhor. Vamos fazer alguma coisa. Está bem. Vou voltar para colchetes e onde temos o botão. O que vou fazer é isto, vou entrar aqui. Vou mudar a transição da fronteira. Coehlo para a cola de fundo agora. Ok, então veja isso. Vou salvar isso e vamos ver o que vai acontecer. Tudo o que voltar para as minhas contas é atualizar a página e lá vai você. Isso é um pouco rápido demais. Deixe-me mudar o tempo, na verdade, de 0,4. Vamos envelhecer com os seus quatro segundos em vez disso. Então você realmente vê do que eu estou falando? Vamos voltar para ela. Mas eu era Ah, bem, primeiro a página. Agora olhe para os botões. Está levando quatro segundos para o dedo do pé Bagram Col realmente se sentir em, e isso é por causa de aplicar para a transição diretamente no botão. Então, se ele também Harvard aqui, nós realmente não vamos ver o saco ea mudança de cor porque, bem, é claro, é claro, nós não adicionamos a cor de fundo para o efeito de pairar para mudar. Mas porque se tivesse uma cor de fundo diretamente na transição para o botão em seus estados padrão agora, sempre que simplesmente se refere a página de um carregamento da página, a cor vai aplicar lentamente em um efeito de transição. Então a pergunta pode ter você é OK, tudo bem. Mas e se não quisermos que o saco despido para a transição quando carregamos a página, mas apenas quando nós realmente ho sobre os botões. Como é que conseguimos isso? Bem, para fazer isso muito simplesmente, o que você pode fazer é remover o efeito de transição da classe inferior, que é o frio. Claro, os diferentes estados. Você pode remover isso e, em seguida, simplesmente aplicado diretamente sobre os estados pairar para roxo ou verde tudo o que poderíamos fazer aqui em vez porque simplesmente, digamos, Boughton. E então poderíamos jogar o HOA va selecionável. E agora aqui podemos entrar e aplicar a transição. Então, basicamente, agora. Mas este código estava dizendo Ok, quando um usuário paira sobre o elemento da classe de botão transições Baghlan Coehlo por quatro segundos e para realmente ver o efeito, vamos aplicar alguns Baghlan perto dos efeitos hover agora para roxo e Verde. Então, para roxo, posso dizer que a cor de fundo deve mudar para ler quando passarmos o mouse sobre o botão popular e para o botão verde, ele deve mudar de cor passada. Deve mudar. Digamos que cor-de-rosa todas as roupas da parede cor-de-rosa. Então vamos ver o que vai acontecer. Está bem? Vou guardá-lo agora mesmo. Vamos voltar aqui. Agora o quê? Vou refrescar-me. Certo, bem normal. Mas agora, se eu passar o mouse sobre o botão roxo, você pode ver agora que ele muda para vermelho e eu vou para verde e transições para rosa nos segundos completos. É assim que você pode alcançar tais efeitos. Então, para recapitular, você pode aplicar a transição que você falsificou diretamente em um estado padrão de elementos, que é , claro, quando o elemento é carregado ou você pode aplicar especificamente o cursor seletor. Eu sou assim você pode aplicar a transição especificamente para o todo para seletivo para tal elemento . Uma multinacional mencionada é que, além de especificar qual propriedade você deseja fazer a transição da duração, bem como efeito de atenção, você também pode jogar algo conhecido como o atraso de transição. Basicamente, será um tempo que terá que passar antes que a transição realmente comece. Isso é o que é chamado de atraso. Então, como exemplo, vamos fazer isso. Está bem. Onde temos o pairar para o botão. Vou entrar aqui agora e dizer cinco segundos. , Basicamente, antes que a cor de fundo comece a mudar, vamos esperar cinco segundos. E depois de cinco segundos, começará a transição e terminará em quatro segundos. Espero que isso faça sentido. Vamos em frente. Salve isso. Vamos voltar para um poza. Vamos atualizar a página. Agora dê uma olhada nisso, ok? Vou pairar sobre o Popil. Não está mudando. Não está mudando. Não está mudando. Não está mudando. Enquanto isso, cinco segundos estão em contagem regressiva agora. Cinco segundos, Expatriados. Agora está começando a mudar seu pago em transição, certo, como você pode ver, a mesma coisa para verde também. 2345 E agora começa a mudar. E depois, em quatro segundos, vai para o pagamento. Então essa é outra coisa que você deve saber. Transições CSS. Agora a pergunta pode ter sido. Aqui está OK, aí está a ordem. matéria diz que temos que defendê-lo como temos um por toda a duração. Temos um para o atraso. Não importa qual deles vem primeiro. Importa porque CSS sempre reconhecerá a primeira vez que um como a duração. É assim que o CSS funciona, portanto, sempre que você estiver adicionando um temporizador para sua duração e seu atraso , o que você adicionar primeiro será considerado como a duração. Essa é uma das coisas importantes que você deve tomar nota. Então isso é basicamente comer para os números de transições. Vá em frente e remova o que realmente não precisamos, que é o saco na cor, os efeitos sobre o botão e também treinar de volta no mais frio, roxo completo, eu acredito. E oh sim, deixe-me voltar e adicionar a transição para a transição da classe de reserva. Buda. Coehlo é a propriedade e nós não fazemos em 0,2 segundos e estamos diminuindo. Okeydokey. Vamos dizer que é só voltar. Certifique-se de que tudo está em ordem. Eram primeiro uma página e lá vai você. Incrível! Tudo bem, então é isso. Completo em, em transições para os nossos botões alemão Avonex vídeo disponível Agora começar a adicionar a seção sobre . Eu te verei então 51. Construindo a seção de About: Bem, volte. Até agora, tudo bem. Nós fomos capazes de construir completamente a cabeça para fora com um logotipo, itens de menu, seção de heróis, bem como a imagem de fundo. Mas, em seguida, temos que construir a seção sobre os EUA, que é essencialmente a segunda parte principal de todo o site. Agora, aqui, eu já fui em frente para adicionar a estrutura HTML básica para a seção sobre ALS e deixe-me mostrar-lhe o que eu tenho entre parênteses. Então, é basicamente aqui. Eu adicionei o conteúdo frio seção aderência. Eu dou uma identificação identificação , então liguei-me para dar uma ideia. E então nós tivemos o Dave do conteúdo, que vai estar usando uma e outra vez e então a idade para marcar sobre todos e depois Pete Sacks para a premiada empresa de desenvolvimento Web e sucessos em um blah, blah, blah. Então eu adicionei em você surdo com o papel de classe fora, que vai falar sobre um pouco mais tarde. Mas dentro temos a cabeça do tweet H de quem somos alguns pitak fortes tags e ah, é basicamente isso. Então você pode ir em frente e simplesmente pegar este código e simplesmente colar. Está no seu documento de texto. Se você quiser fazer, é um vídeo de compositor. Faça isso e não vamos avançar e projetar a seção sobre tudo. Então vamos dar uma olhada no que temos que realizar. Então aqui você pode ver que a perda sobre tem um tipo de azul na linha, que vai dar uma olhada um pouco mais tarde. Consideramos que o texto aqui é em direção ao centro. O texto aqui para o nosso sucesso tem o estilo de telefone de itálico. Ele também tem um peso frontal de cerca de 300. Mas é aqui que as coisas ganham interesse irmão em você notaria aqui, embora isso seja como uma seção de duas colunas na coluna que temos quem somos na outra coluna. Nós temos o que fazemos, e eles têm alguns ícones verdes, e também o texto parece estar alinhado a este centro. Então um passeio muito interessante por aqui. Então vamos fazer isso. A primeira coisa que vamos fazer é voltar para colchetes, e quando eu vou fazer é simplesmente criar dois novos Dave para quem somos e o que fazemos seções. OK, então veja isso. Eu vou entrar aqui agora mesmo em um novo DIV. Vamos dar uma aula a este Dave, e aqui está o nome da turma que vamos dar. Vai ser chamado de “Dash um traço para a aula”. Isso geralmente é o padrão em CSS ou HTML, sempre que você estiver tentando criar uma classe cheia de uma seção de duas colunas. Se fosse uma seção de quatro colunas, então você iria apenas um traço para a frente sobre isso um pouco mais tarde. Mas foi isso que fez para os primeiros credores de diversidade. Vá em frente e copie esta aula, e então nós vamos fazer exatamente a mesma classe aqui também para o que nós fazemos. Vamos seguir em frente e acelerar isso e sair do curso. Vou em frente agora e fechar as regras. Vamos fechar a 1ª 1 e, claro, fecharemos a 2ª 1 aqui também. Vamos em frente e fechar isso e OK, então com sucesso agora tem de Dave um para o que fazemos e outro para o que somos. Vamos em frente agora e adicionar um pouco de estilo, então eu estou apenas salvar o documento HTML. Primeiro de tudo, vamos para baixo para o CSS de ponto principal. Agora, o que eu vou fazer é criar uma nova seção e contagem porque agora estamos lidando com o layout do conteúdo. Essencialmente. Então, ah, vamos fazer isso. Apenas, vamos ver, logo abaixo dos botões vai entrar aqui, peça isso, peça isso, e vamos chamar este layout de seção Lee fora. E OK, então a classe off call ascendente chamar Dash um traço para o que vamos fazer aqui é dar as vidas com tal classe A com off 48,5% não vai ser 50% porque ainda temos que aplicar em margens e padrões também. Então você normalmente quer viver algum espaço para isso. Então, vamos com 48,5. E, claro, falando de margens, iria dar-lhe uma margem ou dar-lhes uma margem. Digamos 1% e zero e, em seguida, um por cento também, e outro 1% deixá-los ir em frente e adicionar o meu cólon. E também sei que vamos adicionar um pouco de estofamento para eles. Então, aqueles que vão de zero e 15 pixels não vamos esquecer que o livro Size tem uma caixa de borda muito, muito importante, e nós também vamos flutuar para a esquerda. Então vamos fazer isso também. As probabilidades são ponto-e-vírgula, e isto deve ser finalizado. Vá em frente agora e salve e vamos dar uma olhada no que temos. Vamos voltar aqui. Refresque. E lá vai você. Incrível. Então agora, pelo menos, temos as duas colunas de vida lá, mas ainda temos muito trabalho a fazer. Vamos começar com o premiado e o sucesso. Então vamos em frente e tentar estilizar essas duas tags de parágrafo. E para fazer isso, vamos voltar para o nosso índice HTML do arquivo html e vamos dar-lhes uma classe individual . Então, para a primeira tag P, podemos dar a este uma classe, e vamos dar a este uma classe de ferramenta tailandesa Dash um. E então, para a segunda tag p, vamos ter uma classe P off vai para um título. Dutch, também. Oh, garoto, parece bom. Vamos salvar essa. Vamos agora aplicar alguns CSS para isso. Vamos para a seção de parágrafos. Então aqui, só para baixo. Ele vai entrar aqui agora e eles vão dizer, P dot título Um, traçar Juan e vamos em frente agora e aplicar um pouco de estilo no tamanho do telefone deles. Acho que vamos usar 17 pixels. Eu não sou inteligente. Talvez precise mudar isso. Pode ser um pouco pequeno demais. Pesos dianteiros. Vamos com 400 mensagens de texto por linha. Claro que vamos ao seu centro. Ah, a cor também vai ser 777777 e um semi-cólon. E para o primeiro título P, a margem aqui será de 25 pixels, 14 pixels e depois 14 pixels. Então, basicamente, o escape defeito para os 40 pixels superiores esquerda e direita para 10 pixels a partir da parte inferior. Vou continuar copiando tudo isso, e faremos algo muito parecido para o título P para sua pasta. Mude 1 para 2, e a arte A 42 vai ser um pouco menor. Vamos tentar 15 pixels. Ah, peso frontal fora 300 descida indústria têxtil também são a cor é realmente 888 que é semelhante 456 Nossa margem vai ser apenas 14 pixels ao redor. Vamos em frente e adicionar falha em pixels. E há mais uma coisa. Oh, sim, o estilo divertido. Não vamos esquecer o estilo da fonte. Vai ser o nosso itálico. Ok, vamos em frente. Guarde isto e vamos ver como isto se pareceria. Vamos voltar para dentro. Aqui se refere a página e lá vai você. Então, obviamente, o tamanho divertido aqui é muito pequeno. Muito, Muito, muito pequeno. Precisamos fazer algumas mudanças importantes. Oh, ok. Então vamos tentar algo aqui. Vou percorrer todo o caminho com 26 pixels. Na verdade, píxeis de detetive da escola, talvez 30 pixels pareça muito melhor. E então, para o 2º 1 o Peter vamos tentar 24 pixels. Vamos ver. Certo, o definitivamente parece muito melhor do que o que tínhamos inicialmente. Então vamos com 24 pixels para o título P para e em para Peter para título P, 1 30 pixels. Então, 30 e 24. Ok, vamos fazer este trocadores 24 aqui e depois 30 para Peter dedo do pé um. Vamos em frente, salve. Vamos voltar para um Broza foram primeiro uma página, e lá vai você, todo o caso, então estamos quase lá. Mais uma vez que você precisa mudar, no entanto, vai ser o tamanho fora do texto sobre os EUA. É a idade de marcar. Então vamos voltar aqui para os pés e talvez tenhamos idade. Temos cada um a 25 pixels? Na verdade, se vamos fazer a idade de 140 pixels, isso deve ser um pouco maior do que, de fato, escolhas. Além disso, vamos tentar 52 pixels. Vamos salvar essa. Vamos voltar aqui. Vamos primeiro uma página e OK, nada mal. Está parecendo muito, muito melhor que será originalmente tido. No entanto, precisamos adicionar algum preenchimento para a nossa seção porque se ele perceber, há mais espaço entre o ALS e o saco, uma imagem que tudo o que temos atualmente aqui. E isso porque a seção em si tem algum sabonete de preenchimento. Vamos avançar agora e direcionar a tag de seção em si, que, aliás, a tag de seção geralmente é usada sempre que você estiver criando nossas novas seções em seu site. Então, se dermos uma olhada no modelo disse que temos aqui sobre nós vai ser uma Seção sete é fornecido será uma seção onde os trabalhadores serão uma seção e assim por diante e assim por diante. Então, tipicamente para a classificação, você usaria essas gravações na tag. Você poderia usar uma div no lugar fora da seção e simplesmente dar-lhe talvez uma classe fora da seção. Mas já que estamos tentando ser o mais preciso possível com o código, vamos usar a tag de seção html em vez disso. Então vamos em frente agora e adicionar um pouco de pat na tag de seção e vamos fazer isso aqui onde temos layout Tudo bem, então ele vai vir aqui, e nós apenas chamamos esta seção sobre, Ok, então Basicamente, o padrão vai ser Nós temos 50 pixels, nós temos zero pixels e então finalmente nós temos 45 pixels. Então, basicamente, os pixels do topo, então zero pixels à esquerda e à direita, e então 45 pixels são da parte inferior. Então vamos em frente. Agora, salve e vamos voltar aqui para a primeira página. E lá vai você. Tão parecendo muito, muito melhor. Finalmente, vamos notar que o que e. R. R. Tex e o que fazemos o texto está alinhado ao centro. Como você pode ver, ele fica no centro da Aliança Agora, tecnicamente, nós poderíamos simplesmente voltar para o nosso arquivo buckets e, em seguida, aqui, onde temos o CSS mental porque simplesmente entrar aqui e dar centro de alinhamento de texto para o traço de carvão um traço para, porque esta é a classe. Segure o conteúdo de quem somos e o que fazemos. Poderíamos fazer isso. Mas não é a melhor ideia, porque mais adiante, talvez precisemos usar essa aula chamada Ash. Wander ficou para criar outra seção de duas colunas, e nesse cenário podemos não precisar que o texto seja alinhado ao centro. Então, para evitar tais problemas no futuro, vamos apenas criar outra classe e podemos chamar isso de um centro. Então vamos fazer o mesmo aqui que, bem, Sentelle. Está no centro para a segunda coluna também, e então facilmente, eu só estou salvo isso. Podemos voltar para o Maine que CSS e aqui mesmo onde temos o layout chegando aqui ou melhor, vamos descer aqui para o conteúdo. Na verdade, vamos fazer todos os conteúdos. Então, para conteúdo, vamos chamar este centro de um ponto e então eu vou apenas dizer quaisquer elementos com a classe fora do centro. Basta dar-lhe uma linha têxtil fora do centro. E lá vai você. Vamos em frente agora em segurança. Volte para se opor à nossa atualização da página e lá vai você. Assim, a Alemanha, muito próximo vídeo disponível, não vai começar a adicionar um pouco mais de estilo ao nosso sobre também seção. 52. Criando a seção de serviços: Bem, retornos. Em um vídeo anterior, adicionamos com sucesso o conteúdo para a seção sobre os EUA e eu disse que íamos fazer alguns projetos. No entanto, se você dar uma olhada no site acabado aqui, você pode começar a notar algumas semelhanças de uma seção para a outra como um exemplo aqui para o vital vai notar que temos estes tornozelo. Um link no qual eles foram clicados vai nos levar direto para o topo da página. Nós temos os títulos que têm a fronteira azul bem ali, algo com serviços prestados por caminhada com a gente e assim por diante e assim por diante. Então também você vai notar o número de diferentes Aikens disponíveis que somos tem e eu considero esquerda. O que fazemos tem The Headers de Icann insensível, mas também tem Icann e tantos outros cabeçalhos em nosso site também têm sabão Aiken. O ponto que eu estou tentando dizer aqui é que é sempre melhor que você descubra o tipo de conteúdo que você pode criar e o tipo que você pode adiar para mais tarde. Normalmente, o conteúdo que você deseja adiar para mais tarde é conteúdo que você reutilizaria repetidamente em todo o site. Então, o estilo na mão, este caso agora preencher os títulos para as seções como sobre também forneceu que podemos aplicar isso mais tarde. Mesma coisa com os Aikens como o que podemos ignorar os ícones por agora e simplesmente aplicá-los são muito mais tarde. Mas, por enquanto, vamos apenas nos concentrar em construir outros homens em seções, bem como o conteúdo da chamada e também adicionar alguma posição que é única para essa seção em particular. Então, neste caso, agora, eu tenho que aqui para adicionar o núcleo html estrutural para a seção de serviços prestados. Então, se você passar para colchetes bem aqui, você pode ver que eu adicionei a nova seção fora I d serviços. Eu adicionei sua classe de conteúdo, bem como o H dois título que é serviços prestados e, em seguida, o você bem para a lista ordenada e, em seguida, os elementos Aliados e, em seguida, h 34 desenvolvimento Web e, em seguida, em Norther Ul para os itens da lista em que cada partícula o nosso serviço. Então vamos quebrar isso com muito, muito cuidado. Você vai notar aqui mesmo que nós temos uma espécie de lista dos principais serviços e, em seguida, serviços que se enquadram nesses serviços principais. Então temos o desenvolvimento da Web como exemplo. Então é por isso que temos o primeiro aliado aqui. E então é um HDB porque é um desenvolvimento Hedda Web. E então no item da lista em particular, temos serviços que possuíram o serviço de vigília. Assim, sobre o desenvolvimento Web, temos sites personalizados que temos com aplicativos e lojas de comércio, Web progressiva, APS. É por isso que decidi criar outro mínimo dentro da primeira lista, se isso faz sentido. Assim, a mesma estrutura é um jogo para o desenvolvimento de APP móvel. Você é você X projeta jogo móvel desenvolvido homem para colocar o design, migração de nuvem, garantia de qualidade, otimização suave. E então, finalmente, nossa segurança cibernética é tão, em última análise, que é isso que você vai ficar com. Você terá seu H dois, que é o serviço fornecido título principal para a seção, e então você terá seus principais serviços e, em seguida, os sub serviços que caem sobre eles. Mas de alguma forma temos que fazer com que isto pareça com o que temos aqui. Então vamos tentar abordar o estilo mais fácil que podemos aplicar, e essa será a imagem de fundo para esta seção. Então, para fazer isso, quando eu vou fazer é eu vou voltar para os suportes e vamos fazer isso. Eu vou para ir em frente e adicionar uma classe de seção para os serviços, a idéia é que se você notar que temos todas essas seções que têm imagens de fundo , por exemplo, conhecer a equipe tem uma imagem de fundo, e nossa limpeza também tem uma imagem de fundo. Então pode fazer sentido para nós apenas criar uma classe que podemos usar para essas três seções diferentes que têm imagens de fundo. E a aula que vou usar para isso vai ser, ah, eles. Voltem para os meus suportes. Vamos gastar isso então vai ser por aqui, mas eu tenho minha seção i d. Vamos dar uma sala de aula que usamos uma e outra vez, e essa classe vai ser imagem traço BG. Tudo bem, esta será uma aula que vai usar uma e outra vez. Deixe-me ir em frente agora e simplesmente salvar isso. Não vamos passar para Maine dot CSS e vamos ser começar a adicionar algumas pedras para o 1º 1 aqui. Vamos tentar adicionar a imagem de fundo ou temos aqui. Então, para que não seja, vou tentar criar uma nova seção especificamente para serviços. Então vamos fazer isso. Vou pegar o título aqui mesmo. Vamos copiar isso. E, em seguida, alguns deles vêm até aqui. Vamos acelerar isso. E podemos mudar Shiro também. Ah, vamos mudar para os serviços veio serviços. E agora vamos criar a classe. Sinto muito, mas temos um 80 aqui para serviços. Certo? Então vamos fazer isso. Eu vou entrar aqui agora, e eu vou dizer serviços, e então nós vamos fornecer a imagem de fundo. Em quarto lugar. Então eu vou abrir minha coluna, aparelho. Vamos descer aqui. Tudo bem, então vai ser imagem de fundo, e eu tenho a estrutura bem aqui, então vamos dar uma olhada nisso bem rápido. Tudo bem? Vamos tocar a Lena. Ótima. E lembre-se, somos jogados ingredientes magros, Alia. Então vai ser tudo G B A e os primeiros votos que tenho aqui são 000 e depois 0.2. Então não é realmente isso que é capacidade. Então não vai ficar muito escuro. Vamos repetir aquele ali dentro. Coma RGB novamente e, em seguida, dentro do mesmo valor. 000 e 0,2. Espero não estar cometendo nenhum erro. E OK, coma e então não vamos agora adicionar o seu de l para a imagem em si. Então aqui temos nossos casacos, temos pensamentos para escapar, e então serão imagens. Quatro barra Nós temos fundo como a pasta por terra, e então ele vai ser serviços ponto j p g. Vamos em frente e adicionar um semi dois-pontos. Vamos em frente agora salvar e ah, vamos dar uma olhada no que temos que voltar aqui. Vamos refrescar e lá vai você. Tudo bem. Até agora, tudo bem. Temos o saco na imagem bem ali. Ok, eu vou aplicar um pouco mais de pé agora para a classe. Eles estarão usando uma e outra vez para as seções que têm uma imagem de fundo. Então veja isso, vou voltar para colchetes. Vamos voltar ao nosso indexado com HTML. Então aqui nós já adicionamos a classe de fundo traço de imagem. Então vamos em frente agora e adicionar um pouco de estilo para esta classe muito específica. E para fazer isso, vamos para esta seção uh, área. Então, como aqui nós temos problemas sexuais como eu vou entrar aqui agora e vamos chamar isso uma seção pontos. Seja imagem muito imagem traço BG. E então vamos abrir o aparelho Kohli. Então vamos mudar o tamanho do plano de fundo que eles iriam aplicar. Vamos com cobertura, está bem? E então também podemos adicionar uma cor de fundo para essas seções que têm melhor. Uma imagem que vai ser 555555 Vamos adicionar a posição de fundo, bem como para que possamos mudar. O ângulo a partir do qual as imagens serão exibidas a partir daqui vai ser inferior e central. E se você notar é que se nós voltarmos, se você notar bem aqui, o saco em imagens não se movem. Eles não rolam. Enquanto descemos sobre a escola, eles não se movem, então você já deve estar em nenhuma propriedade Walt que estamos falando. Essa vai ser a propriedade de anexo de fundo. Então vamos em frente e adicionar isso também. Vou entrar aqui agora mesmo. Vai ser de fundo. Ah, anexo traseiro do traço e vai ser consertado, ok? E é basicamente isso. Vamos em frente agora e em segurança e vamos dar uma olhada no que temos atualmente. Vamos atualizar a página e lá vai você. Ok, estamos começando a chegar lá. Mas agora vamos tentar e fazer algo sobre o conteúdo real que temos dentro. Você notaria aqui que o conteúdo é na verdade da mesma cor, mas eles estão todos cobertos porcolunas de fundo brancas, colunas de fundo brancas, e parece muito bom. É com ele muito melhor do que o que temos atualmente. Portanto, há uma propriedade muito agradável que podemos usar, e que vai ser o display flex. Lembre-se, usamos display flex para alguns dos conteúdos, ou Pierre para especificamente para itens de menu. Então vamos tentar aplicar o mesmo processo aqui também. E para fazer isso, verifique isso. Acho que vou voltar ao nosso índice de ex Tamil. Vamos adicionar uma classe completa, O principal u l e foram essencialmente visando o u L. Porque é o elemento principal segurando todos os serviços menos, bem como os serviços de sabão também. É onde eu entro especificamente nesta UL bem ali no topo. Então, o que vou fazer aqui, vou dar uma aula, está bem? E podemos chamar a classe, Digamos que serviços traço lista coisa que faz todo o sentido. Vamos em frente, salve Vamos voltar para um médico principal diz. E, em seguida, aqui na seção de serviços, vamos agora adicionar alguns serviços de estilo lista de traço. E agora veja isso. Vou até aqui agora e dizer “Display, Flex”. Então vamos fazer isso. A exibição vai ser filmes, está bem? E agora você pode realmente especificar a direção do nosso flex em Still para dizer isso. Confira isso. Eu vou entrar aqui agora e dizer direção flex traço. E agora eu vou com Whoa! Vamos em frente. Guarde isso e vamos saber, ver o que temos para voltar aqui. Vamos atualizar a página e lá vai você. Agora você pode ver porque nós dissemos, Ei, direção flexível é uma linha. Ele vai exibir todos os elementos todos os serviços de lista em um único ponto baixo, como você pode ver agora, no entanto, notar que todos esses itens estão dentro de nossa classe de conteúdo que tem um máximo de um poder no 140 pixels. Então, sempre que você exibe seus elementos como um flex, eles tendem a quebrar a estrutura. E eles podem até mesmo doadores se mover para fora do contêiner. Agora, se você notar com muito cuidado o conteúdo da segurança cibernética, nossa lista aqui. Estes aqui, eles saíram do contêiner de 1000 vagando pelos pixels. Então, a fim de corretamente e mostrar que você está itens flexíveis são ficar dentro de todo o recipiente. Temos que adicionar outra propriedade, e essa propriedade aqui vai ser o rap flexível. Está bem. E aqui vamos dizer tretas. Vamos em frente. Agora vamos salvar isso. Vamos voltar, refrescar. E agora você pode ver agora que eles estão contidos dentro do recipiente. Portanto, esta é uma propriedade muito, muito importante que você precisa ter em mente sempre que você exibir itens como um flex e você obtê-lo. Se Lex, direção de O ou coluna ou o que quer e mostrar que você é também incluir o envoltório flexível embrulhado velho e mostrar que seus itens flexíveis estão contidos dentro do recipiente. Vamos adicionar um extra. Colocá-lo desta forma para o seu padrão vai ser zero e, claro, o tipo de estilo menos. Vamos em frente e remover o estilo padrão, então isso será definido como nenhum. E isso é praticamente vamos em frente. Agora guarde isso. Vamos voltar para nossos sinos são refrescantes e lá vai você. Ok, nós ainda temos muito trabalho a fazer em termos de como estilizar os itens reais da lista. Mas antes de eu em torno deste vídeo, você vai notar que o conteúdo fora da seção sobre EUA está realmente derramando dentro da seção de serviço prestado e direito contra o texto para quem nós somos, o que fazemos. Eles estão praticamente dentro da seção para os serviços. Então, o que exatamente está acontecendo aqui? E como consertamos o vídeo alemão da Avonex? Aposto que vou mostrar-lhe um clássico define um strick para corrigir este tipo de problema 53. A propriedade clara: bem-vindo de volta no vídeo anterior é adicionado com sucesso conteúdo para a seção de serviços. No entanto, também notamos que o conteúdo da seção sobre é basicamente derramando sobre esses serviços seção. Então, neste vídeo, vou compartilhar exatamente o que está acontecendo e como podemos corrigi-lo. Mas antes de tudo, por que o conteúdo está se espalhando? Bem, se você se lembra, nós demos as duas colunas no sinal da seção sobre os EUA. Nós demos a eles a propriedade flutuante esquerda vai sempre quebrar a estrutura fora do seu conteúdo de seu layout. Então você precisa corrigi-lo em você para garantir que os efeitos flutuantes sejam cancelados. Como tal, há uma propriedade que podemos usar e que é chamada de propriedade clara. Com esta propriedade, você pode dizer isso. Ei, eu não quero nenhum elemento acima de mim abaixo de mim, à minha esquerda, à minha direita para afetar minha própria estrutura. A ideia aqui é esta. Vou dar a estes serviços de contentores. Dê uma olhada nisso. Eu vou entrar aqui agora e dizer “claro”. E se for, vou dizer os dois. E lá vai você. Agora você pode ver que sua seção de serviços agora tem seu próprio conteúdo dentro de seu próprio contêiner. Esse é o efeito fora claro, e ele realmente tem três valores diferentes que você pode ir com esquerda, direita ou ambos. Então, na verdade, neste caso, em vez de ir ambos, eu poderia ter dito esquerda e ainda vai funcionar porque os dois elementos acima dele, que são o que nós somos e o são o que fazemos. As colunas de ar estão flutuando para a esquerda. Então eu entrei lá agora e mudei para a esquerda. Digamos que está certo , não vai funcionar. Mas a maioria dos desenvolvedores normalmente apenas ir com ambos apenas para estar no lado seguro, então isso realmente iria andar para a seção de serviços. No entanto, não é a melhor abordagem porque mesmo que tenhamos sido capazes de fornecer estrutura real para a seção de serviços, observe que o sobre ou seção ainda está quebrado. Olhe um dia aqui. Se eu passar o mouse sobre a idéia seção sobre notar que o que estamos conteúdo e também o conteúdo Hurriyah , bem como o que fazemos conteúdo ainda está fora de sua flutuação fora de seu recipiente. Isso é porque esses dois elementos ainda estão flutuando, então a abordagem ideal é corrigir esses elementos com a propriedade flutuante em vez de aplicar propriedade be clear para outros elementos que eles estão afetando. Então, o que exatamente fazemos? Você pode estar pensando. Bem, ok, se esse é o caso, por que simplesmente não vamos para cada coluna e eu joguei-a de propriedade clara? Isso não vai funcionar porque você não pode aplicar o partido Clipper dois elementos que flutuam dentro Não vai funcionar. Está bem? A outra opção seria adicionar a propriedade clear para o elemento pai, que é função não como temos a classe def de escrito que contém essas duas colunas que estão flutuando. Infelizmente, isso não vai andar também, porque aplicar a propriedade declare a um elemento cujos elementos Children estão flutuando não vai andar de pé também. Então, o que exatamente fazemos? E isso nos leva a um clássico, diz uma série que você vai usar uma e outra vez em sua jornada como um desenvolvedor CSS. O que precisamos fazer é criar algum conteúdo fictício antes de nossos elementos do flutuante talvez depois ou talvez até mesmo ambos, e então esse conteúdo fictício irá agora aplicar a propriedade clear a ele para compensar os efeitos fora do elementos flutuantes. Não se preocupe. E eu estou falando do grande. Agora, eu vou explicar isso para você. Muito, muito claro. Feli, dê uma olhada nisso, certo? Vou voltar para colchetes CSS. Ok, vamos abrir o Main que CSS. Eu estou apenas fechando este aqui e agora eu vou para a nossa área de seção o layout por isso e aqui, vamos primeiro de tudo, dar Arvo um com de 100%. Está bem, 100% bem. Agora precisamos criar algum conteúdo fictício antes e depois da nossa classe baixa. Por favor, tenha em mente que somos alvos na classe baixa aqui porque é o elemento contém os dois elementos que estão flutuando. Olhe para a sua estrutura de demonstração. Bem aqui. Temos o dia por causa do Roe e depois o dia da aula fora do centro, bem aqui quem somos e o que fazemos. Estes são os que flutuam, por isso precisamos apontar o elemento que contém ambos. Que é, claro, a turma fora da estrada. É aí que leva na classe baixa. Ok, vamos voltar aqui, eu vou ver isso ir. E agora vou apresentá-los a um novo tipo de elemento conhecido como os pseudo-elementos. E nós indicamos pelo Colon. E agora posso dizer antes. Mas também, vou dizer que Low Coghlan e depois. Então, basicamente, agora queremos criar conteúdo antes e depois da nossa classe baixa. Vou abrir minhas chaves de coluna, e é exatamente assim que criamos conteúdo fictício. Vou editar uma propriedade chamada conteúdo. Vai estar vazio fora do curso porque não estamos exibindo nada. Vou adicionar o meu semi-cólon. É bom adicionar algum espaço entre os dois códigos, a propósito, modo que em algum espaço lá e agora eu vou dizer esta mesa de jogo, Esta é uma nova. O que é faz é que ele cria muito. Agora nós vendemos, Então, é muito melhor do que você dizendo exibição, golpe de chamada no bloco de terra ou interior com mesa. Ele meio que cria uma célula vazia imaginária. Então, isso meio que acrescenta ao conteúdo, se isso faz sentido. E finalmente, vou entrar agora mesmo e dizer “claro os dois”. Então o que fizemos agora é que, como não podíamos aplicar o clipe sobre ele diretamente para a classe de papel, tivemos que criar conteúdo fictício antes e depois que eles o fizerem. A propósito, ouça, a propósito, não é compulsivo que você deva ir com antes ou depois. Você pode apenas dizer antes, simplesmente ou depois simplesmente que não vai importar. Tudo depende da estrutura da sua página XML, entanto, para estar no lado seguro, assim como ao limpar tanto o típico ir com pseudo elementos antes e depois apenas para estar no lado seguro. É por isso que eu disse para ir com antes e também com depois. Então, agora que creditamos conteúdo fictício, podemos agora aplicar declarar propriedade a eles. Vamos em frente agora em segurança. Vamos voltar aqui. Vamos atualizar a página e que você ainda vai a mesma coisa. Mas agora observe que, se inspecionarmos o sobre ou seção, observe agora que, de fato, o que nós somos conteúdo, bem como eles já conteúdo, agora estão contidos dentro do sobre ou seção. Então é exatamente assim que você lidaria com elementos que têm elementos flutuantes contidos dentro deles. Como eu disse, este é um truque que você vai estar aplicando uma e outra vez em sua jornada como um CSS se desenvolve. Então tome nota disso. Então isso é, eu acho, muita sorte. Vemo-nos na próxima aula. 54. Estilizando a seção de serviços: Bem-vinda de volta. Agora vamos tentar e estilizar a seção de serviços para fazer com que pareça que Ah, bem, nós temos aqui. Então vamos ver. Você pode ver agora que nós temos três linhas e também três colunas. Então nós devemos estar pensando, Tudo bem, talvez nós precisamos fornecer um conjunto com para os pais l I elementos como o desenvolvimento Web amable, abs. Tudo isso deve ter, como, um conjunto com, e deve ser em torno de 33% para que a adição de todas as três colunas será basicamente cerca de 99% de desconto no todo com para o recipiente. Então é assim que ele deve estar pensando agora, 33% com para cada recipiente. Além disso, podemos ver que eles têm um fundo branco também. Há muitas margens de preenchimento aplicadas, mas também temos o que parece ser nosso algo de vídeos de Bordeaux, talvez cerca de três pixels e assim por diante. Então vamos fazer isso. Ok, o que nós vamos fazer Primeiro de tudo, ele nunca vai fornecer um com para os pais I elementos. Vamos voltar ao nosso indexado de XML. Então, aqui devemos estar idealmente deve ser visando esses elementos principais no Hagen CLI. Ele basicamente detém o desenvolvimento da Web, e então ele detém os serviços soluços no desenvolvimento da Web. Há outra companhia aérea aqui também, então estes são os aliados que precisamos fornecer o para, bem como o fundo. No entanto, há um pequeno problema. Você vê esses apenas aliados e que dentro da nossa lista de serviços da classe UL, esses sub-serviços também são elementos L. I. Então, se entrarmos aqui agora e dissermos algo como: “ Ei, Ei, vamos fazer isso, vamos dizer “não nos serviços”. Só por exemplo, vou apoiar os serviços, a polícia e depois digo uma mentira e vir aqui agora e depois digo: “ Ok, Ok, vamos dar-vos alguns com os 3% de desconto. Vamos em frente e salvar isso. O problema aqui agora é que cada único l eu vou ter que um 3% incluindo os serviços de sabão , bem, mas nós Onley queremos fornecer o com para os principais elementos L I, aqueles que os elementos aliados pai, por assim dizer . Então, como exatamente nós especificamente alvo eles e eles apenas Bem, eu vou apresentá-lo para em novo selecionável chamado Element Element seletor. É normal, representado pelo símbolo maior que. Então, o que é isso é que podemos marcá-lo elementos muito específicos em assinou um elemento pai . Então, se quisermos atingir os principais aliados, podemos dizer que Ei, apenas o L IES que estão diretamente na sua classe fora lista de serviços fornecer-lhes é com essa forma que estes outros aliados, os sub serviços não mais tempo ser aplicável porque eles não enchem diretamente sobre as suas roupas porque eles caem sobre o Você estava bem aqui, e então eles caem sobre o pai um leão, e finalmente, eles caem sob a sua classe por isso será aplicável porque somos alvos apenas nos elementos diretamente sob a , classe, que seria o cabelo aliado e assim por diante. Então vamos fazer isso. Eu vou voltar aqui. Vamos até aqui. Eu vou remover isso e vamos adicionar serviços lista de traço e, em seguida, o ralado e símbolo, e então eu tudo bem agora vamos em frente e adicionar o com como um perdeu a cor de fundo. Oh, vamos em frente. Agora com vai ser eu vou Eu vou com ele um 2,3 por cento. Ok, vamos também adicionar alguma margem. Eu tenho minhas margens em 1% e ah, 00 e, em seguida, 1% da esquerda também. E vamos adicionar ah, plano de fundo chamar temor, que vai ser f a f a f a. Ok, vamos ver o que temos. Um cofre. Vamos voltar para o que temos atualizado a página e lá vai você. Ok, nada mal. Adicione tudo. No entanto, nós ainda fora obviamente precisa aplicar um pouco mais de preenchimento dentro. Aguardando para aplicar são alguns raio de fronteira, bem como, e também em seu você aplicar. Assim, as margens dentro do são sub-serviços em si. Você pode ver que há muito espaço entre eles. Então vamos tentar consertar isso. Vamos voltar para colchetes. Tudo bem, então para os aliados pais, vamos adicionar um pouco de enchimento, ok? E eu tenho cinco pixels. Eu tenho 20 pixels. Tenho 20 pixels e 20 pixels. Novamente, vamos adicionar a borda. Quem é também. E eu vou três pixels. Não vamos esquecer a fronteira. Eu sinto muito. O tamanho do livro e propriedade, bem como ciência do livro. E vamos apenas dizer que você comprou uma caixa também. Ok. Muito bem, vamos guardar isto e depois dar uma olhadela rápida e ver como é. Certo, estamos chegando lá, mas entre lá agora. Só precisamos aplicar algumas margens ao L.I . Os aliados estão dentro dos aliados pais e também mudam. Bem, parece o tamanho do telefone. Isto parecia ser muito menor do que o que temos actualmente em jogo. Certo, então pense nisso. Tudo bem? Como vamos atacar especificamente a cerveja Children? Eu elementos agora porque há um Dylan estava disposto a aceitá-lo. Nós não aceitamos. Os elementos do aliado pai. Consegue pensar em como podemos levá-los especificamente? Bem, não é difícil, e eu tenho certeza. Como é que vais fazer isso? Nós vamos voltar aqui e exatamente a mesma coisa que os Serviços lista de traço. E agora vou dizer melhor do que conseguir o aliado. E agora o U. L Ok, tome notas. Você pode ver agora que este é o pai uma mentira. Então, agora que os alvos nos EUA , esses caras que estão segurando os serviços de sabão, é exatamente assim que fazemos isso. Então vamos voltar aqui e aplicar um pouco de silêncio. Vou abrir as minhas corridas de Collie como de costume e o tipo de lista. Vamos em frente e nos candidatar. Temos disco é um estilo e, em seguida, o tamanho do telefone. Nós temos isso em 14 pixels, eu acredito, e ele também tem um pouco de preenchimento para a esquerda, e eu tenho para os pixels bem aqui. Então vamos ver como isso parece agora. Vamos em frente agora e salve. Vamos voltar para os rebeldes na primeira página. E aí vai você, parecendo muito, muito melhor. Só mais algumas coisas. Nós especialmente com margens. Eles ainda tendem a ter algum dinheiro entre si. Como você pode ver, eles não se parecem tão próximos um do outro, ao contrário do que temos atualmente aqui. Então, vamos estranhar muito é diretamente para os subserviços nossos elementos aliados agora, então eu vou voltar aqui, e eu vou pegar isso. Há apenas copiar todo o estilo e voltar aqui colar. E eu vou mudar o L I aqui mesmo. Sinto muito, mas vou mudar para o I. Não precisamos mais adicionar a ULporque não importa onde ainda entrar noselementos Children, osChildren, mas vou mudar para o I. Não precisamos mais adicionar a UL porque não importa onde ainda entrar nos elementos Children, os Children, uma mentira, elementos que se enquadram no elemento Airlie pai. Então não precisamos mais adicionar a UL. Então bem, porque eu vou adicionar aqui vai ser a margem, e eu tenho oito pixels escritos para eles. Vamos em segurança, e ficaremos bem. Agora, a primeira página. E lá vai você. Uma última coisa, como você pode ver, seria o culo, todos os h para os serviços prestados de qualquer maneira tomadas. Veja, está em branco. Você desce, ele pode ver conhecer a equipe também está em branco. E aqui em baixo, nossas aulas e brancos. Mas lembre-se de que fornecemos uma classe especificamente para seções que têm uma imagem de terra ruim . Assim como. Tudo o que precisamos fazer agora é simplesmente levar os dois de idade dentro de tal classe. E para fazer isso, vou voltar. Vamos passar para a idade para a seção em si. Então, todo o caminho até aqui. Então eu vou entrar bem aqui, e eu vou dizer seção ok, e então não imagina Dash BG. Essa é a classe que lhes demos decisões com uma imagem de fundo h dois e apenas muito, muito simplesmente, muito simplesmente, eu só vou dizer cor aqui seria definido para f f f f f f f f f f f salvar ponto e vírgula. Vamos voltar aqui. Refere-se à página que sinto muito. Atualize esta página e lá vai você. Então, obviamente, nós também poderíamos adicionar, como a borda azul ah de idéias Você pode ver porque simplesmente dizer, borda inferior azul Adicione algumas margens também, coisas assim. Mas há outra maneira como vamos adicionar as nossas fronteiras azuis abaixo do imposto H dois . Então não se preocupe com isso. E também note que o fundo da flor a borda azul em vez está realmente presente em todos os H dois, independentemente de lá. Não, eles têm uma imagem de fundo ou não. Portanto, não podemos aplicar o estilo especificamente para esta classe porque, em seguida, as seções que não têm uma imagem de fundo não cidade mesmo efeito. Então precisamos encontrar maneiras diferentes de sair. Adicionando São as bordas azuis para R H duas tags? Então é isso. Muito obrigado por assistir. E, claro, sempre te verei na próxima aula. 55. Construindo a seção de porquê: Bem-vindo de volta, espero que você esteja gostando do curso aqueles longe e nós fizemos um monte de progresso. Nós adicionamos nosso cabeçalho principal com o fundo do herói com adicionado sobre uma seção serviços fornecidos. E agora estamos falando sobre a seção Wire Walker e é contra o já indo em frente para adicionar a estrutura HTML para esta seção. Mas vamos dar uma olhada no que devemos projetar aqui, e é bem simples. Não é uma seção complicada por qualquer trecho da imaginação. É muito semelhante ao que temos inibir a seção sobre os EUA, a principal diferença é que, embora esta seção tenha duas colunas principais, uma para o Who, nós somos a ordem para o que fazemos aqui em baixo. Em vez disso, temos quatro colunas. Então agora devemos estar pensando em criar quatro Dev diferentes, dado a eles uma classe particular, e essa classe terá talvez com off, vejamos, talvez 23 p dizendo dois ou 24% ou algo assim, você sabe, e aqui para o texto como pesquisa e plano de aliados executar, nós podemos, é claro, usar vãos para eles e, de fato, eu já fiz isso. Deixe-me mostrar-lhe a estrutura HTML ou o que eu tenho atualmente. Então, está bem aqui. Bastante simples. Nós temos a nossa seção I d. Por Tash nós o mesmo conteúdo de classe, que, é claro, coloca todo o conteúdo dentro do recipiente temos a idade a que é onde andar com a gente e, em seguida, o p principal, que é o que não fazemos nós não apenas desenvolvemos. E, claro, os vãos para pesquisa e aliados plano executar. E então temos o dia, é claro. E agora, temos o Dave principal segurando a razão do meio. Então Dave número um aqui, conteúdo suficiente. Esta pesquisa preencheu e dois pacotes de textos. O segundo convidado contém os dados analisados e assim por diante. Então estes são os Dave que terão que dar à classe dois e fornecer a essa classe com 24% deles sobre. Mas antes de fazermos isso, vamos apenas lidar com o estilo muito fácil. E, claro, isso vai ser nas cores para o nosso texto. Bem aqui. Pesquisa e aliados plano executar. Então vamos fazer isso. Ok, primeiro de tudo, vou dar esta mensagem aqui mesmo. Vou dar uma aula fora do título “Dash três”. Então aqui, eu vou dizer classe é igual e, em seguida, título Dash três. Ok, agora vamos adicionar a classe está cheia. Estes textos especiais. Então o 1º 1 aqui vai ser azul porque a pesquisa é em colarinho azul. eu Analisar, acredito. Deve ser laranja. Digamos que laranja é saber soletrar laranja. Ah, plano, eu acho que era verde chama verde. E na última execução Panelist tem a classe sobre adicionar vermelho para executar. Oh, ok. Eu acho que isso é bom é ir em frente. Salve isso. Não vamos bater sobre dois principais que CSS. Bem aqui na seção do parágrafo ah, vou adicionar o estilo para Pete. Esse título Dash três e eu tenho um tamanho divertido de cerca de 20 pixels. Eu tenho um texto, uma linha de centro também, e eu tenho muita margem, que vai ser 35 pixels e 14 pixels e outros 14 pixels. Ok, incrível. Vamos agora adicionar o estilo para os vãos. Então temos span span dot blue e o colarinho vai ser um membro. Basta verificar o que eu tenho aqui no coração. É 40 b sete f f Isso vai ser para o azul e então temos estendido laranja e vamos adicionar a laranja colorida. Falando em laranja, eu não comi uma laranja também. Adoro laranjas. Eu não sei quanto a você, mas eu te amo como se eu pudesse chupar seis laranjas de uma vez. Simplesmente os amo. Tudo bem, vamos continuar. Temos espaço que Ah, verde e depois verde cor da Linda Verifique o cabelo amarelo para o verde. É a C B 913 E por último, mas não menos importante, temos o Sr. Executa executar armas ou expandir esse vermelho não executar. E a cor aqui vai ser f 5050 Ok, agora, agora, uma última coisa, porém, é o peso frontal. E o engraçado é que na verdade 500 por todos eles. Então podemos fazer isso. Eu vou vir até aqui. Vamos criar uma nova seção. Vamos copiar isso. Vamos descer até aqui e eu vou ligar para isso. Ah, por que nós? OK? E agora eu vou dizer, vamos adicionar p título escuro. Bem, vamos apenas dizer, basicamente, serviços. Desculpe, não serviços, não serviços, mas por que nós? O que eu disse de por que nos traçar? Acredito que é por isso que Dash Islam confirmou isso rapidamente. Certo, as idéias nos trazem. Tudo bem, vamos voltar aqui. Então por que nos despistar? E então eu vou dizer por que essa extensão? Então, quaisquer vãos dentro do porquê nos atacar? Vamos dar-lhe um dedo do telefone Espere 500 e então ele diz, Vá em frente. Agora, guarde esta cabeça de volta para um broza. Refere a página, e lá vai você. Está bem. Nada mal em tudo. Onde é que entra aí? Vamos dar uma olhada e ver. Está bem. Ah, isso não parece ser. Vamos apenas confirmar o tamanho disso. Tem 20 pixels, mas parece ser um pouco menor. Alma. Talvez possamos ir com 23 pixels. Eu acho que tudo bem, para cima 23 pixels deve ser um pouco mais preciso. Então vamos fazer essa mudança rápida. Vamos voltar aqui para cima. Onde temos o Peter? Há três. Ok, então vamos apenas para as imagens para 23 pixels e estamos bem. Ok, agora para o material principal, que é, claro, dividir o texto principal aqui em quatro colunas. Agora, lembre-se que quando lidamos com a seção sobre nós, usamos o ponto Cole traço varinha traço traço para a classe para as duas colunas. Então agora vamos criar um novo tipo de ponto de beleza km chamado Dash 1-4 Tudo bem, então vamos voltar aqui. Vamos lá para nos deitarmos. Acredito que foi aí que criamos a estrutura. E bem, então aqui está, bem aqui. Então, vou copiar isto. Você sabe o que? Vamos copiar isso vindo aqui, colar isso e então eu vou fazer é eu vou mudar para aqui para completo vai mudar o com o caminho agora para que ele possa acomodar quatro colunas, Então isso vai ser 23,75%. Isso é o quanto eu tenho. As margens vão ficar exatamente as mesmas. A mesma ciência da caixa padrão e flutuadores também deixaram. Então é tudo o que precisamos fazer. Vamos salvar. Vamos voltar ao índice de html e realmente deixar apenas copiar isso. Eu vou copiar esta classe Vamos copiar essa cabeça de volta para o índice de HTML e agora nós podemos apenas dar esta classe para a divisão. Aqui eles têm classe igual e então vamos pagar a classe branca. Eles vamos remover os pontos e lá vai você. Então vamos apenas copiar isso e nós vamos apenas copiar e colar vir aqui abaixo. Oops, vamos manter o recuo que a mesma coisa aqui é, bem, colar espaço para manter o recuo. E por último, mas não menos importante, lá vai você. Ok, então nós devemos ficar bem agora nós adicionamos as aulas para todas as nossas vidas. Vamos em frente agora salvar este também. Voltar aqui refere-se a página. Desça aqui e lá vai você. OK, vamos dar uma olhada. E é praticamente exatamente a mesma coisa. A única diferença, claro, é que os títulos, o campo de pesquisa, eles têm ícones, que, é claro, irá adicionar são muito mais tarde. Mas é isso. Edifício completo fora do caminho que eu ando com a seção dos EUA Alemanha, Venezuela, onde vai agora ir em frente e andar com o MIT. Essa mesma seção 56. Construindo a seção de equipe: Bem-vindo de volta. Espero que esteja se divertindo, onde quer que esteja. Então, anteriormente, fomos capazes de criar a caminhada de fio com uma seção, mas agora é hora de dar uma olhada na seção de encontro da equipe. Então, como vamos criar a estrutura e, em seguida, projetar esta seção? Então vamos dar uma olhada no que temos atualmente. Temos oito membros da equipe, e você pode estar pensando, OK, podemos ser capazes de usar a estrutura de colunas aqui, mas podemos usar a classe. Não ligue para Dash 1-4 porque temos quatro colunas, mas isso não será o melhor, porque temos que fazer isso. Bem, não é como o trabalho daquela seção onde temos quatro colunas e apenas um único voto lá. Temos que remar. Então agora você deve estar pensando em mais flexibilidade de exibição, sentado em bandeiras de exibição, e então a direção flexível deve ser baixa. Isso é exatamente o que você deve estar pensando do ponto de vista do design. Mas do ponto de vista HTML, a estrutura real em si. Neste momento, isto parece uma lista. Ok, então nós vamos ter uma UL e alguns aliados, mas nós também vamos ter alguns Dave. Provavelmente teremos um morto para a foto, certo? E também podemos ter um dia para talvez o nome fora da pessoa e, em seguida, outro dia para o título. Não precisamos necessariamente usar ladrões para isso. Nós também poderíamos usar vãos e talvez exibi-los como um bloco, tudo lá na maioria das maneiras, tendo parabéns por alcançar exatamente o mesmo resultado. Mas no meu caso, eu vou usar dibs para segurar a foto para manter o nome da pessoa e, em seguida, a posição. Certo, então vamos tentar isso. Eu vou voltar para colchetes, e o que eu fiz, como de costume, eu fui em frente para adicionar a estrutura muito básica, que é apenas a seção I d. Eu dei a ele a idéia de equipe ter dado a classe de imagem traço Bijie. Porque, é claro, temos um fundo aqui para as imagens dos empacotadores de novo, vê? Então, tem sido muito parecido com os serviços prestados. Então é por isso que adicionou a classe ali e, claro, o bom e velho Dave da idade do conteúdo para formá-lo. A equipe e isso é o que eu alcancei aqueles longe. Então vamos lá uns 18 anos. A lista, primeiro lugar, então eu vou entrar aqui agora, e vamos apenas adicionar um ul e vamos dar-lhe aula imediatamente. Vou dar uma aula de folga. Vamos chamar essa equipe de lista. Ok, agora, vamos em frente e fechar isso. Agora, a fim de exibir nossos membros facilmente, vamos usá-los como Ally, então teremos um aliado. Eles vão ser como o pai I I e então o dibs segurar na foto. O nome, a posição será sobre o que eu. Então, é meio semelhante ao que fizemos aqui com as anuidades fornecidas. Então veja isso. Vou voltar para os parênteses e no poço U, no aliado aparente. Ok. E aí dentro, vou acrescentar que são forçados a Dev e darão a essa aula fora. Vamos chamar essa foto de equipe. Tim, foto, Kate . E vamos apenas ir em frente e adicionar a imagem para este empregado em particular que iria ser o CEO igual a casacos. Agora, para encontrar a fonte, vou voltar para a minha pasta, e acredito que está dentro dos bens. Enganado. Ah, e depois imagens e depois equipe. Ok, então é aqui que você encontraria as imagens. Então, vai ser recursos de imagens de equipe. Certo, acho que entendi. Vamos voltar aqui. Então isso vai ser bens. Nós não precisamos fazer nenhum escape, porque lembre-se que o documento HTML em si está dentro da mesma pasta que os ativos. Então não é como se estivéssemos escapando do ah fora do índice do HTML tinha um B. Estamos lidando com o edifício da barragem de arquivos CSS para escapar da pasta deste ano e então para esta pasta onde podemos pegar ativos. Mas uma vez que estamos adicionando as imagens diretamente através do índice do arquivo XML, não precisamos fazer nenhum escape. Ok, então espero que você tenha entendido isso. Vamos voltar aqui para colchetes. Tudo bem, então vai ser agora imagens quatro equipe barra, e então eu acredito que o nome dele é Rusty. J P. G. E aí vai você. Tudo bem, vamos em frente e fechar. Este primeiro Div apareceu. Será que eu vou saltar para baixo. Isso é certo que isso está fechado. O que está pulando aqui? Vamos adicionar o próximo Dave. Então classe Dave é igual a isso vai ser para os nomes. Will chamou sua equipe Dash nome e seu nome é Rusty Dela Cruz. E vamos fechar Div. Não sei quanto a você, mas sempre achei esse nome engraçado. Tudo bem, vamos perder a cabeça de volta aqui, Dave Class é igual a equipe do que a posição seria Pos. E, claro, ele é o momento da morte. Vamos fechar esse. E OK, então não fechamos outra coisa que vai ser o aliado. Precisamos fechar a luz do ar e vamos também fechar o U l e voilá! Certo, então vamos recapitular. Nós temos a classe de equipe U. S lista o L que eu tenho na div que contém a imagem. Outro dia tem o nome. Posicione-os ter fechado tudo Ok, vamos em frente e salvar isso. Vamos voltar para as contas primeiro a página e ele está tão feliz é como, sim, eu sou o CEO, tudo bem, tudo bem, então de qualquer maneira foram adicionados com sucesso a primeira pessoa Dela Cruz, Sr. CEO Então o que eu vou fazer agora é que eu estou basicamente indo para usar exatamente a mesma estrutura para adicionar os membros restantes fora da equipe. Vou pausar o vídeo e retomar uma vez que eu tiver adicionado todos eles. Bem-vindo de volta. E como você pode ver agora, eu tenho que adicionar para adicionar todos os muitos membros para a equipe. Eu cometi um erro com essa ortografia para Rusty, então eu consertei isso. Mas também adicionei todo o texto para os outros membros. E vou fazer o mesmo agora pelo Sr. Rosti Dela Cruz. Então isso é algo que você sempre deve tentar não esquecer de fazer como eu fiz. Eu sempre tentei adicionar todos os textos para todas as suas imagens. Então deixe-me fazer isso agora para o Sr. Rusty Dela Cruz. E OK, então vamos salvar isso. E vamos dar uma olhada no que temos agora. Refresque. E, claro, agora você pode ver todas as imagens com os nomes das pessoas, bem como suas posições. Ok, então vamos entrar na ação CSS. Continue soltando seus dois principais que CSS. E vamos esfriar a velha maneira aqui embaixo. Vamos pegar o porquê. Por que nós? Vamos criar uma nova seção. Vamos ligar para esta equipa. Vamos falar com os membros da equipe sobre os membros da equipe. Ok. Tudo bem. Então o calouro vai fazer isso ao lado para exibir como flex. Certo, então vamos pegar a então vamos pegar a turma da equipe Nacionalista. Ok, abra. Nosso colega se prepara, e vamos entrar em ação. Tudo bem? Então exibição vai ser flexível e, em seguida, desvia direção, como você pode imaginar, vai ser papel. E lá vai você. Então vamos também fazer o rap flexível também. Flex rap vai ser rap. E vamos também remover o tipo de estilo de lista A. Nós não queremos nenhum estilo para nossas listas ou listas. Tipo de estilo. Disseram-me que não quero nada. E vamos apenas remover qualquer padrão também. Ok, então zero E OK, então vamos salvar isso. E digamos que o progresso que fizemos vamos voltar aqui. Essa é a primeira página que vem para baixo, OK, mas quase estamos chegando lá ainda há necessidade de definir um com para os próprios aliados reais . Então vamos voltar aqui. Vou criar uma nova declaração. É um aliado da lista de traço da equipe. E então vamos abrir isso. Vou dar a isto um com 24% de desconto. Ok, porque, claro, lá está. É uma coluna de quatro, então não pode ser 33% ou 50% porque então não terá quatro colunas ou 24% deve ser apenas sobre margens certas. E você tem minhas margens em 1% zero zero e então ah, 1% também, o que é bastante padrão. Eu tenho a cor de fundo, que é a mesma. Ah F A f a f A e eu tenho um monte de Patton, 20 pixels, 10 pixels e inserindo pixels. Vamos adicionar o tamanho do livro. Estas são regras bastante padrão, mas uma caixa e que você vai OK, então agora nós adicionamos isso com aos nossos aliados Margens, cor de fundo. Vamos salvar a cabeça de volta aqui, atualizar e tudo mais. Ok, então onde estamos quase chegando lá. Eu sei que isso parece terrível, mas pelo menos agora você pode ver que CSS está tentando exibir os funcionários em duas linhas com quatro colunas, então há um monte de coisas em sua fazer agora. O principal problema é que as próprias imagens são bastante grandes. Se eu voltar para a minha pasta, você pode ver que eles são basicamente bem, eles vêm de tamanho diferente. Isto, por exemplo, é de 12 80 por 150 O Sr. Mostrado aqui é 9 50 por 8 50 e assim por diante. Então o que podemos fazer é que podemos definir uma altura máxima para todas as imagens e, em seguida, podemos também definir o nosso overflow para ser escondido. Então veja isso. Acho que vou voltar para cá. Vamos criar uma nova imagem do traço da equipe de declaração, e confira isso. Vou definir algo conhecido como a altura máxima para que não importa o que aconteça, nunca exceda 200 pixels. Vamos também fazer algo conhecido como o transbordamento e dissemos isso para esconder. Então, basicamente, o que isso faz é que qualquer parte da imagem que possa derramar fora do recipiente simplesmente esconda. Isso é o que transbordamento oculto faz. Vamos salvar essa cabeça de volta aqui, atualizar. E lá vai você. Ok. No entanto, ainda há outro problema. O fato de termos definido uma altura máxima para a imagem alterou as coisas um pouco porque agora C S diz que só sabe isso. Esta imagem não deve ter mais de 200 pixels de altura. Mas e o com? Nós também precisamos fazer algo sobre fazer com isso também. Não podemos definir um específico com em termos de pixels. Mas o que podemos fazer é que precisa de um pequeno truque. Vou voltar aqui e ver isto. Eu vou dizer equipe traço lista era apenas dizer imagem. Eu sou G e agora com vai ser 100 por cento. Vê isto? Vamos voltar para dentro. Aqui se refere a página E lá vai você. O que fizemos agora é um truque. Ok? Mesmo que tenhamos dito que as alturas máximas para ser 200 pixels com também disse, Hey, CS diz que não importa o que exibido o completo com fora da imagem, por isso são tais CSS agora tem que pensar de uma maneira como ele pode exibir a imagem completa, mantendo a imagem na altura máxima de 200 pixels. CSS é incrível, mas agora você pode ver isso é o que temos obtido truque tão atípico que as pessoas sempre usam desenvolvedores normalmente usa. Quando você está definindo a altura máxima três imagens sempre ir para com 100% e na maioria das vezes você vai obter alguns resultados muito bons. Certo, vamos voltar para cá. Vamos ver o que mais precisamos fazer aqui para podermos ver. Neste momento, os detectores estão alinhados ao centro. A posição é uma espécie de luz cerca de 300 em termos de peso. E também é uma linha para o centro. Mas está em itálico, certo? Então vamos tentar fazer algumas mudanças aqui. Vamos voltar aqui e fazer isso. O primeiro com o qual vamos lidar será o nome da equipa, nome T. Vamos abrir nossos aparelhos de qualidade. E, uh OK, então eu tenho um texto para a linha uma linha que vai ser o centro. Certo, , vamos fazer exatamente a mesma coisa para a posição da equipe também. Chame de aparelho. Mande essa linha para o centro e lembre-se, você teria um pesos dianteiros? Porque é meio que luzes. Vou dar 300 e o estilo divertido também. Estilo do telefone, não é? Alec e vamos também mudar o tamanho do telefone. Eu tenho este tamanho de 15 pixels bem aqui, e eu acho que deve ficar bem. Vamos salvar isso e ver o que temos. Voltar aqui foi a primeira página e, uh, tudo bem, ainda temos algumas coisas faltando. Por exemplo, há um pouco de margem entre as imagens e os títulos e os nomes dos funcionários. Como você pode ver, certo. É um pouco de margem, na verdade. Então precisamos fazer algo aqui e voltar para cá. Vamos adicionar o nome do aluno de margem. Primeiro de tudo, então a margem aqui vai ser 17 pixels zero e, em seguida, ter 10 pixels. E então vamos ver para a posição que eu tenho Ma Jin definido para 10 pixels e zero. Não que. Vamos ver essa. Vamos voltar aqui. Vamos atualizar a página e OK, então a última coisa que precisamos fazer agora seria adicionar a imagem de fundo, mas também observa que os Aliados têm um raio de borda. Ooh, eu quase perdi isso. Então isso é rapidamente corrigido um. Ah, onde nós Tim Menos I Ah, Buda Raio, e eu vou dar-lhe três pixels. Na verdade, vamos pegar cinco pixels. As coisas um pouco mais do que três. Estes bons cinco pixels salvam a cabeça de volta aqui fresco. Certo, é mais assim. Tudo bem, vamos simplesmente ir em frente agora e ter a imagem de fundo, então eles devem ser bastante simples. Vamos para onde tivemos, tipo, tipo os serviços, por exemplo. Então todos aqueles pegarem isso, vamos copiar isso. Desça aqui e temos uma equipa. E eu ia em frente e simplesmente colar isso e, em seguida, mudar de serviço para equipe. Era uma equipe que ainda nos juntamos, e eu me lembro, Ok, eu tenho equipe. E assim é apenas equipe. Ok, então isso vai ser imagem de fundo da equipe. E eu sei que a imagem em si deveria ser a Equipe O J. P. G. Deixe-me confirmar isso. Vamos voltar aqui. Ah, fundo. Sim, é a equipa que o JP G. G. , por isso acho que devemos ficar bem. Vamos em frente agora e salvar isso. Vamos voltar para um Boza, atualizar a página e voilá. Lá vai você. Espero que isso não tenha sido muito complicado para você. E espero que você tenha sido capaz de construir sua seção de equipe do meio também. Então é isso. Muito obrigado por se juntar a mim neste vídeo. Alemanha, a próxima disponível. Agora vá em frente e crie a seção de depoimentos. 57. Desafio de depoimentos: Bem, retornos. E se o seu vídeo é criado com sucesso, o mito que a mesma seção agora é hora de criar a seção de depoimento. Mas antes de fazermos isto, quero apresentar-vos este desafio. Ok, eu quero que você tente o seu melhor para ir em frente agora e criar a seção de depoimentos sozinho . Vou te dar algumas dicas. Agora a estrutura para isso, a seção seminal é um pouco diferente do que tivemos no passado. Não temos várias colunas aqui, é basicamente uma única coluna. Mas temos para a Rose. Então, porque é apenas uma coluna, não podemos usar a estrutura de colunas como fizemos com a seção Comprar um livro com uma seção ou até mesmo a seção sobre EUA. Não podemos usar o ponto chamado Dash, Wander, Stewart ou Dash 1-4, por exemplo. Podemos usar que também podemos usar flex o display flex, ou porque sim, mesmo que tenhamos quatro linhas e tecnicamente poderíamos usar o Flex exibido seu display flex. Em vez disso, não vai ser a melhor abordagem porque não temos várias colunas. É só uma coluna com para Rose. Então, a melhor maneira, a maneira mais fácil para esta peça. Isso será com o uso de Debs. Então isso é tudo o que eu vou dizer em seu usado suas estratégias que dá para exibir seus depoimentos. Esqueça os códigos que são chamados irá lidar com isso um pouco mais tarde. E se você pode tentar pensar em uma maneira como você pode flutuar, eu estou apenas dando a você a dica durante o dia como você pode fluir para o segundo e o quarto. Testemunhos. Se conseguires descobrir como flutuá-los para a luz, dúvida seria fantástica. Então pense no pensamento de Dave sobre as aulas e também tente fazer algum estilo em. Tente descobrir uma maneira como você pode adicionar a cor de fundo branco para o principal Dave que irá conter o testemunho e também o nome, bem como o site para a pessoa que fornece o depoimento. Tome nota dos salários da fronteira também, e apenas divirta-se. Vá em frente, faça o seu melhor para mostrar este testemunho, alergias e Dave e, hum, isso é boa sorte. Eu vou ver você nunca próximo vídeo onde eu vou agora ir em frente e criar a seção de depoimento 58. Construindo a seção de depoimentos: Ok, então espero que você tenha tentado criar a seção de depoimentos sozinho. Se você fez, se você fez uma tentativa, parabéns. Se não te saíres bem, avisa-me. Mostrar como criar a seção de depoimentos. Então, como eu disse no vídeo das pessoas, não podemos usar bandeiras de exibição ou a estrutura de colunas. Então, onde vai usar dibs para isso? Certo, então vamos ter um, Dave, Dave, que vai segurar todos os homens. E Dave é o segundo dia de testamento basicamente exibiu este Emmanuel enquanto o outro Dave irá exibir o nome, bem como o site para a pessoa dada o depoimento particular . E só por um lado, se reconheceres algum destes nomes, , manda-me uma mensagem, está bem? Apenas me diga. Bem, você sabe, através dessas pessoas de personagens fictícios de e que nós podemos ter uma conversa sobre isso, é claro, você sabe. Então é tudo o que vou dizer sobre isso. Vamos para os suportes. Então o que eu fiz como de costume, é claro, é criar uma nova seção para o teste ganhou Il e eu adicionei a idéia para depoimentos adicionaram uma classe Uma classe muito especial de traço cinza bgl antes do fundo de um fundo especial. Então eu não sei. Um já adicionou o dia habitual de classe de conteúdo H dois para o título de depoimentos , e isso é praticamente isso. Ok, então agora como vamos mostrar nossos depoimentos? Bem, eu vou criar um novo Dev escrevendo para ele e vamos apenas dar que fez o papel de classe fora. Ok, então este será o Dave principal segurando os outros direitos. Então agora vamos tentar adicionar no outro dia de agora que temos os próprios depoimentos . Então isso vai ser igual a classe div e agora testemunho. Então isso vai gostar do Div pai. Agora, para o dia em que vai mostrar o casaco em si, então a classe de def é igual então a classe de def é iguala casaco. Certo, então vamos fazer isso. Vou em frente agora e simplesmente pegar o casaco do Sr. Hans Gruber. Vamos copiar isto aqui. Vamos copiar isso. Era a cabeça de volta aos suportes. Vamos mostrar isso. E, ah, eu só vou fazer essas duas linhas. Vamos em frente agora e fechar isso, Dev. Ok, então esse é o dia para o casaco não vamos adicionar mais um dia. Agora mesmo, Full. O autor. É um dia de aula aqui vai ser igual a AH Autor. E neste caso, o nome dele é mãos Gruber e sua Amanhecer Asiático. Uh, calma. Vamos fechar isso, Dev. E é isso. Então eu vou em frente agora e fechar o dia principal de espera. Os depoimentos foram fechados um. Ah, vamos garantir que este é o E roxo recuado. E então podemos fechar a estrada. O próprio Dave. Espere um segundo. Deixa-me certificar-me de que isto está recuado. Provavelmente def, def. Ok, então este dispositivo para a fileira e então este é para o conteúdo. E, uh, deixe-me. Não me estou a confundir aqui, está bem? Tão feliz Dave. Bem aqui para o conteúdo. O Dave. Classe para Vaux, parece que temos um Dev Islamic extra removido este Dave. Ok, então vamos ver, nós não fechamos o dia para o depoimento. Ok, apenas certifique-se que isso é corrigido e mais uma definição. Ok? Estes são os tipos de problemas que você enfrenta quando você está criando com CSS. É um pouco irritante, mas é o que é. Então deixe-me apenas certificar que isso está correto contra Dave. Dave, eles têm bem aqui. Estou no espaço, Def. E então este Dave bem aqui. Vamos empurrar isso aqui e tudo bem, apenas vá em frente e salve isso. Vamos voltar a um navegador. Bem, primeiro a página e lá vai você. OK, então nós temos o primeiro dia disso foi exibido. Vou continuar agora e adicionar as vidas restantes para Hannibal Lecter, militar miserável. E Michael Myers. Bem-vinda de volta. Então ofendido depoimentos remanescentes de Hannibal Lecter, Mildred Veteran e Michael Myers. E isso é o que eu tenho agora. E eu atualizei a página. Você pode ver meus depoimentos e isso lá, mas agora precisamos adicionar um pouco de estilo a eles. Então vamos dar uma olhada no que temos aqui. Você pode ver que eles têm algum preenchimento, algumas margens também. Eles têm um fundo branco. Há também uma fronteira Ovidius para os depoimentos. Então vamos fazer isso. Vou voltar para cá. Vou rever dois Main que CSS e vamos fazer isso. Vou pegar membros da equipe. Deixe-me tentar de novo. Eu vou descer aqui, colar isso e vamos mudar o nome de membros da equipe para testar mais. Neil está testando mais gritos no joelho. Ok, então vamos em frente agora e na primeira aula, o que vai ser um testemunho. Sim, Ok. E, uh, tudo bem, então vamos adicionar primeiro, um tamanho de telefone, que seria 17 pixels. Vamos agora adicionar a cor de fundo, que vai ser branco. Ok. E, em seguida, vamos também adicionar a borda porque eles têm evitar-nos está indo para um pixel. Ah, sólido. E eu sei que a cor aqui vai ser mais fácil. E zero fácil zero. Ok, há também uma fronteira de ideias. Não se esqueça dessa. E o sangue dele está aqui vai ser de 10 pixels. E, hum, é isso. Tudo bem, deixe-me ir em frente e salvar isso e vamos ver o que temos agora sua cabeça de volta aqui e cada primeira página e lá vai você. Ok. Então, obviamente, agora precisamos adicionar algum preenchimento para afastar o texto das bordas. E também adicionar alguma margem para depoimentos separados um do outro, e também você pode notar que o com todos os depoimentos são um pouco mais curto do que o recipiente Regula com. Então teremos que definir um máximo para nossos depoimentos também. Então eu vou voltar aqui e vou fazer isso. Eu vou entrar aqui. Vamos adicionar o bloco em primeiro lugar, então eu tenho um padrão aqui de 12 pixels, e eu tenho uma margem de 12 pixels por 20 pixels. E finalmente, vamos definir algo chamado Max com Ok, Max com aqui vai ser Vamos com 800 pixels. Certo, então vamos salvar isso. Não vamos dar uma olhada nos novos depoimentos, e aí está. Certo, estamos chegando lá. Vamos agora tentar mudar o estilo do próprio texto. Então nós temos a classe autor flutuar para a luz, e nós também temos o texto com afrontado de cerca de 300. E também, uh, o estilo da fonte é itálico. Então vamos em frente e fazer essas mudanças. Eu vou entrar aqui. Vamos com teste t mais neo e casacos. Uh, ok. Então eu tenho o peso da frente em 300 ter o estilo divertido itálico. E eu também vou adicionar uma linha alturas de um ponto cheio. Esses são os três que eu tenho. Então vá em frente agora e adicione este conto em quatro. O autor. Então lembre-se, estamos flutuando o autor para a direita. Então vamos fazer isso. Eu vou desistir. Eu não apertei Enter para a pulseira da faculdade. Faça isso de novo. Ok, deixe-me remover este f aqui como voltar para dentro, Tab flutua, e nós vamos flutuar este cara para a direita. E o que mais precisamos acrescentar? Ok, vamos adicionar uma margem superior também. Eu tenho cinco pixels e lá vai você. Tudo bem, vamos em frente. Agora, guarde isso e vamos isso acontecer, ok? Vou refrescar-me. E lá vai você. No entanto, você notaria que o também está quebrando a estrutura, porque bem, adivinhe? Estamos flutuando nele para o branco. Então, para corrigir isso para garantir que os elementos flutuados permaneçam dentro do bloco de escritórios, o que vamos fazer é entrar aqui, e vamos simplesmente exibir nossos depoimentos como em bloco de linha. Incrível. Vamos salvar isso. E agora, se eu voltar aqui e me refrescar. Lá vai você. Então é exatamente assim que você pode corrigir problemas flutuantes quando você está lidando com o Dave. Se você está flutuando qualquer um dos elementos para a direita ou para a esquerda definir os pais Dave para exibir como um bloco alienígena e ele não vai quebrar a estrutura mais. Ok, estamos quase lá. No entanto, você notaria que aqui, o segundo e quarto depoimentos estão flutuando para a direita. Então, como podemos alcançar exatamente o mesmo resultado? Bem, deve ser bastante óbvio neste momento. O que vou fazer é muito simples, vamos criar uma nova turma para o segundo e quarto depoimentos. Eu vou entrar aqui e vou ligar para aquela aula. Certo? Isso é exatamente a mesma coisa aqui também, certo? E agora vamos voltar a um principal que CSS. E o que eu vou fazer é ir todo o caminho até o topo onde nós temos a seção direita na seção de layout de outros. Então, aqui mesmo. Vamos descer aqui agora e dizer que qualquer classe com direitos, qualquer elemento com a classe branca, quero dizer, vamos flutuar para a direita. É seguro. Aquela cabeça de volta. Aqui se refere a página e lá vai você. Então nós somos uma licença um Oh, nós ainda temos que adicionar o fundo. O fundo aqui é como uma coluna diferente. Lembrem-se, já demos a aula da Grey Dash BG. Então eu vou para aqui agora e bem aqui eu vou apenas dizer, ah seção ponto cinza traço BG. E vamos dar a isso uma cor de fundo de cor de fundo de F o F zero F zero. Vamos salvar essa. Volte para dentro. Aqui se refere a página e lá vai você. Então eles deixam o desaparecido agora é, é claro, os símbolos do casaco colorido, que, é claro, vamos dar uma olhada em ah bit mais tarde. Mas é assim que se constrói. A seção de outra pessoa do vídeo alemão Avonex. Onde vai agora adicionar nossos clientes? Te vejo então. 59. Construindo a seção de clientes: bem voltar em breve no vídeo das pessoas é adicionado com sucesso e estilizado são depoimentos. Mas agora é hora de adicionar. A seção de clientes terá que adicionar os logotipos de todas essas empresas. E, claro, a seção de clientes é uma seção muito, muito popular em qualquer site de negócios porque o negócio tem que mostrar potencial em novos clãs que, hey, você sabe, nós trabalhamos com esta conferência antes. Nós temos a experiência, sabe, nós éramos competentes no que fazemos. Então é sempre uma boa idéia mostrar o portfólio do clã. Agora eu quero que você passe algum tempo para pensar em como podemos exibir esses logotipos. A seção HTML deve ser bastante simples. Terá que criar uma nova seção, terá o dia da classe de conteúdo como de costume, e então podemos usar uma lista para exibir os logotipos. Mas então pense no aspecto CSS dele. Como é que vamos mostrar este logótipo? Tínhamos feito algo semelhante. Admitimos a equipa onde tivemos dois gols, mas neste caso terá três regras em vez disso. Mas haverá as mesmas bandeiras de exibição e assim por diante e assim por diante. Sabonete, assim como com o desafio testemunhos representado para você, se você quiser passar algum tempo para transferir, Tem como podemos exibir esta seção por presságios, pausado o vídeo. Vá em frente e dê o seu melhor ao mínimo. Tente criar o aspecto HTML. Então tente criar a seção do Dave, a classe on ordenada, bem como os menos itens para cada um destes são logotipos. Mas vamos em frente e fazer isso. Agora eu vou para colchetes como de costume e vamos para o índice dot html. Então, aqui em baixo, basta ir em frente e criar uma nova seção e ok, vamos obter um I D off clientes, assim como com as seções ou os clientes. E então vamos dar a aula fora do fundo da imagem porque temos o saco na imagem de duas pessoas apertando as mãos. Tudo bem, então vamos criar algum espaço. E então nós vamos chegar agora e no primeiro dia de aula é igual, vamos chamar isso de conteúdo. São as mesmas classes de conteúdo de sempre. Vamos fechar esse e, em seguida, aqui vamos adicionar o título, que seria idade, também. E depois serão os nossos clientes. Ok, vamos em frente na nova linha. E agora é aqui que vamos começar a adicionar a UL. Vamos dar a isto uma aula da nossa lista de clientes, está bem? E, em seguida, dentro deste, você terá agora o primeiro menos item L. I e, em seguida, dentro deste item da lista. Vamos em frente e adicionar o primeiro logotipo l então vamos usá-lo como um link. Também. Assim, uma árvore, se for igual, usará apenas a hashtag representar o link. Vamos adicionar destino igual a e, em seguida, no espaço em branco da escola para que quando as imagens são clicadas , ele vai abrir em uma nova guia. Vamos fechar isto e agora para dentro. Finalmente, todos os nossos oito agora terei a fonte da imagem igual. E agora vamos pegar as imagens para que ele vai estar dentro da pasta Ativos e então você vai ver os clientes. E então você terá dito que nossa casa filha P N G. Então deixe-me ir em frente e simplesmente copiar o nome. Vamos copiar isso. Vamos voltar para os colchetes e bater à direita. Tudo bem, então vamos simplesmente dizer bens e então ah, imagens. E eles vão dizer clientes. E é isso. Conjunto de casas. O PNG. É isso, bem ali. Vamos fechar isso e vamos adicionar o texto Olt também. Bom para S e o vai chamar isso disse nosso logotipo casas. E lá vai você. Então, agora a única coisa que você precisa fazer isso bem ao lado e mostrar que fechamos tudo o que temos, as tags A fecham. Temos os ataques L. Fechar. Então temos que fechar. O Rul. Isso é perto de você. L que está fechado é fechado uma seção tão perto também. E acho que estamos prontos para ir. Vamos em frente e salvar isso. Vamos voltar aos nossos sinos. Ah, foram primeiro uma página e lá vai você. Então agora temos um primeiro logotipo aparecendo, então será exatamente o mesmo processo novamente. Eu vou adicionar os novos itens da lista para os logotipos principais são postados vídeo, e eu estava no vídeo uma vez que eu adicionei todos fora deles. Bem-vinda de volta. Como você pode ver, eu adicionei todos os homens e logotipos para as empresas restantes, então já vamos em frente para salvar isso. Vamos voltar sobre o seu Mas eu estava ah simplesmente atualizou a página. E lá vai você. Então agora temos todos os logotipos aparecendo. Então Billy Kuwait no aspecto HTML, não é realmente tão difícil. Neste ponto, você deve estar confortável criando suas seções, seu Dave e usando os elementos U L e L I para exibir os logotipos. Mas ovos de evento alemão vídeo bem, mas agora vai dar uma olhada em como podemos estilizar a lista de clientes Elsie, em seguida,. 60. Estilizando a seção de clientes: Bem-vinda de volta. Tão niilista. Veja como enfraquecer o estilo da seção de clientes. E como eu disse anteriormente, você deveria estar pensando em coisas como bandeiras de exibição, talvez uma direção flexível da linha. E, em seguida, talvez para também remover o estilo de lista coisas como isso. Então é muito parecido com “Não venha aqui para comer carne”. Parece que sim. Vamos começar o show. Eu vou crescer antes de tudo a parte dos serviços porque nós vamos fazer você assim exatamente o mesmo dizer, Cisco para exibir a imagem de fundo. Então basta copiar isso e podemos usar isso para criar uma nova seção quatro. Os clientes. Vou mudar de serviço para clientes. E então, é claro, aqui vai mudar os serviços para clientes. Ok, vamos em frente e salvar isso. E vamos nos certificar de que está funcionando tão bem. Primeiro a página e lá vai você. Está bem. Incrível. Então tivemos que implorar uma imagem mostrando. Bom. Agora vamos começar a estilizar a classe UL real segurando os logotipos. E, claro, essa classe é a lista de clientes, como você pode ver. Então é aqui que vamos começar a adicionar o display flex e assim por diante. Então vamos fazer isso. de Esqueci-medemudar de serviço para clientes. Vamos fazer isso rapidamente. Clientes. Ok, então vamos começar agora com a classe de clientes Dash List. E como eu já disse, várias vezes, vamos usar o display. Ah, Flex. E então também podemos adicionar a direção flex. Vamos com o fluxo. Vamos adicionar a profecia do rap flexível e chamaremos isso de nosso rap também. E porque o tipo menos estilo se lembra, não queremos nada disso. Então, vamos dizer “nenhuma”. E, ah, bem, não tem nenhum padrão que possa estar disponível disse isso. Zero. Vamos salvar essa cabeça de volta para o nosso navegador. Bem, primeiro da página e lá vai você. OK, bom. Então agora está começando a tomar forma com isso. O que precisamos fazer agora, é claro, seria adicionar alguma cor de fundo para os logotipos. Nós também podemos definir um com aviso aqui que nós temos quatro logotipos em cada linha, então nós devemos estar pensando em qual, como talvez 23% ou 24% bem ter que adicionar alguma margem também. Você pode ver que temos alguns vídeos de fronteira também na mistura. Então vamos em frente e adicioná-los. Vamos voltar para cá, então vou criar uma nova linha. Eu vou dizer clientes traço listas e, em seguida, l i E agora vamos que dar-lhe o com eu tenho 24%. Vamos criar uma margem. Eu tenho um, ah por cento 00 e, em seguida, 1% da esquerda também. Vamos adicionar a cor de fundo e eu vou usar um RGB um valor aqui. Ok, então vai ser difícil ser um, uh 255 255255 e 1.8. Está bem, mas não te esqueças que temos um raio de fronteira. Você tem cinco pixels? E, claro, não vamos esquecer o bom e velho tamanho da caixa. Comprei uma caixa e, ah, sim, vamos entrar e guardar isto e ver como é agora. Atualize a página e lá vai você. Então, não é tão ruim. Quero dizer, nós temos os logotipos exibindo uma luz e tanto, mas você pode ver agora que não é exatamente a mesma coisa. Os moradores daqui estão perfeitamente alinhados com o centro. São muitos padrões ao redor do logotipo. Portanto, para conseguir isso terá de levá-lo para o imposto A. Porque lembre-se, é a aderência que eu realmente segurando as imagens. O l Um imposto manter um imposto. Mas é o próprio imposto A segurando as imagens. Eles querem mirar as imagens. É bom ter alvos no imposto A para padrões, coisas assim. Então vamos fazer isso como se eu voltasse aqui. E agora eu vou dizer, cliente traço. Pelo menos uma etiqueta. E a primeira coisa que podemos fazer aqui é Legis Forcible exibição como um bloco em linha. Ok, e então agora podemos adicionar um bloco e vamos passar 20 pixels ao redor. Vamos também dar-lhe um com de 100%. Ah, 100%. Não vamos esquecer o bom e velho tamanho da caixa, mas ah, caixa e ah, é isso. Vamos continuar agora e salvar isso e você deve ver algumas melhorias importantes. Vamos vir aqui, atualizar a página e dizer que, do ponto de vista do Dexter, as imagens parecem perfeitamente bem. Eles parecem tão bons quanto o que temos aqui. No entanto, eu ia adiar falar sobre isso até irmos para a seção responsiva do curso. Mas vamos fazer isso. Certo, vamos, mas por experiência, vou minimizar a janela aqui. E você pode ver que quando minimizamos o comprimento fora do com fora do nosso navegador, você pode ver agora que os moradores olham para começar a cabeça. No entanto, se formos para a nossa visão mortal, dê uma olhada nisto. Isto parece perfeito, certo? Então, se este conjunto foi visto em um telefone celular, é exatamente assim que ele ficaria. Mas Oz agora ficaria assim. Isto é muito, muito mau. Então, o que poderia estar acontecendo aqui? É aqui que agora temos que mirar as próprias imagens. Então eu ia fazer isso mais tarde, mas vamos fazer isso agora mesmo para forçarmos nossos logotipos a ficar bem e responsivos. A primeira coisa que você precisa fazer, no entanto, é adicionar a propriedade overflow para uma preocupação de táxi agora que os logotipos estão pulando fora da nossa fronteira. Então vamos vir aqui e simplesmente dizer “transbordamento” e podemos esconder isso. Está bem, vamos. Por favor, salve isso e vamos voltar aqui e atualizar. Ok, bom. Agora você pode ver que o logotipo não está mais saindo de suas fronteiras. No entanto, para que os logotipos para encolher junto com o navegador para que, como nós minimizamos o com do irmão, as imagens também encolhem de acordo terá que definir um máximo com propriedade de 100% para as imagens eles mesmos. Então vamos fazer isso como se eu estivesse indo em frente aqui. Eu vou dizer clientes lista traço e uma imagem. E agora é aqui que a magia responsiva acontece. Nós vamos dizer Max com off 100% basicamente estavam dizendo Apenas continue encolhendo a carne como você encolher A largura dos sutiãs também são encolher a imagem também. E então, para uma boa medida, vou dizer este bloco de jogo. Ok, vamos em frente e salvar a cabeça de volta aqui. Refere-se ao Page e não está funcionando. O que está acontecendo? Oh, eu sinto muito. Escrevi um cliente errado. Ah, caramba, peça desculpas. Mas fico assim quando estou muito entusiasmada. Certo, então essa é a lista de clientes que salvou isso. E de volta aqui refere-se a página e lá vai você. Incrível. Incrível. Incrível. Então não se parece muito com o que temos aqui porque isto é basicamente duas colunas . Considerando que aqui ainda temos quatro colunas. Então isso é algo com que lidaremos muito mais tarde assim que chegarmos ao aspecto responsivo. Mas não, como você pode ver, que os logotipos ainda são mantidos dentro de suas fronteiras. Isso é porque nós dissemos no México 100% e nós também exibi-los como blocos. Então isso é muito bonito para projetar a seção de clientes com os logotipos. Então Alemanha Vendex vídeo Bill vai agora ir em frente e começar a adicionar o formulário de contato EUA. Vejo-te então. 61. Criando o formulário de contato: Bem-vinda de volta. Então estamos quase lá. Nós praticamente criamos todas as seções principais. Mas por último, mas não menos importante, temos o contato ou seção. E, obviamente, isso é muito importante porque, como um negócio, você quer longe para potenciais clientes e clientes para chegar até você. Então nós vamos construir esta forma que você está olhando agora e criar formas é uma besta totalmente nova inteiramente quando se trata de externo, porque há muito, ah, muito para formas externas. Então eu vou compartilhar exatamente como podemos construí-lo. E de uma perspectiva de design, você deve estar pensando em Ok, nós podemos ter, como uma div pai segurar em. Talvez o rótulo neste caso seria nomeado teria talvez outro Dave segurando o campo real em si e coisas assim. Mas falaremos sobre isso um pouco mais tarde. Deixe-me mostrar-lhe o que eu fiz aqueles longe eu tenho realmente indo em frente como de costume para adicionar a seção I D, que será contato Os bons velhos tempos, é claro, de conteúdo adicionaram a seção título H duas tags entre em contato conosco e Eu também adicionei a introdução Você tem algo para nos perguntar. Você sabe, você só quer dizer oi acima sobre eu dar uma aula sobre intrusos que estarão navegando lá dentro. Tudo bem, agora, vamos começar a construir o próprio formulário agora para criar um formulário com HTML. Bem, vamos começar com a etiqueta chamada espuma. Ok. Agora, o formulário em si tem muitos tipos diferentes de atributos que você pode aplicar a ele. O primeiro eu vou aplicar aqui, mas será chamado de método. E o valor para isso vai ser post Agora há dois tipos de algas que podem aderir. Você pode ir com, obter ou postar. Basta adicionar igual a dois aqui. Tudo bem, então você pode ir com pegar ou postar. Vou suspender a explicação do que são esses dois por um tempo. Falaremos sobre isso um pouco mais tarde. Mas é aqui que a maioria dos desenvolvedores inexperientes tendem a realmente bagunçar. Eles costumam ir com obter em oposição a postar. Não se preocupe. Eu vou explicar exatamente o que estes são um pouco mais tarde, mas vamos apenas um rápido para método é igual post, e então eu vou dar-lhe classe muito simplesmente fora de um formulário de contato de alfabetização. Está bem, está bem. Essa é a primeira etiqueta fora do caminho. Nós criamos o formulário. Agora vamos adicionar a classe Dev off função. Porque se você olhar para o site agora, estes são essencialmente aqueles. Então nós temos cair aqueles e tipo de gosto de Dave em seu papel. Então um rótulo deviled hold e outro diferente segurar o campo de imputação e assim por diante. Então vamos usar a classe de Ole. Ok, vamos fazer isso. E agora dentro disso, Dave, vamos no primeiro dia que vai segurar o rótulo para que eles tenham classe igual. Vamos chamar esse Lee Bill Coluna Liberal, basicamente, e agora veja isso. Estamos criando rótulos agora, então o primeiro 1 aqui vai ser o rótulo, e eu vou dizer quatro. É basicamente certo. Agora estamos dizendo, OK, OK, este rótulo é para este preenchido em particular. Então, para fazer isso corretamente, eu vou adicionar igual a dois e então eu vou adicionar o i d para o campo, que irá adicionar um pouco mais tarde. Mas por enquanto é contato nome Dash. Esta é a ideia de migrantes que você usa para o nosso nome preenchido. Então rotular quatro nome de contato. E agora vou digitar um nome. Vamos adicionar dois pontos e fechar o rótulo. Ok, vamos fechar o dia também. Incrível. Agora vamos criar outro dia de agora para o próprio campo de entrada real. Então veja isso. Eu vou dizer que a classe div é igual e podemos chamar este campo de carvão holandês. Ok, agora veja isso em vez de rótulo. Agora vai ser imputável. E agora o I.D. I.D. qual é a identificação deste particular preenchido é o nome, certo? Então vai ser igual ao nome do traço de contato. Sempre certifique-se de que o valor total do rótulo e os valores de entrada i d são os mesmos. Então temos o nome do contato. Contacte-o aqui em baixo. Agora, quando se trata de outros atributos para entrada, há muitos, muitos, muitos fora deles. Provavelmente estão entre 15 e 20 deles. Obviamente, eu não posso cobrir cada um deles, então eu vou mostrar a você o mais importante e o mais popular. Na verdade, é para o combustível imputável. Então o primeiro 1 aqui nós adicionamos o ideal. Está em uma aula, então podemos fazer um stand. Ok, então esta aula será usada por toda parte. Vamos dar campo a ele. Ok, agora, calma é tipo igual a texto. Isso basicamente demonstra, ou indica o tipo off preenchido. Estamos à espera de um texto simples? Estamos esperando um e-mail? Estamos esperando números? Coisas assim. Então isso é muito, muito importante. E eu vou te mostrar um pouco mais tarde. Por quê? É extremamente importante. Então digite é igual a texto. E agora vamos adicionar o atraso da polícia. Então, por favor, aguente e podemos dizer iguais. E depois em casacos. Vamos dizer o seu nome, está bem? E por último, mas não menos importante, queremos tornar este campo obrigatório. Você nunca encontrará nenhum contato na Internet onde fornecer seu nome não é necessário. É sempre necessário a maior parte do tempo, pelo menos. Então, para fazer isso, eu só vou filmar re quieto. Isso é tudo o que precisamos adicionar necessário. Ok. Oh, alguns. Vamos em frente agora e simplesmente fechar isso, Dev. E então eu também vou fechar o Dev para a votação. Vamos fechar isso. Ok? E não vamos esquecer de fechar o formulário também, e lá vai você. Tudo bem? Vamos continuar agora e salvar isso, mas em frente, volta para o navegador. E vamos ver o que temos se refere a Page e lá vai você. Certo, então temos o nome da primeira etiqueta e depois o campo. Seu nome. Então o que eu vou fazer agora é, como de costume, eu vou pausar o vídeo e adicionar os campos e rótulos restantes sobre o autismo. Uma vez que eu terminar, bem, volte. E, como você pode ver agora adicionaram os preenchimentos restantes. Então temos o preenchido para o e-mail de contato que temos para o título fora da mensagem. E então aqui embaixo, nós também temos a área de texto deles. A mensagem. Vá em frente, guarde isso e vejamos o que parece agora. Vamos refrescar. E lá vai você. É basicamente o que parece agora. Então deixe-me explicar todo o código. Eu adicionei. É exatamente a mesma coisa que com o campo de nome. Então temos outro baixo aqui. Temos o contato, e-mail, e-mail, a classe de campo, a idéia de e-mail de contato, esse tipo aqui, por favor. O Pip. atenção ao tipo aqui foi definida como e-mail. Isso é muito importante porque verifique este advogado. Se eu voltar aqui e ali, digamos que eu tento preencher algumas bobagens aqui e eu acerto. Submeter. Você vê, agora ele fica. A polícia inclui um símbolo de at no endereço de e-mail. Isso é porque temos indicado aqui que o tipo tem sido sentado e-mail se eu vim aqui agora e eu mudar isso para texto em vez, eu salvo. Eu volto aqui. Vamos apenas atualizar a página. Então eu vim aqui, gravando alguma bobagem de novo. Agora, quando eu aperto enviar, ele basicamente submete. Você pode dizer que não recebemos nenhuma mensagem dizendo que eles estão aqui. Você sabe que há um problema com sua sensação de e-mail. Por favor, adicione o símbolo at. Isso ocorre porque CSS ou cada equipe de outros neste momento não está esperando um tipo de e-mail imputado, simplesmente esperando textos. Então isso é o que é muito, muito importante sempre que você está saindo de seus campos de e-mail e mostrou que ele digitar aqui está definido para e-mail para que ele silício muito luta que, de fato, a pessoa adicionou um endereço de e-mail no campo tudo bem então para baixo você tem sido muito a mesma coisa, bem aqui para o título do contato, o tipo que eu mantive em branco. Como um título pode conter números, ele também pode conter texto, então geralmente é melhor deixar isso em branco e não adicionar nada lá. No entanto, observe uma grande diferença para a mensagem para a área de texto que não usamos impute. Em vez disso, usamos Text Avia, então esse é um tipo diferente de sensação que eles podem criar com cada templo. Formulários são muitos deles. Então, sempre que você está tentando criar sua área de mensagem, sempre usado área de texto e, em seguida, aqui aviso, Eu disse que isso é igual a cinco. Isso basicamente indica quão alto o campo vai ser o vácuo agora, e eu mudo cinco para, digamos, 10 por exemplo. Agora isso vai torná-lo muito mais alto. Então olhe para o tamanho agora. Se eu atualizar agora, você pode vê-lo muito mais alto. Mas não é sempre isso, senhor, porque você sempre pode clicar e arrastar. Ah, usando o rato aqui para que você pudesse apenas viver lá uns cinco. Você realmente não tem que ir mais alto que isso, e é basicamente isso. Agora aqui em baixo, nós temos uma classe de entrada especial para o botão enviar, e se você prestar muita atenção, tem realmente indo em frente para adicionar com as classes para Button e Green. Lembre-se disso para as mesmas classes foram usadas para estilizar o canto inferior direito aparecer para o get in tocha. Então é basicamente o mesmo estilo. E é por isso que eu simplesmente adicionei nosso botão e verde para ele. E, claro, nós vamos foi deixado uma peça. Tem um garanhão aqui. Vamos voltar aqui. E, hum, é basicamente isso. Então o tipo aqui foi definido para enviar uma onda. É por isso que você tem isso de carne, Tex India Mostrando. E isso é muito bonito para construir o formulário HTML. Então Avonex alemão muito bem não vai em frente e começar a estilizar o formulário de contato 62. Estilizando o formulário de contato 1: bem-vindo de volta no vídeo anterior é criado com sucesso os campos para o nosso formulário de contato conosco . Mas agora precisamos fazer alguns cereais estilo em. Agora, antes de entrarmos em aviso deles aqui que eu tenho que enviar como o texto real e não enviar aqui. Então, Luva é o valor padrão que você é, mas nobre sempre tem. No entanto, se você quiser modificar o texto tudo que você e introduzido para voltar aqui onde você tem o botão ALS clássico de entrada verde e, em seguida, tipos de carne ou você poderia fazer aqui é simplesmente fornecer algo conhecido como o caso de valor contra uso valor é igual e, em seguida, simplesmente em maiúsculas como enviar Salvar isso, Vamos voltar para dentro. Aqui se refere a página e lá vai você. Então agora ele foi enviado. Então é assim que você pode personalizar o texto para o seu botão. Certo, vamos dar uma olhada nesse estilo que precisamos fazer. E aqui agora, você pode ver que parece haver algum tipo de tipo um máximo com para o formulário de contato conosco. Tudo está alinhado no centro também. Então vamos fazer isso eu vou voltar dois suportes. Agora, lembre-se, nós demos a classe formulário fora do formulário de contato. Então vamos fazer isso. Vou em frente, pegar texto e vir aqui, colar isso e trocaremos clientes para contato. E então vamos começar rachando. A turma vai estar em forma. Eu sinto muito. Contacto. Forma holandesa. Vamos abrir o aparelho do nosso colega. Então nós vamos fornecer um máximo com, e isso faz com que ele vai ser 680. Pixels também serão aplicados. Então, margem para tentar levá-lo para o centro para que eles possam ir. Isso é um píxeis de pelúcia do top auto. Então isso agora vai centralizar o ex-assessor no meio. E vamos adicionar em março de 20 pixels para a parte inferior e, como sempre, tamanho do livro. Eu vou com o dinheiro da fronteira. Ok, vamos em frente agora e vamos salvar isso. Vamos voltar para ele. Mas eu estava... Refere a página. E lá vai você. Está bem. Tudo bem. Estamos chegando lá. Então agora é como um leão outro centro partiu, mas precisamos esticar os campos, torná-los um pouco mais, e também adicionar um monte de padrão. Então, com a estrutura agora, basicamente com uma classe fora do traço liberal, chamar e preencher traço carvão, eles terão muitas exatamente as mesmas propriedades e exatamente os mesmos valores. Então vamos fazer isso. Está bem? Vou criar uma nova declaração aqui. Então vamos chamar esse rótulo de ponto de carvão traço e, em seguida, vírgula para que possamos adicionar o outro, que é carvão traço campo. Vamos abrir o aparelho do nosso colega. Então o primeiro que vou fazer aqui é isto. Vamos adicionar algumas margens. Não, então eu tenho 1% zero e depois 1% e depois outro 1%. Ok, vamos adicionar algum padrão também. Então eu tenho cinco pixels ao redor. Acho que deve ficar tudo bem. Vamos lá. Alguns livros tamanho na caixa de borda e menos, mas não listas estavam indo para fazer alguma flutuação, então vamos flutuá-los para a esquerda. Ok, mas agora é aqui que as coisas ficam interessantes, você sabe, tê-las na mesma linha terá que definir com s para elas. E, claro, vamos começar com o traço da etiqueta. Legal. Agora os rótulos não são assim tão longos? Vamos ver. Então os rótulos aqui podem ser como, digamos, 25%. Talvez, e então o real sente que seria mais como, digamos, 70% ou algo assim. Então vamos voltar aqui tão nivelado. Mas o carvão terá um com off. Vamos 25%. Ok, enquanto eu leigos Bill, eu sinto muito, não rótulo, mas campo. Dash Coal agora terá um com nós não vamos com Center 5% porque queremos algum espaço. Então vamos com, digamos, digamos, 72% em vez disso. Está bem? E, ah, vamos em frente e salvar isso e vamos ver como isso vai parecer Vamos voltar aqui . Eram primeiro uma página e lá vai você. Está bem. Ok, tudo bem. Agora, você pode ver lá agora na mesma linha porque nós demos conjunto com eles, e nós também flutuamos para a esquerda também. Ok, Agora vamos em frente e começar a projetar os rótulos reais eles mesmos e também o campo. Então o que eu tenho aqui é vamos ver, isso é meio grande. Vamos dar uma olhada no que temos. É um pouco grande peso frontal de talvez 300 cores e, em seguida, notou algo muito, muito interessante quando pairamos o mouse sobre o rótulo. Você vê como ele agora se vira para a mão com o dedo apontado para cima, mas o suficiente para fazer algo assim? Porque agora, como está, não estamos entendendo isso. Então vou apresentá-los a um novo tipo de propriedade. Então vamos fazer isso. Vou voltar para cá. Então, primeiro de tudo, direcione o rótulo em si. Está bem? A etiqueta da etiqueta. Então veja isso. Vou adicionar um tamanho formado. Eu vou com 18 pixels. Um peso dianteiro fora de 300. Ah, vamos adicionar uma cor de 555555 E agora, dê uma olhada nesta propriedade chamada cursor. Ok, é assim que podemos mudar o símbolo de aparece quando pairamos sobre o rótulo real em si. Então o valor aqui vai ser ponteiro. Certo, esse é o volume de dia. Então vamos em frente. Salve isso e vamos ver, vamos atualizar. E agora eu posso, você sabe. Então, quando passarmos o mouse sobre o rótulo agora, o símbolo muda da seta para a mão. Então é exatamente assim que você pode usar a propriedade crucial e o valor fora do ponto. Ok, então é isso para a gravadora. Vamos olhar se sente assim. Sim, os combustíveis têm. Vamos ver. Talvez um tamanho de telefone digitando algo lá dentro. Ok, se um tamanho culo com a gente, bem, nós vamos ter que resolver com, digamos, uma adição de digamos, 100% como um raio de fronteira. Adicione algumas bordas também. Certo, vamos fazer isso. Vou voltar aqui e vamos dar uma olhada no que vamos fazer. Vamos adicionar a classe de campo, porque lembre-se, estamos usando a classe off campo para todos os campos de classe imputada e C aqui, campo preenchido e assim por diante. Então vamos voltar para cá. Vamos voltar para Minden CSS. E vamos fazer isso. Ok, o primeiro que vamos fazer seria adicionar um tamanho de telefone e para o tamanho divertido que eu vou usar , digamos, 17 pixels em vez disso. Da mesma cor. Vamos ficar com o 555555 Nós vamos adicionar preenchimento aqui de 10 pixels e 12 pixels também, e nós temos uma borda e o corpo vai ser um pixel vai ser sólido. E então o chamador vai ser de de de de de ha anos sessenta. Temos um raio de fronteira de três pixels. E não vamos esquecer o bom tamanho de livros velhos em que vai ser caixa de fronteira. Ok, primeiro quero dar uma olhada e ver o que temos. Vamos salvar isso. Vamos voltar aqui. Foram frescos e OK, então agora você pode ver que os campos ainda não estão indo cheio com tão simplesmente vai adicionar com off 100%. Então este direito, que deve fazer o truque. Vamos em frente, salve esse garoto de volta aqui. Refresque. E lá vai você. Então em outros campos estão indo cheio com incrível. Agora vamos apenas estilo o espaço reservado considerar espaço reservado aqui tem seu, você sabe, peso frontal de 300. É n estilo talic e a cor parece um c C c. Então vamos fazer isso muito, muito rapidamente como cabeça de volta aqui vamos fazer isso é apenas muito simplesmente vai digitando campo. Ok, mas agora vou adicionar o pseudo elemento novamente. E desta vez ele vai ser agora espaço reservado. É assim que podemos ocupar o lugar em nossos sentimentos. Então abra as chaves de cor e simplesmente adicione a onda frontal de 300. A cor aqui vai ser si, si, si, si , si, si. E menos banal é que temos o estilo dos fundos definido para itálico. Está bem, seguro. Vamos voltar aqui para a primeira página. E lá vai você. Incrível. Então alemão Avonex fiança vídeo vai agora continuar a estilizado e, de fato, terminar estilizado no formulário de contato. Vejo-te então. 63. Styilng do formulário de contato 2: Bem-vindos de volta. Vamos terminar estilo em nosso formulário de contato, nós temos que fazer algumas mudanças no botão enviar porque aqui mesmo notar que ele tem, como, um bom rádio fronteira, mas também e esperamos sobre ele notar que o saco em Calo tipo de mudanças por lá. Temos, como, uma sombra de dólar na cor da manteiga também muda tão ligeiramente. Então vamos fazer algumas alterações no botão de envio. E, claro, o texto intra também precisa ser aliados de estilo. Então vamos fazer isso. Vamos voltar para cá agora. Aqui, outro estilo dois, o botão para a nossa forma. Vou adicionar uma classe única a ela. Tudo bem, então eu vou comentar agora e onde nós temos bíblico como fundo verde. Vou adicionar enviar como uma classe adicional para separá-lo dos outros botões. Ok, então vamos guardar isso. Vamos voltar aqui agora e começar a estilizar os botões. Então eu vou com o botão, não me submeta. Vamos abrir. O bom e velho aparelho Kohli e eu tenho comigo aqui mesmo com conjuntos para auto, temos margens que zero também. E também vamos adicionar o cursor. Vamos conseguir, ponteiro. Ok? E depois um refrigerador de fronteira. E eu tenho desenvolvido com Bada Koloa aqui define para sete b nove e depois um 00 E é isso . Ok, vamos fazer rapidamente os efeitos de pairar também. Então, botão que enviar. E agora, quando passarmos sobre ele, vamos fazer algumas mudanças. Vamos entrar aqui e vamos nos trocar. Em primeiro lugar, a fronteira Coehlo. Certo, na verdade, adivinha? Vamos ficar com a mesma cor, mas vamos aplicar uma transição. Então vamos ficar com o Craca de sete B A 900. Ok, livros, livros, Sombra. Não vamos dizer isso a ninguém. Então não há sombras de livros para isso. E agora é aqui que vamos fazer a mudança real. Cor de fundo. Mudaremos o fundo. Coehlo para D 247 Ok, tudo bem, vamos em frente e salvar isso. E vamos ver os novos efeitos em ação. Vamos atualizar e OK, para que você possa ver bem ali que quando passarmos o mouse, ele faz uma mudança. No entanto, note, claro, a transição Isso é muito mais suave do que nós temos atualmente aqui. Isto é apenas instantâneo. Então vamos adicionar transição. Vou tocar a transição diretamente para a aula de submissão. Então aqui vai apenas dizer transição. Eu fiz a transição para a cor de fundo, e vai ser 0,2 segundos e nós vamos apenas aliviar. Ok, vamos em frente. Salve isso. Vamos voltar aqui. Refere-se a Page e lá vai você. Isso é muito melhor do que o que tivemos inicialmente. Ok. Tudo bem. Então a última vez que você faz agora seria apenas para estilizar o texto de introdução. Então vamos fazer isso. Vou voltar para cá. Vamos até o topo, porque é a classe AP que aqui em baixo. Podemos fazer a introdução do ponto p. Vamos abrir nossas chaves de colega e OK, então tamanho do telefone. Eu tinha um tamanho divertido fora 19 pixels bem aqui, tenho um peso frontal. 500 e, em seguida, uma cor de 777777 e um alinhamento de texto com marcadores também está no centro. E por último, mas não menos importante, temos as margens. Vamos um jogo Algumas margens e um assim que eu tenho são 35 pixels, 14 pixels e, em seguida, 14 pixels. Certo, vamos salvar isso. Vamos voltar aqui. Vamos atualizar a página. E lá vai você. Incrível. Incrível. Incrível. Então isso é basicamente nós desenhando o formulário de contato fora agora no fechamento, nós ainda não tornamos o formulário realmente ativo porque agora como ele é, se alguém entrar aqui e preencher o formulário e o hit enviar, nada vai acontecer. Então, para que possamos realmente tornar o primeiro ativo para que recebamos o conteúdo do primeiro via e-mail, precisaremos adicionar algum código extra. Mas isso será o código P. H. H. P vai dar uma olhada nisso um pouco mais tarde e o custo em se preocupar. Não me esqueci disso. Eu também mencionei que temos os dois tipos de métodos de formulário postar e obter. Falaremos sobre isso um pouco mais tarde também. Mas eu também quero usar esta oportunidade para convidá-lo a dar uma olhada nos tutoriais de formulários HTML em escolas públicas para que você possa emprestar mais sobre os tipos de ordem fora de nossos campos de imputação . Então, como exemplo, apenas demos uma olhada no campo de e-mail, o campo de texto, um texto já preenchido. Mas você também tem acesso a, como o rádio preenchido, por exemplo, onde a pessoa terá que escolher entre. Isso teria que escolher apenas uma opção de um conjunto de opções diferentes. Então, por exemplo, aqui, você sabe que tipo de gênero você é? Mulher Miller. Você pode usar o vídeo Putin para isso. Você tem acesso a dois outros tipos de atributos, sobre os quais falaremos um pouco mais tarde, especialmente ação. Nós vamos subir ação muito mais tarde, mas aqui em baixo, onde você tem elementos de formulário HTML como eu disse, nós usamos o elemento de entrada, o elemento de seleção. Mas você também tem acesso a várias seleções, bem como texto todo o que falamos. Você tem acesso aos elementos do botão que usamos, mas no seu são combustível, disse lista de dados legenda Alguns destes você pode não precisar usá-los como tal, mas ainda é uma boa idéia para se familiarizar com todos esses tipos diferentes fora tipos de imputação. Então, sim, a imagem que você tem senha, pesquisa, e assim por diante e assim por diante, para que eu possa garantir que não importa o quão complicado isso de você tentar criar, você vai encontrar a imprudência necessária e atributos e elementos com HTML. Então eu vou convidar você quer. Eles vão passar algum tempo e apenas a família se criar. É mais fora desses tipos de imputação disponíveis, bem como elementos. Então é isso. Nós terminamos praticamente terminou o ou todo o site. Continua a ser a comida que precisamos criar. Então vamos fazer isso no próximo vídeo. Te vejo então. 64. Construindo o Footer: Bem-vindos de volta e chegamos à seção final. Teremos que construir o FOTA para o site. Então vamos dar uma olhada no que temos. Temos o que parece ser dois menus diferentes. O da esquerda tem links duas outras páginas ou lados externos e, em seguida, um para o branco tem os ícones de mídia social. E, em seguida, abaixo temos todos os direitos reservados texto. Certo, então vamos começar a construir a estrutura. Eu já adicionei a etiqueta do pé. Assim, da mesma forma que usaria a cabeça uma etiqueta até aqui para a cabeça erguida. Você também usaria rodapé para a seção do pé, evitou a classe de conteúdo e, em seguida, também ampla. Lembre-se, usamos uma classe de branco também em nosso cabeçalho para o logotipo e para o menu principal. Então eu apliquei exatamente a mesma classe aqui só para tornar o continente um pouco mais largo do que o Ocidente fora de nossa página. Então vamos fazer isso. Vou adicionar o primeiro Dave aqui, que seria o papel fora da classe OK, e agora vamos fazer isso. Ok. Vou criar AIDS na primeira classe, e isto será para a UL. Até agora, a lista forçada será igual à classe. Vamos chamar este de “pé”. Nosso cardápio. Ok. E agora vamos adicionar o primeiro I I. E então dentro vamos adicionar uma tag oito riff igual a então nós realmente não temos nenhum link. Persists vai apenas usado a hashtag para um lugar que e, em seguida, nós também adicionamos os alvos. Atributos são iguais E então ele vai ficar, claro Ah, em branco. E então vamos em frente agora e adicionar blawg no texto. Ok, então vamos em frente. Feche a etiqueta a. Vamos fechar a tag aliada também. E aí vai você. Dul não revelado também. Então vamos ver. Como é que parece? Vamos a salvo. Oops. Mas salvar a cabeça, o Dr. Broza se refere a página esperança. Desculpe. Um site errado. É este. Certo, atualize a página. Vamos descer aqui e lá você vai. Ok. Então nós temos blogado agora aparecendo bem. Nós ainda podemos fazer muito Stelling, que vamos fazer, mas então vamos também criar o primeiro item da lista para o nosso social, muitos à direita. Que vai ser Facebook. Ok, então vamos voltar aqui e vamos fazer isso direito. Lendl vai pegar tudo aqui. Vamos copiar isso. E depois vou vir até aqui. Acelerado, entregar de novo. Instantânea. Agora eu vou mudar o pé um menu. Então vamos com o menu social, ok? E agora aqui, exatamente a mesma coisa. Mas eu vou mudar. Vou adicionar atributos extras aqui, e serão os atributos do título. O título aqui será igual ao Facebook. Ok? E não vamos ter nenhuma mensagem aqui. Vamos fechar isto como está. Não se preocupe. Você vai ver o que eu vou fazer um pouco mais tarde. Então vamos ver a sua aula. Uma mentira. Eles têm e uh Ok, vamos fechar o último dia aqui para o papel. Vamos salvar. Vamos voltar aqui. Quem primeiro a página E OK, eu sei que você pode ver o Facebook, mas vamos usar uma imagem para representar o link. Então o que eu vou fazer agora é eu vou pausar o vídeo, e eu vou adicionar os itens restantes da lista para o menu Food Thai e também para o menu social também. Bem-vinda de volta. E como você pode ver agora, eu adicionei as tentativas restantes da lista para o menu do pé A. Temos eventos carreira como se políticas acusadas e, em seguida, para o menu social também adicionaram para Twitter, LinkedIn e drible. Ok, vamos em frente. Salve isso. Vamos voltar aqui. Bem, primeiro a página e o Hey, você vai. Incrível. Ok, último, mas não menos importante, temos o 2020 será impacto, todos os direitos reservados. E nós temos o símbolo de direitos autorais lá em baixo também. Então vamos acrescentar isso. Então eu vou fazer isso. Vamos ver. Então, logo aqui depois do UL eu vou entrar aqui e simplesmente adicionar uma tag de parágrafo e então para este símbolo para os direitos autorais, esse é o simples aqui. Então vai ser cópia semi-cólon. Então isso exibirá o símbolo de copyright para nós, e então eu vou dizer 2020 ponto de impacto na Web e então há apenas digitando todos os direitos reservados , e eu acho que é isso. Ok, vamos em frente. Guarde essa cabeça aqui. Atualize a página. E lá vai você. Incrível. Então, caipiras da Alemanha Video Web não começarão a estilizar nossa comida. 65. Esboço do Footer: bem, comebacks e vídeo das pessoas criado com sucesso ou rodapé. Mas agora é hora de fazer um projeto sério, e este é o objetivo final aqui. Então vamos ver o que precisamos fazer. Precisamos adicionar uma cor de fundo para o pé para cima. Precisamos descobrir uma maneira de flutuar o primeiro menu para a esquerda e depois o segundo para a direita. E também notar que os itens de menu os itens de texto. O texto aqui é tudo cap lock. Eles não têm nenhuma lista em grande estilo que eles não têm a coragem ou os círculos ao seu redor . Então essas são coisas que precisamos fazer, mas isso não foi intenção. Vamos voltar para colchetes e vamos para um principal que a CIA diz que vou criar uma nova seção como de costume para o rodapé. Vamos em frente e colar isso e então eu vou mudar o contato dois rodapé. Então vamos adicionar a nossa bolsa na cor e vamos segmentar a etiqueta do pé porque esta é a etiqueta principal, estão segurando todos os elementos em nossa comida. Então vamos voltar para os homens que dizem avaliar emigrante para digitar rodapé e agora vamos em frente e adicionar a primeira oportunidade será a cor de fundo. E eu sei que o valor aqui vai ser quatro para 44 para quatro e então nós também temos um colar para o nosso texto, que vai ser um e então um Deixe-me adicionar o hash tag. Certo, mais uma coisa que vamos adicionar será o tamanho do divertimento. Então, o tamanho muito divertido fora para 10 pixels. Ok, vamos em frente e salvar isso. E vamos dar uma olhada no que temos e ver o que foi feito. Ok, então nós temos a cor de fundo lá agora vamos tentar projetar os últimos itens reais . Terá que remover a decoração do texto, Remover a lista. Eu vou digitar mudou a cor, bem como transformar os ataques em maiúsculas como nós temos aqui. Também tem que adicionar um aviso de efeito de pairar. Quando passamos o mouse sobre os itens da lista a cor fica azul e, em seguida, também temos um na linha. Então vamos voltar para o maine dot c Avaliar Now aviso aqui índice dot html ser adicionado uma classe fora do pé nosso menu. Então vamos usar este cluster para obter os elementos aliados, bem como os próprios elementos r A r . Então vamos voltar para o Maine. Vou ver avaliar e, em seguida, bem aqui eu vou dizer menu de comida traço. Ah, OK, então o primeiro de um bom a fazer aqui é que todos nós vamos remover o tipo menos estilo e nós apenas vamos dizer nenhum. Nós não queremos qualquer estilo de lista em, e então nós vamos flutuá-lo para a esquerda, Ok, Ok, porque é para a esquerda, enquanto os ícones de mídia social são para a direita. E então vamos adicionar uma margem de 15 pixels para sua parte inferior aberta e zero para esquerda e direita. E então Padden Bull disse isso para simplesmente zero. Ok, Agora vamos rapidamente em frente e também apontar os próprios elementos aliados. Então pé um menu traço l eu também vou ter que flutuá-los. Eles também saíram. Então eles disseram que eles podem estar na linha e, em seguida, ordens em alguma margem sobre. Eu tenho cinco pixels, bem como oito pixels. Certo, vamos salvar isso. E vamos ver como isso vai parecer. Vamos voltar para cá. Atualize a página. E lá vai você. Certo, então estamos chegando lá. Então agora só precisamos segmentar o imposto A real, dispostos a remover o texto na linha, transformá-los em maiúsculas e assim por diante. Então vamos voltar aqui, e vamos fazer isso. Eu vou dizer Rodapé, menu de traço. E agora é aqui que vamos fazer um projeto sério. Então as primeiras coisas primeiro aqui vai ser a transformação do texto, que vai ser para maiúsculas. Oh, certo. Nós temos um colar, bem como uma decoração de texto e, em seguida,. Esta seria uma freira. Nós não precisamos de nenhuma decoração take em tudo. E, ah, vamos salvar essa cabeça de volta. Deixe-me atualizar a página. E OK, então estamos quase lá eles estão em menos de dois minutos. Fazer agora é adicionar como os efeitos de pairar. Você sabe que isso aqui nós temos aquele efeito agradável. Isso também é uma transição em curso. Então vamos antes de tudo, fazer isso. Certo, vou voltar para cá. Menu de dois rodapés. Vamos adicionar um fundo de borda. Tudo bem? Vai ter dois pixels sólidos. Mas então é bom ser transparente. Ok? E agora vamos adicionar o efeito de transição. É uma transição. Vamos mudar a ligação. Lembre-se, mudando a cor para como um estudioso azul, então vamos fazer 0,2 segundos e vamos aliviar. Vai haver o efeito. Mas também agora a cor da borda em si. Isso mudou a manteiga Coehlo. E isso vai ser 0,2 segundos também e, em seguida, aliviar também. Ok, então agora vamos em frente e adicionar os efeitos reais de pairar. Vai haver rodapé, traço, menu A e, em seguida, passar o mouse. Vamos agora adicionar nossos efeitos. Então o primeiro 1 aqui mudando vai ser a cor, a cor real fora do texto, e isso vai ser zero total b sete f f E então agora a chamada de borda. Oh, isto é o que vamos mudar. E isso também vai ser 40 b sete f f Vamos em frente agora, salvar esta cabeça de volta para nossos explosões, Professor Page e que você vá. Então, lá vai você. Agora temos o efeito de pairar quando passamos o mouse sobre nossos itens de lista. Então é isso. Por parte, avise a Alemanha em parte para Bill. Agora vai em frente. E nosso estilo, nossos ícones de mídia social, bem como o resto fora do rodapé. Vejo-te então. 66. Como obter nossos ícones de mídia social da Font Awesome: Bem-vinda de volta. Então o tempo tem ofertas comuns para adicionar nossas mídias sociais, Aikens. Mas se você notar que estamos usando o que pode parecer imagens, mas na verdade são ícones, certo? E você também percebe que aqui nós temos Aikens em outras seções também, como com a caminhada de arame conosco. Você tem X ações para o campo de pesquisa, os dados analisados, e assim por diante e aqui também. Temos vários ícones para os serviços prestados. Então, neste vídeo, eu vou mostrar a vocês de onde você pode obter esses ícones. E este é o site bem aqui. Chama-se fonte Awesome Doc Home, e é basicamente representantes. American Obtenha milhares e milhares de ícones gratuitamente. E deixe-me mostrar-lhe exatamente como você pode começar com a frente. Incrível. Tudo o que você precisa fazer é basicamente ir até a página de log in eles para mostrar a você Deixe-me voltar para a frente. Incrível. Certo, então esta é a primeira página que você veria. Então você vai ver o botão de início para livre aqui. Basta clicar em iniciar gratuitamente, e então você será atos para fornecer seu endereço de e-mail. Ela recentemente veio aqui em seu endereço de e-mail e, em seguida, clique no código Sand Kid. Agora, uma vez que você tenha feito isso, este é o tipo de e-mail que você iria receber. É basicamente uma forma de confirmar o seu endereço de e-mail e começar a configurar as coisas. Então, basta ir em frente, clicar em para confirmar seu endereço de e-mail, e então você será redirecionado para outra página, e esta deve ser a página para a qual você será redirecionado. Se você não vir esta página, basta clicar no link stat no menu de navegação principal. E então aqui, você terá que adicionar um nome para o seu projeto ou seu site. Então você pode dar-lhe um você pode ou dar-lhe um nome específico ou você pode apenas adicionar o nome do seu site e, em seguida, clique em, criar e usar este kit para que você será apresentado um link. Deixa-me mostrar-te o meu. Tudo bem, agora este é o que eu tenho e este é o nome bem aqui. Então você verá o link aqui em cima. Este é o link terá que copiar e, em seguida, colar em nosso arquivo html index dot. Eu vou em frente agora clique em copiar código de criança. E então vamos voltar para colchetes e aqui no nosso arquivo html index dot, eu vou adicionar um link aqui em cima em nossa seção de cabeças. E lá vai você. Então não vá em frente agora e salve para que este aqui este link é o que conecta nosso arquivo html index dot para a frente. Site incrível. Mas agora, como exibimos os ícones reais? Bem, vamos voltar para a frente. Incrível. Agora vamos ver o que eles têm. Então vamos em frente e fechar isso. Então, daqui, eu vou embora. Vou clicar no 1588 Free Aiken, e isso deve ser vai para uma página. Então, apenas como um exemplo, se você quiser exibir nosso Airbnb, podemos clicar no Airbnb aqui, e então você verá o código aqui. Você vai ver, eu classe que ele chama algo assim. Então este seria o código que realmente iria exibir este ícone em nosso site. Mas estamos tentando exibir o ícone para Facebook Twitter, LinkedIn e drible. Então vamos fazer isso como se eu fosse voltar aqui e onde temos a barra de ícones. Vou procurar o Facebook. Vamos procurar e deixar ou C teremos resultados de defesa. Certo, então temos 12 resultados correspondentes, mas vamos pegar o 1º 1 aqui. Então clique no ícone e, em seguida, bem aqui, eu vou clicar neste link para copiar o HTML. Você pode ver que foi copiado. Então agora eu vou voltar para o nosso índice com HTML. Vamos esfriar até aqui e depois, mas temos Facebook. Vou adicionar uma nova linha e colar o código. É isso. Vou em frente agora. Salve isso. Vamos voltar. Trump sobe, vamos atualizar a página. E lá vai você. Agora temos Facebook lá em baixo. Vamos fazer uma muito, muito rapidamente para o Twitter também. Então nós temos o Twitter e novamente nós vamos apenas ir em frente e ir no primeiro desejo. Então, vamos clicar no Twitter e vamos clicar neste link aqui mesmo. Voltar ao índice html. Mas temos Twitter ritmo esse código. Salve isso. Volte para o ah, site atualizou a página. E lá vai você. Agora temos Facebook e Twitter aparecendo. Então o que vou fazer agora é o nosso vídeo positivo. E adicione rapidamente os do LinkedIn e drible todos os direitos. Bem-vinda de volta. Vou ter que adicionar os ícones restantes para o LinkedIn e drible. E, claro, se eu voltar para o meu navegador, você pode ver que agora eu tenho um LinkedIn e drible exibindo também. Então é isso. Alemanha Vendex vídeo. Bem, vamos agora finalizar o estilo off, que viu muitos eu vou vê-lo então. 67. Estilizando o Footer 2: Oh, é uma bola voltar para a parte dois fora estilo em nosso FOTA, e anteriormente nós fomos capazes de adicionar o conteúdo que temos, ah, menu de navegação, mas também temos um menu social também. Então, agora vamos tentar fazer com que a filmagem se pareça exatamente com o que temos aqui. E vamos festejar Tackett, os Aikens de Mídias Sociais, e você pode ver a diferença enorme menu de decisão direita aqui é para a direita, então teremos que flutuar os minutos da direita. Mas também temos que mudar a cor dos itens de mídia social, aumentar o tamanho do telefone também. Teremos que remover o estilo da lista padrão, mas também notar que quando passamos o mouse sobre os itens do menu, você pode ver que temos uma calo de fundo que aparece. E também temos algumas cores para os próprios ícones para fora. Twitter e Linda, não drible azul é lido. Facebook é médico azul, então temos que tentar descobrir como podemos fazer nossos muitos parecerem exatamente como nós temos aqui tão iluminados ou começar o processo. Vou voltar para colchetes, e é isso que temos. Temos uma classe fora do menu social, então podemos usar essa para atingir nossos aliados, assim como nossa tag A. Então vamos fazer isso. Eu vou bater mais dois principais não CSS. E como sempre, vou pegar Fota. Mesmo que tecnicamente ainda estamos projetando o pé alto. Vamos criar uma nova seção para nossas mídias sociais. Então, vamos ligar para isto. Ah, então ela vai menu de comida E OK, então, mas os credores certificam-se de que pegamos tudo. Não pegamos o Ford Slash. Tudo bem, vamos. Mas vamos descer aqui e começar esse show. Então a primeira coisa que vamos fazer é atacar a classe social de muitos. Vamos abrir o aparelho do nosso colega. Então vamos fazer isso rapidamente, como você deve ter adivinhado, vai ter que fazer algum flutuar dentro Então vamos fluir isso para os direitos. Vamos remover qualquer padrão. Então mantenha esse zero Ah, o tipo de estilo de lista. Nós não queremos nenhum estilo Lee, então todos digam nenhum como de costume e vamos dar alguma margem. Temos sete pixels e, em seguida, zero. Tudo bem, vamos em frente e salvar isso e vamos ver o que temos e OK, então tudo bem. Neste momento, o menu está à direita. Vamos agora começar a estilizar os próprios itens de menu. Então, para fazer isso, vamos voltar para parênteses e deixar-nos parar. Ou primeiro, mirando a própria doença aliada. Então nós vamos dizer menu social dosh, e então eu e então você vai flutuá-los para a esquerda para que eles possam sentar-se de lado. Então fluir para a esquerda e, em seguida, as margens irão adicionar liberalismo, margem zero e ah, vamos. Nós dois pixels. Ah, OK, agora vamos começar. É que eu recebo o “A”. Então nós temos menu médico social por ano e o que vamos fazer aqui, Primeiro de tudo, vamos adicionar alguns Padden 10 pixels, e então ele também irá adicionar a exibição do bloco em linha e, em seguida, por último, mas não outros. Vamos adicionar um raio de borda de 20 pixels. Agora estamos adicionando os vídeos de borda porque notamos que aqui, quando esperamos sobre os itens do menu, você pode ver o círculo aparecendo em torno deles. Então isso é porque o irmão vídeos olhos em efeito e 20 pixels sair. Ou então vamos voltar para cá. Adicionamos o padrão. 10 pixels temos exibição em bloco de linha. Mas também temos uma garrafa. Vídeos de 20 pixels letras. Rapidamente. Vá em frente e adicione os efeitos de pairar. Está bem, deixa-me fechar este. Então temos o menu de traço social um e e pairar para que eles pairam. Efeito que temos aqui é a cor de fundo e vamos adicionar que Ah, temos hashtag f a f a f a. Vamos em frente. Agora guarde isso e vamos voltar aqui e ver o que acontece. Eu vou ser o primeiro a página e lá vai você. E então, quando passamos o mouse sobre os itens do menu agora, você pode ver que temos o fundo branco aparente e eles estão tão longe, tão bom. Mas reparem que aqui os ícones são muito maiores. Então vamos ter que fazer algum tamanho do fundo. E tenha em mente que estas não são realmente imagens. Eles são ícones afeiçoados, então você pode aplicar frente regular ah, propriedades para eles como você faria para texto regular para que possamos aplicar o tamanho do telefone, então eu tenho que torná-los um pouco maior. E nós também temos que adicionar alguns efeitos de cor quando nós ho sobre os próprios itens de menu sobre os ícones reais. Mas em uma força para atingir os próprios ícones reais, teremos que criar uma classe para eles, certo? Então, deveres de letras como eu vou voltar Teoh índice dot html e então para cada um desses ícones, vamos adicionar um ícone de classe fora. Então vamos adicionar Ícone para Facebook para Twitter. Vamos adicionar um para Lincoln também. E, em seguida, último panelista irá adicionar 14 drible. Vamos em frente e salvar a calma. Agora podemos segmentar os próprios ícones. Vamos voltar para cá. Vou dizer menu Social Dash e, em seguida, a classe off ícone. E agora isso vai começar a fazer o estilo real. Unser primeiro e primeiro é vamos mudar a cor eo valor vai ser um um um a. uma luz. próximo aqui vai ser o tamanho da fonte. Agora sei que serão 20 pixels. Então, em 20 pixels, vamos também adicionar alturas de linha de 20 pixels também, apenas para uma boa medida. E então também podemos adicionar um texto align off center. Ok, vamos em frente e salvar isso e vamos ver o que temos agora. Vamos voltar para cá. Refere-se a Page e lá vai você. OK, então estamos chegando lá gradualmente e percebemos que quando pairamos sobre os ícones, isso ainda parece bom. Mas então também temos que agora adicionar a mudança no efeito de cor. Então vamos fazer isso. Está bem. Quando voltarmos para colchetes, avise-nos os efeitos do pairamento do Kuwait para cada um deles. Então completo pode começar por dizer menu traço social e, em seguida, um e então vamos dizer hover. Está bem. E em pato ícone ponto f um traço fase livro Dash F. Isto é o que estamos mirando foram especificamente alvos nos próprios ícones. Certo? Então lembre-se que quando passarmos o mouse, os ícones também estavam pairando sobre a tag A. Tecnicamente, então temos que levar a etiqueta a, além de nossas classes de ícones também. É por isso que temos essa visão muito longa de Thekla. Então vamos em frente e fazer isso. Mas só vou adicionar muito, muito simplesmente vai dizer a cor aqui, vamos mudar isso para três. Seja 599 e oito e lá vai você. Então, basicamente, quando passamos o mouse sobre o Facebook, eu posso mudar sua cor de um A para este valor. Então vamos em frente e tentar isso. Vamos salvar isso. Vamos voltar. Refresque e tudo bem, não podemos ver porque está escuro. Vamos rapidamente tentar um tweet horrível. Certo, vamos ler para você rapidinho, então pegue isso. Vamos copiar um lá. Venha aqui, colar. Vamos confirmar a aula para o Twitter. É realmente o ícone é realmente f um Twitter traço. Ok, vamos voltar aqui para um tweeter traço e então a chamada de valor aqui vai ser 55 cento. E agora vamos ver se você não vai é uma mudança. Lá vai você. Lá vai você. Então agora o Twitter está funcionando corretamente. Vamos concluir o mesmo para LinkedIn e drible então novamente, eu vou apenas ir em frente e pegar este código. Apenas venha aqui, cole, venha aqui colar também. E vamos confirmar os ícones do LinkedIn, é F A. Na verdade, os credores nos pegaram, eu poderia esquecer, porque minha memória é muito, muito ruim. Então Linda pegou isso bem ali. Volte para ficar assim. Veja, avalie. E aqui mesmo vou mudar isto para “FA Dash Wingman”. E então, finalmente, os 14 dias de drible F a dash drible. Certo, então vamos fazer o Aziz. Bem, vamos colar isso. E achem . Então o 14 LinkedIn seu valor é realmente 0077 b cinco e, em seguida, o drible 14 vai ser e um C 89 completo Vamos em frente e salvar isso. Vamos voltar para cá. Atualize a página. E lá vai você. Incrível. Incrível, incrível. No entanto, não terminamos. Ainda entramos no ar como um bom efeito de transição porque notem aqui que temos efeitos de transição muito suaves. Então vamos fazer isso, certo? Vamos voltar para cá, e quando tivermos o ícone das redes sociais, vamos adicionar o nosso efeito de transição aqui. Então vamos dizer que a transição vai ser cor e e, como de costume, vamos 2,2 segundos e eu gostaria de dizer, Facilidade para fora. E lá vai você. Vamos a salvo. Vamos voltar, atualizar a página. E agora temos esse bom efeito de atenuação. No entanto, você deve ter notado que o ícone do Facebook parece um pouco diferente quando passamos mouse sobre ele dos outros. Os outros têm, bem, bem, círculos arredondados, como você pode ver. Mas o Facebook não é tão arredondado. Então, o que podemos fazer em uma situação como esta é simplesmente fornecer um com e uma altura para nossos ícones. Está bem? E, idealmente, você quer ir com o valor de dado o tamanho da fonte. Agora, até agora, demos um tamanho de telefone de 20 pixels para ícone. Então vamos fazer isso como se eu fosse ir em frente agora e simplesmente dizer que a altura é de 20 pixels e , em seguida, com 20 pixels desta forma. Sinto muito, Edna. Derrame com corretamente com tudo certo. modo que desta forma, os vídeos de fronteira terão agora sobre propriamente próprio nosso círculo de ex-Lembre-se dos vídeos do corpo onde aqui estava 20 pixels. Então, dado aos nossos ícones uma altura de 20 pixels com os 20 pixels e na frente dos pixels do trem, ele vai coincidir corretamente. Então vamos salvar isso e vamos voltar para um Broza primeiro uma página e depois vamos esperar por alguns segundos. Vamos descer aqui. E agora você pode ver que o Facebook agora tem o mesmo efeito de círculo de focagem, como no Twitter, LinkedIn e drible. Então, para o final deste vídeo ainda terá que projetar os direitos autorais. Tex e também adicionar, são muitas margens e padrões. Como você pode ver, há um monte de imaginar e padrão entre os dois são seções de menu, bem como o texto de direitos autorais. Então a primeira coisa que precisamos fazer, no entanto, é que precisamos consertar uma pequena flecha. E isso é porque aqui e eu arquivo html bem aqui. O texto dos direitos autorais está dentro do dia da aula, então deve estar fora. Então, vamos resolver esse problema. Ok, eu vou ir em frente agora e cortar isso e seus níveis colados fora da classe de surdos fora estrada porque então é o direito autoral. Tex é um solitário por conta própria. A classe da morte de Roe é a que detém o menu de rodapé, bem como o menu social. Então, se queremos que o pé um texto fique sozinho como está aqui, ele tem que estar fora do dia de segurar a comida. Menu tailandês terminou menu social. É por isso que estamos fazendo essa mudança. Então vamos em frente agora salvar. E então, se voltarmos para o Poza, devemos notar uma mudança imediata. E lá vai você. Então agora você pode ver que o texto completo está sozinho lá em baixo. Então, o que precisamos mudar aqui? Precisamos fazer alguma transformação de texto. Precisamos alinhar no para o centro também, e também adicionar muitos imaginários e padrões. Então vamos fazer isso. Vou voltar para continuar a ser o CSS. E aqui em cima temos comida. Eu só vou entrar aqui e dizer Fu tha e então tudo bem. E então eu vou primeiro dizer que o texto se transforma. Vamos mandar uma mensagem para uma linha de sexo para mandá-la e depois mensagens. Há transformação vai ser maiúscula ou cabo, mas também vai adicionar algumas margens e padrões. Mas vamos em frente e salvar isso antes de tudo e ver como é. Vamos atualizar e lá vai você, OK, Então vamos tentar adicionar algumas margens e padrão de conteúdo inteiro do aluno porque observe aqui , o pé nos menus. Que quantos você tomou? Algumas margens do topo em si, do pé para cima. Então o que podemos fazer é atingir o Dave principal segurando tudo, que é a classe de morte real do conteúdo. Então, vamos mirar nesta classe. Eu vou voltar aqui e logo depois da comida, eu vou entrar aqui e dizer comida e, em seguida, ponto conteúdo. E agora é aqui que podemos adicionar alguns padrões sérios. Então, lá vai dar um tapinha. Vamos com 15 imagens do topo 20 pixels esquerda e direita, 35 pixels da parte inferior e na margem para uma boa medida vai zero auto, Vamos salvar, e devemos ver algumas grandes melhorias agora. O fresco E lá vai você. Então é basicamente isso. Há algumas pequenas diferenças aqui, cara. Talvez o texto corporativo. Há um pouco menor do que o que temos aqui, mas está perfeitamente bem. Acho que não precisamos ser. Nós vamos para Masters combinar com este design exatamente, mas isso é como nós fomos capazes de projetar com sucesso ou construir e instalar nossos alimentos. Nós também fomos capazes de obter ícones da frente, impressionante também. Então é isso para construir e começar o pé. Um sino de vídeo alemão Avonex agora adicionará o restante de nossos ícones da frente Awesome. 68. Adição de ícones essenciais: Bem-vinda de volta. Então agora é hora de adicionarmos os ícones restantes da frente. Incrível! Agora aqui em um site modelo, observe que temos ícones para quem. Nós somos o que fazemos, mas notar que eles são de cor verde e, em seguida, para serviços. Nós temos nove Aikens diferentes, e eles são todos roxos e coloridos. E então, finalmente, nos Emirados Árabes Unidos, caminhe conosco. Temos quatro ícones diferentes também. Temos um que é azul mais claro, laranja, verde novamente e depois ler. Então precisamos de um plano e o que vamos fazer aqui é, primeiro, criar classes para cada um desses ícones, especialmente usando suas cores. E Dan apenas atribuirá ao hexágono um valores sombrios para essas propriedades de cor. Então aqui está exatamente o que vamos fazer. Vamos voltar para trás dos nossos dois suportes. Vamos continuar a ser esse CSS. E vamos encontrar um bom lugar para adicionar Aikens e tudo o que podemos fazer isso aqui temos botões. Vamos pegar isso. Deixe-me limpar esses espaços vazios e, ah, vamos apenas ir em frente agora e adicionar uma nova seção, mas vamos chamá-los de seção de ícones. Então eu venho e, ah, deixe-nos fazer isso. Tudo bem, então o 1º 1 aqui vai ser verde. Ok, então vamos dizer, uh eu posso e, em seguida, um ponto verde então este ícone em particular terá a chamada de valor e vai ser oito c b são nove usados três. Ok, vamos apenas ir em frente e copiar este “testamento”. Vamos em frente e colar. Vamos mudar rapidamente isso para roxo então temos roxo e, em seguida, o valor fora da cor do ícone roxo vai ser, ah, CC 72 e, em seguida, f f Vamos apenas ir em frente no ritmo do quarto para qualquer um é vermelho, laranja, bem como Azul. Tudo bem, então, como você pode ver, eu adicionei muitas cores para azul, laranja e vermelho, mas note que há mais duas propriedades que podemos precisar adicionar. Você pode ver o tamanho do telefone. Não sabemos como eles são grandes, mas eu vou para os quatro pixels para os ícones. Mas também notei que há um pouco de espaço entre o texto real e no ícone para que possamos dar isso pode ser uma margem direita de, digamos, cinco pixels. Então vamos fazer isso. Ok? Os ícones estão na verdade dentro de uma tag H três. Deixa-me mostrar-te isto muito depressa. Se voltarmos para o nosso índice de HTML são, por exemplo, aqui onde temos o todo que estamos, você pode ver agora ele está dentro. É em um H três eles O que fazemos é em um H três desenvolvimento Web para os serviços é um H três. Então esses ícones serão colocados dentro da nossa idade. Três. Imposto. Então é por isso que vamos entrar aqui e no topo. Vamos agora dizer R H três e, em seguida, espaço e, em seguida, ícone ponto. Espero que nenhum feitiço eu possa corretamente, então isso terá agora. Primeiro de tudo, vamos dar-lhe um tamanho de telefone e vamos para os quatro pixels e, em seguida, a margem direita fora cinco pixels é ir em frente e salvar isso e todos K. Então, como é que agora isso toca os ícones? Bem, vamos começar com o primeiro 1 e este aqui é na verdade um rei de xadrez. Eu gosto de jogar xadrez. Não sei quanto a você, mas adoro jogar xadrez. Então, para adicionar o peito Rei, vamos cabeça de trás para frente. Incrível. Vamos para a página dos ícones. E aqui, vamos digitar. Rei do xadrez. E lá vai você. Então este é o que está aqui, então vamos em frente. Copie isto. Vamos clicar nele, e vamos apenas copiar o código para exibi-lo. Vamos cabeça cabeça cabeçada sobre seus suportes. Então vai ser onde temos o que somos. Isso é muito bom na aula como o dia. Mas lembre-se, ainda temos que adicionar a classe off ícone e depois verde porque tem a cor verde. Certo? Então vamos em frente, guarde isso. Vamos voltar aqui para os sinos da página interessada. E lá vai você. Assim podemos ver uma ICANN. Mas há um saco executar Kahlo cobrindo seu problema de funcionabilidade. Bem, se voltarmos para os nossos suportes, lembrem-se disso aqui em cima onde temos os contactos. Veja aqui nós também temos a classe de baixo. Mas depois verde, certo? Então, onde é exatamente a mesma classe cair? Eles entram no botão de toque com o ícone para o rei peito. Há na mesma classe de verde. E se tivéssemos cerca de dois membros principais das SS nazistas aqui, onde temos verde, temos uma cor de fundo de oito CB 913 Então, basicamente, agora o ícone está recebendo a cor de fundo da classe fora do verde que daria inicialmente para chegar em direção ao fundo. Então, para evitar este tipo de problema ou apenas fazer um ligeiro ajuste Ah, vamos cabeça fanfarrão aqui nós temos que ir e nós vamos apenas dizer Vamos voltar para o primeiro Enciso original . Temos botão e, em seguida, verde para que possamos apenas dizer botão e, em seguida, verde para essa propriedade particular . Soldados que vêm aqui, digamos, são comprados e depois verdes. Então, basicamente, qualquer elemento que tenha a classe fora de Bolton e Green deve ter a cor de fundo fora polícia da HCB 9. Então, qualquer uma dessas classes com apenas qualquer outro elemento com apenas uma classe de verde não terá mais essa cor de fundo. Então vamos em frente. Guarde isso um pouco, veja se isso muda algo novo. Vamos esperar mais alguns segundos. E lá vai você. Incrível. Então agora podemos ver o ícone bem ali enquanto a tocha gettin o Baghran verde ainda está intacto. Então isso é um ajuste que fizemos. Ambos se lembram que nós também fizemos algo semelhante com o Nossos serviços que tem o roxo estão de volta em Coehlo, e nós também vamos estar usando a classe de roxo para os serviços que eu console. Vamos também fazer esse ajuste vai cabeça para trás de um dois colchetes. Então, muito roxo. Também vai dizer, nosso botão roxo. É isso. Vamos guardar isso e ficaremos bem. Então o que precisamos fazer a partir daqui agora é adicionar os ícones para o nosso serviço, diz uma lista. Vamos apenas querer um exemplo. Então este aqui é basicamente o nosso código para desenvolvimento Web. Então vamos voltar aqui. Vamos procurar por código e vamos ver o que podemos obter de Formado Awesome. E este aqui está? Então é basicamente apenas código. Então, vamos clicar aqui e vamos ver. Eu vou em frente, pegue isso. Vamos voltar para colchetes. Vamos passar para o índice de html. Então vamos fazer o aqui para o desenvolvimento da Web. Vamos avançar ritmo que, mas é claro, agora irá adicionar a classe off ícone e, em seguida, também são roxo. E vamos em frente, guarde isso. Vamos voltar aos nossos sinos primeiro à página. E lá vai você. Simplesmente assim. Agora temos o ícone para um roxo, então basicamente vai ser exatamente o mesmo, nosso processo para todos os restantes Aiken. Então o que eu vou fazer agora é simplesmente pausar o vídeo e adicionar os americanos restantes aos nossos direitos de página de quaisquer outros homens e ícones para esta seção de serviços, bem como a seção Por que andar conosco e, claro, o restante nosso ícone aqui, onde temos o que fazemos. Então, se eu der uma olhada no meu site, isso é basicamente o que ele parece agora. Temos todos os ícones ali mesmo, Então, se você estiver interessado, você pode facilmente obter os nomes de todos esses ícones dos arquivos de Shed com você os arquivos para o site. Você pode apenas encontrar os nomes do dia certo e são simplesmente copiar e colar. No entanto, ainda temos que adicionar aqueles para os depoimentos. Como pode ver, não temos os que estão aqui. Então deixe-me mostrar a vocês como adicionar um para o depoimento. Voltaremos aqui e ficaremos felizes de casacos e saímos. Ok, então essa será a 1ª antes do próprio tribunal. Então aqui está, bem aqui. Chama-se Esquerda. Então, vamos clicar neste. E aqui está o código. Então vamos em frente e copiar que Agora cabeça de um back para colchetes e vamos fazer isso novamente. Vamos procurar a seção de depoimentos e Ah, OK, então está bem aqui. Então vamos adicionar isso logo após o casaco da aula. Vamos acrescentar isso. Mas então isso vai ser as classes de ícones. Bem, não se esqueça depois da aula da ICANN e depois do vermelho também, porque os primeiros casacos são vermelhos. Mas também temos que ir. Nós vamos ter que fazer algum design também. Então vamos adicionar outra classe chamada tribunais, que podemos usar para pode ser estranho imaginar e talvez até aumentar o tamanho da fonte, se necessário. Então é isso para o primeiro resfriado. Vamos voltar e adicionar o casaco da direita para que possamos dizer o nosso casaco, certo? Então vamos procurar. E, claro, este seria o único no final do depoimento. É a que está bem aqui. Então, vamos clicar nos direitos do tribunal e, ah , bem, copiar isso e então vamos fazer exatamente a mesma coisa de novo. Vamos vir aqui antes do Dev. Nós adicionamos isso e, claro, vamos adicionar a classe Eiken, a classe vermelha e, em seguida, casacos também. Então vamos em frente e salvar isso. E vamos ver a mudança que temos agora. Vamos refrescar e lá vai você. OK, então agora temos os casacos vermelhos. Tudo o que precisamos fazer agora é adicionar alguma margem. Como você pode ver, isso é uma grande margem entre o Aiken e o texto. Então vamos fazer isso. Já adicionamos a aula fora da quadra, então vamos para o Maine. É o ES que diz. Vamos procurar nossa seção de pregos de testemunho. Está bem aqui, então podemos apenas dizer irritado, mais Nial e então podemos adicionar a classe fora de casacos e nós vamos apenas fazer isso, ok? Vamos apenas adicionar margem e os valores que têm aqui são cinco pixels e 10 pixels. Vamos continuar e salvar isso e vamos atualizar a página. E aí vai você, parecendo muito, muito bem. Então tudo o que eu vou fazer tudo o que precisamos fazer agora é apenas adicionar os códigos restantes para o verde, azul e laranja. Eu estou indo através do visual vídeos e currículo Uma vez que eu adicioná-los. Bem-vinda de volta. Então você pode ver que eu adicionei os códigos restantes para os três depoimentos. E, claro, se eu voltar para os sinos são refrescados a página. Bem, lá vai você. Agora temos todos os ícones em nossa página aparecendo. Então isso é basicamente para adicionar ícones de fundos. Incrível. Espero que tenham gostado do vídeo. Te vejo na próxima aula 69. Adição de ligações de ancoragem navegais: Bem, volte. Então, nesta fase, nós praticamente construímos um site muito bonito. Mas agora precisamos também adicionar Bem-vindo de volta, senhor. Neste ponto, nós praticamente construímos um site de boa aparência. Temos todas as nossas secções. Nós temos, ah, design de conteúdo está intacto e praticamente tudo parece bom. No entanto, ainda podemos melhorar a funcionalidade do nosso lado adicionando alguns botões de navegação, especialmente os que estão aqui. Observe que sempre que alguém clica nessas setas, ele as leva diretamente para o topo da página. Então esta é uma ótima maneira de melhorar a experiência do usuário em um site, especialmente em páginas que são muito, muito longas, como a que temos aqui, então, em vez disso, o usuário ter que escola antiga para o topo, eles podem apenas olhar para esses botões e ele vai levá-los todo o caminho para o topo. Então precisamos criar algo conhecido como e chamado links. Basicamente, precisamos deixar um tio em algum lugar perto da primeira seção aqui para que sempre que alguém clicar nesta hora, ele vai levá-los para o tornozelo. Então precisamos criar o tio aqui e ligar esses tios Lynn que tio, ou todas as horas de navegação que temos em cada seção, como você pode ver. Então vamos fazer isso. Isso vai ser um pouco divertido. Vamos em frente nas parênteses eleitorais. E a primeira coisa que vamos fazer agora é criar algum espaço para os botões virem aqui. Então vamos fazer isso. Ok, vamos em frente agora e adicionar o primeiro 1 aqui também, onde nós temos a idéia fora sobre. Na verdade, vamos fazer este pelos serviços primeiro. Ok, eu penso sobre isso um pouco perto demais do topo. Então vamos para a seção para isso. Para os serviços. Tudo bem, então vamos fazer isso. Eu vou adicionar esta nova tag porque, claro, claro, é uma Linda, mas clicando em Então nós temos que usar um imposto, então eu vou dizer h ref igual a nós vamos adicionar casacos por agora, para o link real vai ser o tio em Baltika. Olhe isso um pouco mais tarde. Vamos adicionar uma aula porque vamos fazer um pouco de estilo. Então vamos chamá-lo de botão e, em seguida, para o topo. Então é basicamente de baixo para cima. E agora vamos criar uma extensão que irá conter o conteúdo real em si. Tão extenso. E então podemos dizer que classe é igual. E então vamos ligar para isso. Ah, Flechas! Setas para cima! Ok, eu estava apontando para cima e é isso. Ok, vamos em frente e salvar tudo isso K. Agora precisamos ir em frente e exibir os Avalos. As horas que temos aqui. Agora, para exibir isso, podemos usar algo conhecido como CSS NTT. E, claro, aqui você pode ver que temos tantos tipos diferentes de entidades. Tudo isso simboliza seu pecado aqui. Estas são as entidades. E então estes aqui são os códigos com os quais podemos usar para exibir a entidade. Então o que estamos procurando especificamente é o que estou tentando ver onde ele está. Depois de passar quase cinco minutos, finalmente vi. O que está aqui? O ponto direito 00 B entre aspas de ângulo duplo. Agora eu sei que por aqui eles estão realmente apontando para cima. Mas se for, não temos uma entidade real que faça isso. Mas podemos aplicar ao uso de alguns CSS para virar o outro para apontar para cima, então eu vou mostrar-lhe como fazer isso. Então vamos em frente e simplesmente pegar o código. Então, 00 BB. Acho que me lembro disso. Então vamos fazer isso bem. Uma coisa que você também deve saber antes de continuar é que exibir entidades. Você pode usar o conteúdo, a propriedade comum para exibi-los. No entanto, o conteúdo pretendido iria apenas andar sobre pseudo-elementos como a classe antes ou depois. Então, como resultado, precisamos fazer isso. Vou voltar para os suportes. Vamos para o Maine que CSS e lentilhas criam uma nova seção. Eu acho que apenas nos botões Vamos fazer isso como eu vou entrar aqui e eu vou dizer , Vamos adicionar a nova seção primeiro e eu vou ver em vez de botões. Eu vou dizer, Ah, setas para cima. Ok, e depois Ah, botão e depois espaço e depois setas. E agora vamos adicionar essa classe baixa antes de abrirmos nossas chaves de colegas, e agora vamos usar o conteúdo propositadamente para exibir a entidade, e nós os temos em casacos vai ser barra invertida e agora 00 BB. Então é exatamente assim que você pode exibir um conteúdo de entidade. Então você terá que usar um pseudo elemento como antes, depois e então simplesmente usar o tipo de propriedade para cortar, então o valor desse particular e vamos em frente. Agora guarde isso e vamos ver se noto alguma mudança e ah, OK, então está bem aqui. Você pode ver que está bem ali. Então essa é a entidade, este plano. Mas, de alguma forma, não há necessidade de trazer isto aqui para a direita fora da nossa idade para tributar fora do curso. Este é o lugar onde algum estilo CSS vai entrar para jogar. Então vamos fazer. Vou voltar para cá. Vamos criar algum espaço logo acima daqui. Então vamos mirar as etiquetas A segurando as horas. E claro, os oito que me importo são da nossa classe de baixo para o topo. Então nós vamos entrar aqui e eu vou dizer bundas dentro e então ponto top eu diria para um top e agora vamos começar a adicionar um pouco de estilo. E antes de tudo, vamos apenas adicionar o colar. Ok, então eles chamam aqui vai ser 555555 Nós temos uma cor de fundo, então vamos adicionar essa também. E quando eu tenho você é apenas brancos puros. É F f f f f f f f f. Ok, vamos também adicionar um pouco de preenchimento também. Então temos cinco pixels. 12 pixels. Você tem cinco pixels aqui e depois pixels? Oh, capa e último panelista. Vamos adicionar um raio de borda de três pixels. Ok, vamos em frente e salvar isso. Vamos voltar para dentro. Aqui se refere a página e lá vai você. Ok, então está começando a parecer melhor. Mas agora como vamos trazer esse cara aqui para as luzes? Você deve estar pensando na posição, propriedade e especificamente no valor da AB. Então olha terá que usar o aplicativo deslizou propriedade para obter isso lá para a direita. Então vamos voltar aqui. Hum, eu vou dizer agora posição vai ser ab tão alaúde, e então nós simplesmente vamos salvar TIC na verdade, muito sobre o valor fora. Certo? No entanto, balas vão com talvez 10 pixels e então vamos ver. Ok, vamos em frente e salvar isso. Vamos voltar aqui primeiro uma página e lá vai você. Certo, então está bem aqui. Então precisamos talvez empurrá-lo um pouco mais para a direita, e então também podemos dizer top zero. Agora é uma coisa boa que se você notar, é o Dev segurar na classe de conteúdo. Já lhe demos o valor relativo para a posição. É por isso que ainda somos capazes de ver a entidade aqui. Se removermos este véu de posição, você pode ver agora que ele simplesmente começa a sair fora das fronteiras. É por isso que geralmente é bom adicionar personalidade ao seu conteúdo. Dave é só para o caso de você querer andar com algum elemento dentro desses Dave que pode ter a posição fora do ab tão alaúde. Então vamos em frente agora e fazer algumas mudanças. Vou usar o inspetor para iluminar aqui também. Eu vejo. Então vamos entrar aqui e vamos dizer branco, 20 pixels em vez disso, e então vamos dizer top off zero. Lá vai você. Isso parece muito, muito melhor. Eu me sinto bem, então vamos fazer isso porque nós vamos ter direito 20 pixels e, em seguida, top off zero. Então vamos salvar direitos 20 pixels e, em seguida, para o topo, temos zero como o valor. E então vamos também adicionar uma borda. Então vai ser um pixel sólido, e então o valor do nosso d cinco d cinco d cinco d cinco? Esse vai ser o valor. Ok, vamos em frente. Agora salve isso e vamos ver o que temos refere-se a página e OK, então lá vai você. Tudo bem. Precisamos fazer mais algumas mudanças. Observe que as horas estão apontando ou derrama o um pouco maior e eles têm algum padrão também. Então precisamos consertar isso. Então vamos voltar aqui, vamos ter que tomar especificamente a classe segurando a entidade, as horas e isso vai ser aula hispânica sobre as viagens, horas certas. Então vamos em frente e fazer isso. Vou colocar nossas roupas novas aqui e depois Avalos. E agora vamos adicionar a primeira propriedade aqui, que seria o tamanho divertido. Agora eu sei que o tamanho do telefone aqui vai ser 28 pixels. Ok, vamos em frente e salvar isso. Vamos dar uma olhada no que temos agora. Atualize a página e lá vai você. Ok, então está parecendo maior agora. Mas isso o temer agora veio forçado a fazer alguma transformação. Então, precisamos descobrir uma maneira como podemos ir tomar as setas de modo que o ponto para cima agora há uma propriedade conhecida como a chance de propriedade especificamente para tal, no entanto, entanto, note que a propriedade transformada Onley caminha em selecionar em elementos de linha como imagens. Você pode aplicar a propriedade transform em imagens. Sem problema. Ambos para texto regular de entidades, você precisará exibi-los como um bloco em linha antes que a propriedade transfer possa funcionar. Então vamos voltar aqui e vamos primeiro de tudo, apenas dizer exibição e depois em bloco de linha. Certo, vamos salvar isso. Vamos voltar aqui. Vamos apenas refrescar. E agora vamos fazer uso da ferramenta de inspeção para fazer a transformação. Então veja isso como se eu fosse gostar de olhar aqui, ir inspecionar, e então aqui mesmo, verificar isso de novo. Só estou minimizando isso um pouco. Ah, drogas aqui. Beba este aqui. Ok, então esta é a aula, mas eu entro aqui, então eu vou dizer, transformar, transformar. E agora vamos girar, então ele vai girar. E então dentro podemos agora adicionar o grau fora da rotação. Então, neste caso, agora, podemos ir com, digamos, 45 d e g. Então agora você pode ver que ele é girado em 45 graus. Agora ele está apontando tipo de diagonal para baixo. Tudo o que poderíamos ter ido com talvez 90 graus em vez disso. Agora é um ponto abaixo. O que é completamente? Podemos ir até 70 graus. E agora está apontando para cima, como você pode ver. Mas outro valor que poderíamos simplesmente dar em vez de 70 graus seria 90 graus negativos . Então isso seria como o movimento anti-horário. Acho que sinto muito. Eu sou muito ruim em matemática, cerca de 2,2 horas ou projeto, e você vai com 70 graus ou 90 graus negativos. Então é exatamente assim que você pode transformar suas entidades tão bem, mas não é inspetor? Vamos também tentar adicionar alguns CSS adicionais para fazer isso parecer muito, muito bom. A primeira noite vai fazer aqui é adicionar uma altura de linha de, digamos, 20 pixels. Ok, então parece um pouco melhor. Nós também podemos desordem, conhecido como a vertical nossa linha e, em seguida, meio para que as horas de posição no meio fora de suas fronteiras e, ah, o que mais podemos fazer? Podemos adicionar algum monstro. E eu acho, vamos tentar alguma margem esquerda. Talvez. Vamos para pixels. Na verdade, vamos mais um pouco. Cinco pixels. Acho que isso parece bom. Sim, gosto do que temos aqui. Eu faço. Eu gosto disso. Tudo bem, vamos em frente. Na verdade, cinco pixels é para ser demais. Eu sinto muito. Na verdade, estou fazendo seu tempo real, então ok, eu acho que três pixels parece Ah, mais como agora estão alinhados bem ali no centro. Então vamos entrar. Margem esquerda são três pixels s. Então vamos voltar aqui e vamos fazer isso direito. Então eu vou dizer transformar e, claro, vai ser girar. E então entre parênteses. Então nós temos 90 graus negativos, e então nós temos a margem esquerda, que era altura da linha de três pixels. Não vamos esquecer o esconderijo linha, nós adicionamos. E acredito que foram 20 pixels se não estou enganado. Lisboa, sempre. Nós temos o meio de alinhamento vertical. Ok, vamos em frente e agora e salvar esta cabeça de volta aqui. Refere-se a Page e lá vai você. Ok, quase lá. Quase lá. Mais duas coisas que precisamos fazer é que temos o efeito de pairar aqui, como podem ver. Então, vamos adicionar rapidamente o efeito sobre. Vamos voltar aqui e vamos ter que mirar na turma. As etiquetas A estão aguentando as horas, então isso vai ser o baht em nossos dois top. Então vamos vir aqui e ah, tudo bem, então aqui. Eu só vou dizer, Ah se intromete e depois para cima e depois pairar. Então nós vamos fazer muito, muito simplesmente será mudar a cor da borda, então ele vai ser borda Coehlo e, em seguida, desenvolvedor. Tendo aqui é o total zero B sete f f. E então também podemos adicionar uma sombra de caixa apenas para melhorar o efeito. Então desenvolva seu pixel 0001 e, em seguida, você também pode adicionar a mesma cor exata. Oliver de novo. 40 B sete Ah f Vamos em frente e salvar isso. Vamos voltar aqui. Bem, primeiro a página e voilá. Então agora você pode ver que temos aquele efeito agradável lá dentro. Mas agora a questão é, como criamos o tornozelo para que quando clicarmos nesta seta, ele nos leve até aqui? Bem, o que precisamos fazer é criar o tornozelo, alguns em torno da seção de cabeçalho. Certo, então vamos voltar para os bolsos. E meu índice de tom de HTML usará a tag head out porque esta é a tag basicamente segurando os itens de menu e o local. Então este seria um bom lugar para adicionar tornozelo. Então eu vou dizer que eu é igual. E então eu vou simplesmente dizer, Ah, casa. Essa vai ser a ideia do tornozelo. Então, agora, para ligar este tornozelo com as etiquetas A, eu vou entrar aqui e você tem o árbitro H. Vou simplesmente dizer hash tag e depois para casa. Então isso agora vai ligar o tornozelo dentado. Vamos em frente. Agora salvar este pano de fundo cabeça sopra nossa atualizar a página e nunca vir aqui. E eu clico na seta. Você pode ver que nos leva até o topo. Então tudo o que eu vou fazer agora é simplesmente adicionar o restante são links de tornozelo na página tão bem, voltar. E como podem ver agora, adicionei o comprimento restante do tornozelo. E, claro, quando você clicar sobre eles, ele vai levar um direto para o topo da página, e isso é praticamente tudo. Mas eu sei que aqui do lado do modelo, você pode ver que o tornozelo é muito, muito suave quando rola para cima. O nosso agora é instantâneo. Você clica no link e ele vai todo o caminho até o sabonete superior. Precisamos descobrir uma maneira de fazer o movimento muito, muito suave. O que temos aqui para que o evento alemão exalem agora vai finalizar o aprimoramento é o comprimento do tornozelo. Obrigado por assistir 70. Adição de animações: Bem, retornos. Em um vídeo anterior, adicionamos com sucesso as setas de navegação para nossas diferentes seções. Mas a única coisa agora é que quando clicamos nessas setas, a navegação da escola de volta para o topo da página não é suave. Não é como se o que temos aqui fosse um exemplo. Você vê, quando eu clico no Eu sempre vejo suas escolas todo o caminho de volta suavemente. Mas aqui é instantâneo. Então precisamos consertar isso. Mas também note que quando nós pairamos sobre a imagem bem aqui para o logotipo, ele gira em torno como a roda da fortuna. Certo? Mas Oz não faz isso. Então, neste vídeo, vamos corrigir isso para problemas como vamos adicionar um comportamento de rolagem muito suave para nossas ilhas navegacionais. E então nós também vamos adicionar alguma animação para o nosso local que é lidar com este futuro arrefecimento primeiro, então é muito, muito fácil. Tudo o que precisamos fazer é basicamente segmentar a tag html porque estamos rolando em uma página, as escolas horas em uma pizza. Basicamente, você não está mirando em um elemento específico. Você basicamente leva em toda a página porque sua escolaridade se abre. Então vamos atingir o imposto HTML do Lester. Eu vou para os suportes e depois para o topo no muito, muito, muito superior Bordeaux. Diga html ok, e então abra o aparelho da faculdade. E então a propriedade aqui será chamada de comportamento escolar. Automático é o padrão. Mas agora, mas semelhante. Indo para ir com suave. Oh, sim, liso operador, vamos em frente. Agora guarde isso. Vamos voltar para se opor ao nosso foram primeiro uma página e agora você pode ver a escola em vigor. Sim, realmente foi assim tão simples. Eu tenho certeza que você provavelmente está pensando, Oh, vai precisar de uma boa quantidade de código para nós alcançar este efeito. Mas, ei, era apenas uma linha, e é isso. Então, com sucesso adicionou a escola legal em vigor para nossas setas de navegação. Mas e agora o local? Como animar o logotipo de modo que seria Tates quando passamos o mouse sobre ele para animar o logotipo, Eu vou ter que apresentá-lo a todo um conjunto de novas propriedades irmãs que lidam principalmente com animação. Agora eles são parecidos com a transição suposta de Wilfredo caminhou no passado, mas agora vai ser puramente sobre animação de sentidos, e eu estou realmente animado. Mas antes de entrarmos nisso, o que aconteceu exatamente? Então, quando passamos o mouse sobre o logotipo, é suposto girar sobre. Então, obviamente, sabemos que agora deve criar a classe off hover quando o usuário, você sabe, paira sobre a imagem que deve agora vai tomar. Então vamos primeiro de todas as tarefas, vamos voltar para um colchetes e vamos olhar para a seção de logotipo, e eu acredito que deve ser por aqui. Ok, então aqui está, bem aqui. Então, vamos apenas adicionar. Só soprar a marca. Então o que vamos fazer é ver marca na classe da marca e, em seguida, pairar, e eles não vão dizer logotipo da classe de logotipo. Então é aqui que a magia acontece. Uma luz. O primeiro que vou dizer é o nome da animação. Você tem que dar um nome à sua animação ou pode ser qualquer coisa no meu caso, porque estamos girando o local, tudo isso legal. É dor. Certo, esse será o nome da nossa animação. Mas agora é suposto darmos a duração. Quanto tempo a animação deve demorar antes de começar e, em seguida, terminar na suposta duração total ? Então eu vou ver a duração da animação. Neste caso, vamos 1,2 segundos. Ok, então nós também temos este conhecido como a função de animação Timing. Basicamente, é uma transição semis onde você tem Lini A. Você tem facilidade de aliviar é basicamente você está ditando a velocidade da animação do início ao fim. Queremos perguntado Gilenya, então ele basicamente começa com a mesma velocidade termina com a mesma velocidade, certo? Mas há também outra propriedade, que é a animação. É contagem de oração. Basicamente, estamos dizendo quantas vezes a animação deve se repetir em nosso caso vai ser infinita porque vamos voltar aqui. Você pode ver agora, enquanto o mouse estiver segurando o logotipo, ele apenas continua girando e girando, girando e girando e girando. Então é infinito, certo? Então essa é uma Bíblia escolhida, o valor infinito. Vamos voltar aqui. Então estes são os valores completos que vamos usar. No entanto, só para que saibas, podemos até encurtar isto, mas vou mostrar-te como fazer o que eu quero, então não quero. Com a animação, vamos vir até aqui. Vamos criar apenas em uma nova seção e podemos chamar isso de seção de animação. É aqui que a animação real entra em ação. Então vamos mudar o nome aqui também, em uma missão. E OK, agora a propriedade que vou apresentar é você é uma propriedade extremamente poderosa conhecida como a propriedade at frames. Com esta propriedade, podemos indicar várias animações que o elemento deve passar do início ao fim. É extremamente poderoso, então veja isso. Ok? Agora vou indicar o nome da animação, que é girar. Então, outro para quadros-chave para andar, você precisa ter um nome para animação com pronto desde que tenha rotação. Então eu tenho cintas encaracoladas da Espanha. E agora veja isso. Tudo bem, podemos primeiro indicar às vezes que vou abrir. Outro conjunto de calibrados está nu comigo. Ok, então dentro do primeiro na nossa colega, podemos indicar o início. Ok, neste caso agora vai ser zero por cento esta é uma saída, indicando que começa com mancha física no início, certo? O que vamos fazer agora é transformar o logotipo. Tenha paciência comigo. Vamos girar, mas começar de zero graus. Ok? Basicamente tudo ocidental aqui é que quando esperamos sobre o logotipo e alguns dos vagabundos no logotipo começam a girá-lo, mas começar a partir de zero graus e, em seguida, estátua, girá-lo. Agora que indicámos o início,também podemos indicar o fim. Agora que indicámos o início, Neste caso, agora, vai ser 100%, o que é basicamente agora no final. E então saberemos, digamos, transformar. Vai girar novamente. Furo Agora, até o final do adicional girado em 360 graus. Espero que isso faça sentido. Basicamente, sempre agora é que no início muito, em 0% quando o usuário paira sobre a estátua do mouse, girar mas começar a partir de zero graus e, em seguida, até o final da rotação geralmente ter transformado por 360 graus. Isso é exatamente o que isso tem. Não caia no cavalo. Então, mas todos perdem mais tempo. Vamos em frente agora. Salve isso. Vamos voltar aqui. Atualize a página e aí está. Agora o logotipo está girando e é infinito. Então, para Bennett, explique isso. Vamos dar. Deixem-me dar-vos alguns exemplos mais antigos. Certo, vamos voltar aqui e como exemplo, muito, muito, muito rápido. Vamos brincar com a situação um contador, certo? Então vamos apenas mudar este poderia dizer o infinito. Vamos com três, por exemplo. Ok, então a animação vai se repetir três vezes, então vamos atualizar. E agora temos um, dois e três. Lá vai você, depois da terceira vez que ele parou. Então, vamos também fazer outra mudança. Em vez de zero graus, podemos começar com talvez 45 graus e depois terminar. Vamos até dizer a 70 graus, então você vai ver agora que o logotipo que vai saber Tate totalmente. Vamos refrescar. Então agora você pode ver que não está girando completamente. Ele pára a 70 graus. Como você pode ver, não é 45, então pára um para 70. E lá vai você. Portanto, não é apenas a função de rotação que você realmente tem uma transformação. Você pode fazer outros como escala de inclinação. Na verdade, vamos fazer escala. Escala significa simplesmente que você vai fazer o local. Você vai fazer a imagem grande. Depois, há diferentes tipos de habilidade também. Vamos com os três D então, a partir de três dimensões, vamos com a escala em 1,2 ah dois. E então digamos que também. Então você vai escalar 1.2 no X X é y existir dois e Z existe. E então a mesma coisa aqui também. Vamos fazer a mesma coisa. Escala. Ah, três D Mas agora vamos dizer ah, 0,52 e então Ah, 0,5. Isto vai ser uma loucura. Na verdade, não faço ideia do que estou fazendo. Vamos em frente e salvar isso. Isto vai ser uma veia, um tipo louco de animação. Vamos refrescar e ah, bem, lá vai você. Essa é a animação ali, na verdade. Então todos os realmente incentivá-lo a passar algum tempo e verificar todos os tipos de transformações que você poderia fazer. Você pode jogar nas animações e oh, antes de eu ir, deixe-me mostrar-lhe muito, muito rapidamente a abreviação para escrever suas propriedades de animação. Então vamos voltar para o nosso logotipo e ah, estava tudo bem. Então está bem aqui. Então a maneira como você pode encurtar isso muito facilmente seria apenas dizer animação. Ok, agora esta será a própria propriedade. Animação, você começa com o nome fora da propriedade. Isso sempre será o 1º 1 E então podemos ver Ah, um 0,2 segundos. Porque este, é claro, será o nosso tempo de duração. E então saberemos, digamos linear, que será o tempo em função. E então, finalmente, vamos com infinito porque essa vai ser a contagem de situações. Infinito. Lá vai você. Então esta é a maneira abreviada de escrever sua animação lá, é claro, as propriedades da Nação Mãe também, mas não vão entrar nisso. Então, Linda rolar para baixo aqui e mudou os valores aqui de volta para o que era. Então nós tivemos as rotações e tivemos zero graus, e é claro que tivemos o estado novamente. E nós também tínhamos isso em 300 e 60 graus. Tudo bem, isso deve bastar. Vamos em frente. Poupe a cabeça para trás, Teoh. Bills up refere-se a página. E lá vai você Agora, para dar um exemplo final antes em torno deste vídeo, Eu já fui em frente para criar um Dave vazio muito especial classificado aqui chamado nossa amostra. Isto é apenas para ilustrar o que é possível com animações, certo? Então eu tenho essa divisão aqui chamada Classe de Amostra. E então aqui eu não podia as firmas chave e eu chamei de cores. Isso é o que você tem agora o nome da animação bem aqui de cores. Mas agora dê uma olhada nisso. Ok? Eu indiquei os diferentes tipos de animações que os outros Dave em particular tem que passar . Então, no início, sua cor de fundo é vermelho. E então, cerca de 1/4 do caminho através da animação, o tornozelo do saco deve mudar para preto depois de outro quarto, que seria a metade das cortinas para azul, 3/4 da maneira que ele vira laranja. E então, no final, está sua língua de volta ao chumbo. Então, bem ali, você pode ver as propriedades adicionais foram aplicadas com um 100% para que o Dave ocupa o completo com fora da página, cabeça de 100 pixels. Posição relativa adicionada. Eu lhe dou a bolsa e refrescar vermelho bem e convidado. A divisão de admissão é de seis segundos, mas então eles também adicionam edição e animação atraso fora de três segundos, então basicamente três segundos terão que passar antes que a animação realmente comece. Isso é o que a animação atrasa nossa propriedade é. Então vamos dar uma olhada e ver o que vai acontecer aqui. Vou atualizar a página. Vamos ligar e fazer de novo. Então deixe você ver. Agora começou. Considere isso. Agora está mudando. Está mudando de volta para laranja e finalmente está de volta à cabeça. Vamos tentar isso mais uma vez. Então ele começa em Weird e Mission Division of Three Seconds decorre, não animação, começa preto, azul, azul, laranja e, finalmente, de volta a ele. Então, este é apenas um exemplo do que você pode alcançar com a propriedade de animação fora CSS é extremamente poderoso. Você pode combinar diferentes tipos de propriedades também, que você não tenha que ficar com apenas as costas em Kahlo. Você poderia se você aplicar isso, por exemplo, digamos que o nosso texto, por exemplo, você poderia alterar os sinais de telefone para financiar Espere a altura da linha todos de uma vez estão usando a animação. Então, eu realmente espero que você tenha gostado deste vídeo que recuperamos, diz animações. E também adicionamos o bom válido para a propriedade de comportamento escolar. Então é isso. Muito obrigado, muita sorte. Vemo-nos na próxima aula. 71. Adição de efeitos de filtro: bem-vindo de volta no vídeo anterior é adicionado com sucesso estes efeito suave escola para os nossos links de tornozelo, e também fomos capazes de animar o nosso logotipo. Mas se você prestou muita atenção, você pode notar que aqui em um modelo disse que quando nós pairamos sobre o logotipo, há um pouco de um efeito de sangue. Você vê, bem ali você vê a imagem que você pode ver muito, muito claramente. Mas então, quando você Hoffer na imagem agora, há um pequeno, pouco embaçado eficaz bem ali. nosso, Onosso, por outro lado, ou não há nenhum golpe. Está claro o tempo todo. Então, o que eu quero é um pouco rápido é mostrar a você ou apresentá-lo a uma nova propriedade conhecida como a propriedade CSS Filter, onde podemos adicionar coisas como efeitos sanguíneos, brilho, contraste e assim por diante. Então, deixe-nos fazer isso. Vou voltar aqui e ao contrário daqui, onde temos a aula de focagem para o logotipo, não vou filtrar. E aquela ali é a propriedade. E então temos valores diferentes para filtro. Neste caso agora, eu vou usar o Borrão um pixel que será o valor que um pixel faz. Vá em frente, salvar a cabeça de volta aqui refere-se a página, e agora você pode ver aquele efeito de sangue bem ali. Então é assim que você pode alcançá-lo. Efeito de sangue com a CIA diz. Mas, é claro, existem outros valores disponíveis para filtrar. Então, por exemplo, deixe-me ir em frente e remover o borrão e vamos tentar outra coisa. Está bem? Posso dizer brilho e podemos dar um valor percentual aqui. Pode ver não é como 200% apenas como um exemplo. Vamos em frente, salve isso, e então se eu entrar aqui, atualize a página e você vai contra. A imagem agora é 200% mais brilhante do que era inicialmente. Você pode fazer outras coisas para que você possa combinar pela maneira que você pode combinar valor. Então, vamos ser brilho. Eu também posso dizer borrão e, em seguida, nosso pixel, então tudo que você precisa fazer é apenas adicionar um espaço entre seus dois valores diferentes. Vamos em frente, salve isso, e agora devemos ver vários efeitos. Lá vai você. Então agora é 20% mais brilhante, mas também é sangue por um pixel. Outro valor muito interessante poderia acrescentar aqui. Deixa-me mexer-me. Tudo isso vai ser em tons de cinza. Isso vai realmente transformar sua imagem fria em preto e branco. Então, se dissermos 100% agora, eles se tornarão pretos e brancos. Nós pairamos sobre o logotipo e lá vai você. Estou a dizer-te, CSS é espantoso. E você pensaria que precisaria de algum código muito avançado para alcançar todos esses efeitos. Mas você não sabe. Lá vai você. Agora temos isso a 100%. Na verdade, sou Chris para ver o que acontecerá se formos irmãos, digamos, 50%. Estou curioso. Vamos dizer isto e ver o que vai acontecer. Vamos atualizar E OK, então isso é 50%. Nada mal, nada mau. Então vamos voltar aqui e fazer a mudança de volta para o que deveria ser. Então esse é o filtro Ah, borrão. E então, é claro, estão desgastados pixel. E vamos em frente e salvar isso. Eu só bati de volta aqui. Refresque e lá vai você. Então é assim que você pode criar efeitos adicionais em suas imagens usando a propriedade filter. Muito obrigado, muita sorte. Vejo-te na próxima aula 72. Revisão de seção de projetos: Bem, então é isso que chegamos ao fim desta seção de projeto, e construímos nossas celas. Esta página desgastada completa estava chateado com instâncias HTML, e eu espero que você tenha muito telefone, e eu espero que você tenha aprendido bastante sobre HTML e CSS. Mas há uma coisa que ainda precisamos fazer, e que é que precisamos tornar o site responsivo agora. Parece ótimo em paradas de convés, mas quando você visualiza este site em um telefone celular, ou talvez até mesmo na mesa, você pode descobrir que as coisas têm sido silenciosas como parecem. Você pode ver um monte de colunas, esta cabeça conjunta. Talvez algum Texas fosse muito grande. Não vai parecer tão bom. Por isso, temos de enfrentar a capacidade de resposta. E isso é exatamente o que vamos fazer na próxima seção. Vejo-te então 73. Pré-visualização de design responsivo: Tudo bem. Apenas um bem-vindo oficialmente para a seção de responsividade. E nosso objetivo aqui é garantir que nosso site tenha uma aparência tão boa em tablets e telefones celulares quanto em um texto. Agora, no Dexter, parece bom. Tudo parece perfeitamente bem como está. Mas o objetivo aqui é quando começamos a minimizar o tamanho da tela. Então, por exemplo, agora, apenas aqui, este seria o tamanho típico de um tablet e você pode ver agora. Mas fique para ver algumas mudanças. Não podemos mais ver o menu de navegação, mas agora temos os menus tradicionais de hambúrguer. Quando você passa o mouse nele, agora você tem acesso aos itens no menu principal. E se eu começar a escola para baixo, você vai notar algumas mudanças diz desde Agora é agora duas colunas antes que costumava ser três caminhando. Essas são agora duas colunas da equipe é agora três colunas e assim por diante e assim por diante. E se eu ir todo o caminho até o final para o tamanho da tela pequena, este seria o único para um telefone celular. Você pode ver os lotes de alterações, diz fornecido é agora uma única coluna. Por que andar com nós também é uma única coluna que a equipe é agora duas colunas. Nossos depoimentos são uma única coluna. Sempre foi uma única coluna são limpas agora. Duas colunas são supostas para quatro colunas no próximo acima e, claro, algumas mudanças no futuro, bem como no cabeçalho. Então, o objetivo aqui é mostrar como você pode tornar seu conteúdo adaptável para que quando a tela, as ameaças da tela, mude o conteúdo. Além disso, o tamanho do conteúdo também altera as mudanças de estrutura para refletir que estão mudando as telas que é o ponto inteiro de toda esta seção. Então, sente-se, relaxe, e espero que você ache nesta seção útil. Vamos começar. 74. Introdução à responsividade móvel: por isso, bem-vindo a esta nova seção. Will estará dando uma olhada na capacidade de resposta móvel e antes de começar a fazer qualquer código e vamos dar uma olhada no que temos atualmente. E agora é exatamente assim que o site ficaria em um dispositivo tablet. E vamos tentar rolar para baixo. Até agora, a cabeça. Parece bem. Temos um logótipo. Temos o menu principal. Está tudo bem. A seção de heróis está bem sobre a nossa seção ainda está bem. Os serviços prestados estão bem. O porquê com o meu livro dessas seções. Acho que podemos melhorar isso, talvez exibindo. Duas colunas são supostas para quatro colunas. Ah, simplesmente com talvez fez a equipe que podemos fazer Mitt A equipe são três colunas em oposição a quatro colunas. O testemunho também parece bom. Os clientes ainda parecem estar bem. Entre em contato conosco bem. Vamos continuar para baixo. Na verdade, vamos apenas percorrer todo o caminho para o tamanho da tela pequena. Então isso seria para um celular e aqui a foto. Você pode ver que nós precisamos fazer algumas mudanças aqui. Vamos subir todo o caminho. Sim, nossos clientes, nós podemos definitivamente melhorar aqui, talvez exibindo os logotipos em duas colunas cada, ao contrário dos ums focais que temos aqui. Depoimentos realmente parece bom por padrão. Acho que não precisamos mudar nada para o depoimento. Mas isso é porque já exibimos os depoimentos em linhas individuais. Eles são apenas uma coluna não vai ao contrário das outras seções que têm, talvez, como, como duas colunas, três linhas e assim por diante. Então definitivamente para cima. Desculpe por isso. Definitivamente conhecer a equipe. Precisará ser melhorado tremendamente no celular. Nosso tamanho de tela. Você pode ver agora. Isso não parece nada bom. Vamos continuar subindo. Sim, eu ando. Isso parece terrível. A luta sensata. Também parece terrível. Então, provavelmente aqui terá que exibir duas colunas. Ou talvez até mesmo uma única coluna terá que esperar para ver. Sim. Ah, quem nós somos. O que fizermos terá que ser colunas simples também. E, claro, a cabeça. Ah, bem, nós vamos ter que fazer algumas grandes melhorias aqui. Principalmente o menu, como você pode ver. E isso, idealmente, é o que deve parecer. Então você pode ver. Agora temos o menu, e ele só aparece quando passamos o mouse sobre o item de menu, você pode ver agora você pode ver todos os são muitos itens aqui em cima. Vamos rolar para baixo e ver o que mais temos para que você possa ver como eles sobre todas as seções é quem nós somos, o que fazemos. Então os serviços fornecidos que você pode ver agora é uma única coluna A. Cada um parece muito melhor assim. Mesmo com por que andar com a gente fez a equipe está em duas colunas H e depoimentos e clientes. Consequências em dois vem em oposição aos quatro, e o resto permanece o mesmo, então essas são as melhorias que terão de fazer. Mas antes de entrarmos na codificação real, deixe-me mostrar como você pode adicionar seus tamanhos de tela. 75. Criando os pontos de pausa: Bem, volte. Então vamos agora falar sobre os tamanhos de tela, como podemos direcionar o tamanho dos olhos para um tablet e também como podemos levá-lo É tamanho rainha para um dispositivo móvel? Um telefone? Basicamente. Então temos essa coisa chamada pontos de tijolo quando se trata de CSS responsividade e um ponto de ruptura é definido por quando há uma grande mudança de estilo. Então o que eu estou dizendo aqui é isso OK? Neste momento, tudo continua igual, certo? Mesmo se eu rolar para baixo, você pode ver que o conteúdo é praticamente o mesmo para estruturar. É praticamente o mesmo que era em tamanho real. Mas, em seguida, se continuarmos a minimizar o tamanho da tela e, em seguida, ele chega aqui. Então por aqui, exatamente onde você tem Hamburgo, Alemanha, aqui em cima, isso é o que chamamos de ponto de ruptura. Este é o tamanho específico da tela em que uma nova mudança de design entra em vigor. E você pode, claro, que a mudança teria agora um menu de hambúrguer. Se nós rolarmos para baixo, você pode ver agora que violeta sensível é agora basicamente duas colunas em cada linha, e você tem algumas outras mudanças aqui também, com caminhada branca conosco e com a equipe. Então isso é o que chamamos de ponto de tijolo. Então o que vamos fazer diz responsividade, é que vamos indicar que, Ok, uma vez que a tela, que é esse tamanho de tela, que é esse tamanho de tela, iniciar essas novas mudanças de design e, em seguida, se continuarmos a minimizar a tela, vamos continuar. Apenas continue indo. Nenhuma mudança, nenhuma mudança, nenhuma mudança. E então, de repente por aqui, há outro grande, porque agora você pode ver sentido desde que não seja uma única coluna, bem como algumas outras seções aqui. Então vai haver outro ponto de ruptura. Então, idealmente, você deve ter um mínimo de dois pontos de interrupção. Um seria para a sua mesa. É tamanho rainha, e então o outro seria para o seu telefone celular pontuação tamanho. Mas você pode ir seus três mais altos, ou talvez até mesmo para nossos diferentes pontos de pausa. Tudo depende do tipo de conteúdo que você tem e como ele se parece. Então aqui está o Faneca. Vamos em frente e adicionar as bolachas. Quebra 0,4. É tamanho rainha em torno deste intervalo particular que é de cerca de 1000 e 24 pixels. Então vamos fazer isso. Eu vou entrar aqui. Vamos ao Maine para CSS. Vamos descer até aqui e eu vou pegar. Há conteúdo porque estamos criando uma seção totalmente nova. Vou acelerar isto e depois podemos ligar para isto. Vamos apenas chamar é o uh, cartas móveis chamado sua capacidade de resposta, em vez disso, responsividade. E agora vamos em nova linha. E aqui eu vou dizer, Vamos adicionar um novo comentário. Ah, quarta barra histérica e agora eu vou frio é o ponto de quebra dos comprimidos. Tudo bem, então outro histérico quatro barras e agora aqui está o código real para criar uma pausa quando vamos dizer na mídia e depois na tela Lee, e agora vamos sentar no máximo com. Então, desde que este conteúdo seja visualizado em um tamanho máximo de tela fora de 10 24 pixels iniciativas , novas mudanças, eu terei que adicionar as chaves universitárias bem ali. Então é isso. Criamos a primeira tabela 14, mas agora podemos fazer a mesma coisa de novo. Solyndra copiou tudo aqui uma cópia Venha aqui colar novamente e depois trocou tablets para Vamos com o nosso telefone. E agora aqui, podemos mudar o tamanho da tela para 768 pixels. Agora 10 24 pixels e 768 pixels são como os tamanhos de tela padrão são um tamanho de tela menor do que 76 Seria o nosso 4 80 Ou seja, se você quiser ir isso. Eu acho que é realmente a tela mínima, diz que se pode realmente segmentar para 80 pixels. Mas para os propósitos desta causa, vamos criar dois pontos de quebra, que seriam 10 24 e 768 pixels. Então isso seria para Taylor Devices. Isso seria para o telefone, nosso dispositivo móvel. Então é isso para criar são pontos de quebra. Alemão Advantix Vídeo disponível agora começam a aplicar algumas mudanças de design responsivo com CSS 76. Como criar o cabeçalho móvel parte 1: Bem. Comebacks em um vídeo anterior é criado com sucesso nossos pontos de interrupção para o nosso design móvel . Então, agora vamos começar a criar nossas mudanças CSS para capacidade de resposta. E a primeira vez em um alvo será o celular. Muitos, que é geralmente são uma das partes mais difíceis fora de capacidade de resposta amável. Então agora é assim que os muitos parecem nunca mudar de quadro Tentando fazer é fazer com que muitos se pareçam exatamente com isso. Então temos três barras. E então, quando seguramos esses três dólares, é quando os itens do menu aparecem agora. Mas observe também que, em tamanho de tela cheia, não vemos essas barras. Eles não estão lá. É por conta do Lee. Quando chegamos a um conjunto em tamanho de tela, é onde ele está por aqui. É aí que as três barras aparecem e, em seguida, o menu normal desaparece. Então, como é que vamos conseguir este efeito? Bem, primeiro de minutos fazer agora é criar oito estas três barras. Vamos criá-los antes de tudo. Certo, então aqui está o que vamos fazer. Vamos cabeça de olhar para trás para manter CSS e vamos fazer é vamos para indexar dot html e, em seguida, aqui mesmo. Ah, apenas abaixo da classe de homens Naff. Aqui é onde vamos adicionar esses três, chefe. Então, para fazer isso, veja isso. Como vou dizer aula de Dev. E vamos chamar isto. Ah, vamos chamar isso de alça. Ok, você pode chamar isso de maçaneta. Esse será o nome do menu de hambúrguer. Basicamente, vamos em frente e fechar isso. Então agora dentro desta classe de punho, eles vão adicionar três dibs. Três vidas vazias, na verdade. Então vamos fazer isso. Então vai ser o 1º 1 o 2º 1 e, claro, 1/3 1, porque temos três. Chefe, isso é o que temos três vidas vazias. Então vamos em frente agora e salvar isso. E, claro, se tivéssemos de volta ao nosso Broza, não vamos vê-lo porque está vazio. Não há nada que você veja. Então vamos voltar para o Maine que CSS e, em seguida, a partir daqui, vamos até o topo e vamos olhar para a seção de menu e está bem aqui. Então, deixe-nos fazer isso. Ok, vamos em frente agora e adicionar um pouco de estilo para aqueles dibs vazios. E o que exatamente estamos tentando alcançar? Bem, vamos dar uma olhada. Ok? Isto é o que estamos tentando alcançar. Então, cada dia de agora, como você pode ver tem um fundo Kahlo. Parece ter seu estado definido com uma altura definida, e há também alguma margem para separar as três linhas. Então vamos fazer isso. Ok? Primeiro, eu vou dizer, aqui está vamos direcionar o menu e, em seguida, punho ponto e, em seguida, a div. Tudo bem, então estamos mirando os dibs vazios agora. Então o primeiro anúncio lucrativo será o pano de fundo. Kahlo e eu temos a minha cor Bragan aqui ajustada para ah E cinco c cinco e cinco. E agora temos um com cada. Dave tem uma largura de 22 pixels e, em seguida, uma altura muito curta de dois pixels. E então vamos também adicionar alguma margem, cinco pixels e zero. Ok, vamos em frente para salvar isso. Vamos voltar para o nosso Boza. Vamos expandir isto. Vamos nos referir a Page e lá vai você. Ok, então por alguma razão, isso vai cheio sem certeza do que está acontecendo. Vamos voltar aqui. Oh, eu sinto muito. Eu não soletrei corretamente. Ah, sim, esse é o tipo de coisa que acontece quando você codifica. E chamávamos vídeos ao mesmo tempo. Peço desculpas. Então, com 22 pixels, vamos voltar aqui. Refere-se a Page e lá vai você. Ok, então agora você pode ver que agora temos o menu de hambúrguer aparente. Incrível. Mas precisamos de obter a identificação. Os muitos itens aqui à direita. Temos de pôr o menu aqui à direita. Então, obviamente, agora, você deveria estar pensando em flutuar. Então vamos fluir o menu todo para a direita. Então vamos fazer isso. Ok? Eu vou voltar. Dois principais que CSS. Mas agora vamos apontar o alvo principal do Dave nos três mergulhos. E, claro, essa vai ser a classe fora do controle. Esta é a classe. Vamos flutuar para a luz. Então vamos fazer isso aqui. Eu vou dizer menu punho ponto. E então bem aqui, assim mesmo, vou dizer que flutua para as luzes. Ok, vamos em frente. Salve isso e vamos ver como parecia atualização. E lá vai você. Ok, então agora você pode ver que está ali para a luz, mas nós não queremos ser exibidos ainda. Então queremos esconder o menu. O menu de hambúrgueres Até os scrimmages, o tamanho da tela dos nossos tablets terá que usar algo assim. Não jogue nenhum. Mas também vamos usar posição relativa porque vamos posicionar os itens do menu . Estes muitos itens começaram a posicioná-los, absolutamente. Então vamos ter que criar um ponto no tornozelo. Tudo o que podemos adicionar o hambúrguer muitos personalidade de e fazer este o ponto de ancoragem para os itens menos. Então, lições que vou voltar aqui. Então eu vou dizer que esta peça nenhuma para escondê-la. E, em seguida, vamos adicionar posição para relativo porque nós vamos criar. Vamos usá-lo como um ponto de ancoragem para nossos itens de menu. Certo, essa é a alça. Agora vamos passar para a nossa seção responsiva e, em seguida, aqui vamos agora ver onde temos que 10 no futebol agora ver, exibir o identificador do menu como um bloco, então basicamente fazendo o oposto agora, porque aqui mesmo isso irá controlar o vista para o dispositivo móvel para tablets então vai simplesmente dizer bloco, Então essencialmente fui lá estavam dizendo, Quer a tela, que é um máximo com atenção para pixels, exibir a alça exibida como um bloco. Agora note que a menos que nós viemos aqui para o telefone e, em seguida, sobrescrever este estilo de partícula , quaisquer estilos que incluímos para a tela de letras diz, será automaticamente herdado por este pequeno rabo coincide apenas para que você saiba. Portanto, não há necessidade de entrarmos aqui e também na mesma coisa. Não há necessidade disso. Então vamos em frente. Salve isso. Vamos voltar aqui. Vamos refrescar. E agora, se nós homens minimizarmos a rainha agora, você pode ver que temos o menu aparecendo bem ali. Você pode ver que agora é aparente incrível. No entanto, agora precisamos obter o nosso menu principal para tipo de flutuar sob o hambúrguer. Muitos como o que temos estão aqui, como podem ver. Então a coisa é agora, a única razão pela qual temos muitos itens muitos por padrão são itens de bloco. Mas a única razão pela qual eles estão mostrando que há blocos de terra é porque nós temos o nosso carro alegórico aplicado a eles. Você vê, bem aqui nós temos flutuação esquerda. Então, se você remover flutuador esquerda agora, você pode ver lá agora aparecendo como eles disparam. Mas também podemos aplicar a propriedade off text align, como você não pode, como você pode ver. Então agora estamos prontos para parecer exatamente como o que temos aqui. Os itens da lista, mas o texto está mentindo para a luz e, em seguida, não flutua. Então vamos em frente e aplicar essas mudanças aqui. Eu simplesmente não vou dizer menu e depois Ally, e então nós vamos dizer flutuar. Nenhum. Mas Daniels também tem um texto alinhado à direita. Vamos em frente agora. Guarde isso. Vamos voltar aqui. Vamos atualizar a página. Desculpe, longa, longa página. Vamos atualizar esta página e lá vai você. Incrível. Então agora temos nossos itens de menu parecendo itens de bloco, leva uma linha para a luz. Então tudo o que precisamos fazer agora é descobrir uma maneira de posicioná-los para aparecer apenas no menu de hambúrgueres da Marinha. Mas, em seguida, Onley aparecer quando ho var em nosso humilde menu tem. Então vamos abordar isso no vídeo Vertex 77. Como criar o cabeçalho móvel parte 2: Bem-vindo de volta à parte dois para o estilo em nossa cabeça móvel. Também dar aviso, temos sido capazes de fazer algum bom trabalho Até agora, temos sido capazes de obter o hambúrguer, muitos para exibir apenas uma vez, que é um tamanho de tela de 10 24 pixels como é agora na tecnologia Parar, ele Está perfeitamente bem. Mas, em seguida, uma vez que chegar dentinho, são apresentados vista. Isto é o que temos atualmente. Então, o que precisamos tentar e realizar agora é descobrir uma maneira de esconder todos os itens da lista de mostrar. Basicamente, vamos ter que conversar sob o menu de hambúrgueres e então Onley mostrar-lhes quando pairarmos sobre o menu de hambúrgueres. Então, como eu sugeri em um vídeo anterior, nós já fizemos a posição do menu de hambúrguer relativa porque nós estamos indo absolutamente posição são menos itens. Então vamos antes de tudo, fazer isso. Ok, eu vou entrar aqui e convidar aqui. Vamos ver, logo acima aqui, eu vou dizer menu de pontos e então você l ok, e agora vamos apenas dizer que posição vai ser sal aplicativo. Ok, vamos em frente. Guarde isso. Vamos agora ver a mudança. Refresque. E lá vai você. Ok, então agora você pode ver que ele está posicionado. Absolutamente Mas então você também pode ver que ele está basicamente indo para fora agora. É limítrofe para o elementar. E abra isso um segundo. Então agora temos que rolar até aqui até o branco para vê-los. Então, a maneira como podemos garantir que eles não saiam da fronteira para o humilde governo é simplesmente salvar luz zero. Então vamos fazer isso. Eu vou voltar aqui. Dois principais que cessa e convidam aqui. Eu vou salvar o zero direito. Então isso irá bloquear os itens de posição absoluta dentro da borda. Vamos voltar aqui com fresco. E lá vai você. Incrível. Então agora temos os itens do menu, posição absoluta bem ali na fronteira, fora do hambúrguer, muitos incríveis. Então, o próximo passo agora seria descobrir um jeito de esconder os muitos itens e então Onley mostrar-lhes quando chegarmos no hambúrguer. Muitos para que possamos fazer isso. Tudo bem, vamos voltar aqui para que possamos dizer a direita aqui. Mas temos o nosso menu ul. Podemos dizer que essa peça não é nenhuma. Ok? E agora podemos dizer “show”. Então está no menu, no menu. E então, quando passamos o mouse em um menu agora para o U L exibir o, hum Ok, apesar do menos itens exibir como um bloco, certo. Então, por padrão, vamos ocultar nossa lista. Item o aviso da alça. A propósito, eles lidam com aulas. O único é aquele que exibe as três barras. Então, há este avião como um bloco. Não estamos falando sobre isso. Estamos falando da menor tentativa, que é a classe UL. Certo, então esse é o que vimos exibindo nenhum. Mas, em seguida, agora exibido como um bloco no todo, sobre o nosso hambúrguer. Muitos. Isso é exatamente o que os olhos estão acontecendo aqui. Então vamos em frente. Salve isso. Voltamos aqui para primeiro uma página e vamos esperar para ver. Tudo bem, para que eles possam ver que se foi. O Hamburgo, Alemanha, ainda está lá. Mas quando passarmos o mouse sobre o menu de hambúrgueres, agora você pode ver que agora temos a lista. Itens são Pierre em exatamente assim. Olhe para isso. Lasca. Isso é incrível. Ah, lá vai você. Ok, então, estar quase lá, mas nota é uma coisa que eu gostaria quando chegamos sobre os itens do menu você vê a maneira sutil que parece é como se fosse uma transição acontecendo. Ok. Você vê isso? É muito, muito, muito suave. Não é como o que temos. Ah, eu sinto muito. Deixe-me colocar isso de volta. Não é como o que temos aqui, onde é instantâneo. Portanto, há um efeito de transição em jogo aqui, mas as transições não funcionam na propriedade de exibição. Então, basicamente, podemos dizer exibição de transição e fácil. E ele está fora de coisas. Sei que isso não vai funcionar. Então, como podemos aplicar o efeito de transição enquanto ainda nos escondemos nos muitos itens? E depois em Lee mostrando-os no menu de navegação, mas podemos simplesmente mudar a exibição para outra propriedade conhecida como opacidade. Certo, mas temos essa peça. Vou mudar a exibição aqui para opacidade, e então para vir para não mostrar nada, eu vou dizer opacidade. Zero que basicamente irá esconder os itens do menu e, em seguida, aqui mesmo. Quando chegamos em um menu, itens me deixam mudar de exibição aqui também, volta à capacidade. E então, em vez de zero, agora temos ah um. Certo, vamos em frente, guarde isso. Atualize a página e diz que ela pode ver Agora os efeitos ainda não começaram porque não aplicamos a transição. Mas você pode ver que ele ainda está basicamente andando da mesma maneira Os muitos itens não apareceram até ser agora, sobre o menu de hambúrgueres. Ok, então agora vamos em frente e adicionar o efeito de transição. Vou fazer isso aqui, onde temos muitos “você “? Bem, todos aqueles que vêm aqui e dizem opacidade de transição. E agora podemos acrescentar que são 0,5 segundos. E, em seguida, a função de temporização aqui seria facilidade para fora. Ok, vamos em frente. Guarde isso. Vamos voltar para dentro. Aqui se refere a página, e agora você pode ver o efeito de transição aparecendo. No entanto, você pode notar outra mudança ligeiramente nisso mesmo antes de chegarmos ao hambúrguer. Quando você pode ver o menu, itens começam a exibir basicamente quer, as montagens entra nos depoimentos, tudo com área que você pode ver uma vez que ele entra aqui, todas as primeiras tentativas começam a mostrar. Então isso é algo que temos que corrigir com apenas uma lista de tentativas de mostrar quando realmente chegamos no cesto. Tenho muitos. Então, para consertar isso, vou apresentar a vocês o inspetor para mais uma vez. Então vamos fazer isso. Ok? Vamos primeiro garantir que, por padrão, esses caras, nós nem sequer os vemos. Do que estou falando? Vamos fazer isto. Ok? Vou voltar aqui para o IES e, na verdade, para a UL. Desculpe. Vamos fazer isto. Ok? Vou remover a opacidade para que eles sejam sempre mostrados por padrão. Mas agora vamos tentar esconder esses itens da lista abaixo do menu de hambúrguer. O que podemos fazer é introduzir uma posição de topo, mas depois em negativo ou, digamos, 100 pixels como exemplo. Então, por que você pode ver que nós não vemos mais sobre. Então, se continuarmos aumentando, aumentando, aumentando, aumentando, aumentando, você pode ver que eles estão desaparecendo. Desaparecimentos, aparências, aparecendo desaparecendo. Vamos até o fim, Teoh. Vamos ver. Ok, vamos apenas sobre estranho para pixel. Portanto, 100 pixels negativos serão por padrão. Ocultar os itens do menu. Tudo bem, vamos fazer isso de novo. Vou voltar aqui e vamos fazer isso. Vou dizer “Tup Negativo”. 400 pixels. Ok, vamos em frente. Agora guarde isso e depois voltarei para cá. Vamos atualizar a página. E agora observe que quando passamos o mouse por aqui, não vemos mais os itens do menu explicar, porque já os empurramos todo o caminho para o topo fora do navegador, no entanto, entanto, até agora está sobre o hambúrguer. Manu, nós ainda não os vemos porque eles ainda estão com 400 pixels negativos. Então, agora temos que dizer quando passarmos o mouse sobre o menu de hambúrguer, mudar a posição de topo fora da classe UL. Então menos é eu vou apresentar o inspetor mais uma vez e vamos fazer isso. Ok, eu vou para a classe de homens, você e então aqui mesmo onde você tem Hall of Eu vou clicar em Hope e então simplesmente forçar o estado pairando. Ok, então isso agora mostrará todos os CSS disponíveis quando tivermos o nosso no menu e formos especificamente alvos no Elemento U. L. L.sobreviveu Aqui você tem nossos principais pixels de financiadores aqui em cima. Este é o lugar onde estamos pairando sobre o, hum eu não vou dizer top. Ah, digamos que talvez 20 pixels. Ok, então agora você pode ver que eles são 20 pixels. Will, de fato, exibir os itens do menu corretamente. Então 20 pixels, talvez 25 pixels. Agora, eu penso quando está tudo bem. Então, assim, quando eles passam o mouse, possuía um menu de hambúrguer, altere a posição superior de 100 pixels negativos para 20 pixels. Então vamos em frente e fazer isso. Vou voltar aqui e muito simplesmente, bem aqui. Eu só vou dizer 20 pixels. Vamos em frente. Guarde essa cabeça aqui. Atualize a página. E lá vai você. Criamos com sucesso a carne de hambúrguer que temos aqui. Como pode ver, sinto muito por isso. Deixe-me colocar isso de volta aqui. E é basicamente isso. Então, a única grande diferença aqui é, é claro, as margens que você pode ver por aqui. Nós realmente não temos nenhuma margem. Então talvez possamos também mudar a margem. Talvez também empurrou um pouco o menu de hambúrguer. Você pode ver que é um pouco maior do que o logotipo. Então, vamos aplicar algumas mudanças aqui. Vou voltar e, muito simplesmente, apontar para a classe do menu. Então diga menu e, em seguida, legis em uma margem top off. 32 pixels já testaram este barco. Então eu sei que este trabalho para que os dois pixels Vamos em frente. Salvar cabeça de volta para rebeldes são refere-se a página eo ego. Agora você pode ver que o menu de hambúrguer mudou mais para baixo e agora está alinhado com todo o logotipo. Ok, mais algumas mudanças Notei que quando passamos o mouse sobre os muitos itens aqui, você pode ver que o cursor gira para um ponto são e, em seguida, nossos itens de lista não têm nenhuma margem. Então vamos em frente e consertar esses dois favoritos rapidamente. Vou voltar para cá. Vamos primeiro de tudo ir até aqui, onde temos a alça e eu vou dizer aqui mesmo cursor será o nosso ponteiro. Certo, e então vamos. Venha até aqui e removeremos as margens dos itens da lista. Então, a margem fixa zero. No entanto, deixe-me salvar a nota agora que quando eu atualizei a página, vamos primeiro de tudo testado o cristal para que o cristal funciona. Mas agora você pode ver isso porque nós removemos as margens. Os itens do menu são agora bombardeados bem ali na fronteira ao largo de Hamburgo, Alemanha, do bar do Hamburgo, Alemanha. Então precisamos empurrá-los para baixo. Então vamos ver que valor podemos dar a eles. Ah, vamos voltar aqui para a aula dos EUA . Então, ok, então em vez disso, fora dos 20 são pixels patetas limitadas. Bem, rápido, porque em vez dos 20 pixels que temos aqui, talvez possamos trazer isso para baixo para que, digamos, 30 pixels. Mas eu acho que os pixels estariam bem. Então vamos em frente e mudar isso. Vou mudar 20 pixels aqui, 2 30 pixels e voltar aqui para a primeira página. E lá vai você. Que finalmente conseguimos terminar o nosso edifício em Hamburgo, Alemanha. Itália para os custos são mais de 20 minutos para conseguir isso, mas espero que você não tem técnicas da cidade envolvidos na criação de um hambúrguer muitos. Muito obrigada. Vídeo afortunado. E como sempre, se tiver alguma dúvida sobre algo secreto até agora, me avise. Vereador. É melhor respondê-las o mais rápido possível. Muito obrigado. Vemo-nos na próxima aula. 78. Reagem de tablets: Bem-vinda de volta. Então vamos continuar com as mudanças responsivas e anteriormente fomos capazes de criar o menu de hambúrguer e parece bom. Eu acho que isso parece bom em todos os tamanhos de tela. Isso é perfeitamente bom. No entanto, Vamos começar a rolar para baixo e dar uma olhada no que mais podemos mudar. A seção de heróis parece perfeitamente bem. Acho que não precisamos mudar nada aqui. Ah, vamos esfriar sobre uma seção parece bem. Além disso, não há necessidade de mudar de serviços. Fornecer olhares mortos. Ok, vamos tentar fazer isso um pouco menor porque, lembre-se, somos alvos em um alcance. Então vamos tentar chegar perto de 7 60 pixels. É possível. Observe o decider com o tamanho fora da tela dia certo como eu estou minimizando, minimizando, então vamos chegar o mais próximo de 7 60 pixels. Isso é possível, e você pode ver isso. Que tal por aqui? Começa a parecer muito ruim em torno do Lynch de 7 90 pixels que está parecendo muito ruim. Então o que podemos fazer é criar ou mudar a estrutura para se tornar nossas duas colunas, vez de três. Ok, então precisamos fazer uma mudança para os serviços prestados. Por quê? Caminhada desses? Definitivamente. Precisamos fazer mudanças. Bem, talvez duas colunas em vez de quatro minutos. A equipe pode ir para três colunas. Depoimentos está bem. Os clientes devem ir para talvez duas colunas nas colunas B três. Vou ver e contactar-nos. Está perfeitamente bem. Então vamos mudar. Em primeiro lugar, os serviços prestados. Certo, para fazer isso, vou entrar aqui. Nota. Ainda estamos sob a seção do tablet. Então leve aqui, vamos adicionar comentário, e eu vou chamá-los de lista de serviços. Certo, então o que estamos fazendo aqui? Vamos falar sobre isso na aula de serviços, e depois vai ser a lista de traço. E agora anote. Ou lembras-te disso na secção de serviços? - Não. Havia tentando segmentar os elementos l i diretamente dentro da classe de lista de serviços. Estes são os elementos da companhia aérea que eles querem no topo. Como se os homens visassem as crianças aliadas aqui. Este está dentro de outro rul. Nós só queremos segmentar este é particular porque estes são os que têm o conteúdo real . Você pode ver o seu antigo H três o título de cada serviço particular de desenvolvimento e , em seguida, a lista de crianças altas temporárias sob cada um. Então estes são os Aliados que querem ter este particular aqui, este, este e assim por diante. Então, teremos que usar o símbolo ralado para atingir diretamente os aliados que estão sob a classe de lista de serviços. Então nós vamos voltar aqui e vamos dizer maior que L I. E agora vamos mudar o com para Vamos com o pé 9%. , temos de ser cuidadosos No entanto, temos de ser cuidadosos, porque creio que também acrescentámos algumas margens. Vamos chamar peso aparecer no convés, parar de ver e ver. Tudo bem, então esta é a seção de serviços e luz aqui. Você pode ver a inicial com vai ficar 2.3 e, em seguida, temos margens no topo e depois à esquerda. Temos 1%. Então, para estar no lado seguro, vamos com talvez 48,5 em vez de 49% menos bom para os 8,5%. Então temos espaço suficiente para a margem. Vamos em frente agora. Salve isso. Vamos voltar aqui. Vamos nos referir a Page Ah, vamos rolar até aqui e lá vai você. Então agora está parecendo muito melhor. E mesmo se formos muito, muito perto de 7 60 pixels, ele ainda parece perfeitamente bem. Nós temos uma coluna sobre ficar sozinhos por conta própria, mas não há nada que possamos fazer sobre isso porque temos nove colunas. Então não há nenhuma maneira como podemos dividir em nove colunas são igualmente. Simplesmente não vai acontecer. Mas isso está perfeitamente bem como está. Oh, vamos descer aqui. Nós temos o passeio do vinho conosco. Certo, isso precisa mudar. Precisamos trazer todos os colombianos aqui para ir. Talvez 49 ou talvez 40,5% basicamente são duas colunas na natureza. É isso que estamos tentando atingir aqui. No entanto, se você se lembra aqui onde temos lá, por que nós? Usamos o traço de chamada no traço para a aula e demos a essa classe eu acredito que com 24% de algo assim. Então tudo o que realmente precisamos fazer aqui é apenas mudar a largura desta classe em particular para talvez 48,5% e nós devemos ficar bem. Então vamos fazer isso. Eu vou voltar aqui e logo acima do serviço, apático cria outra seção, vai chamar seus layouts, muda a estética. Então vamos pegar o Dash 1-4 e agora vamos mudar de novo para 48,5% só para estar no lado seguro. Vamos em frente. Salve isso. Vamos voltar aqui. Refere-se à página. Vamos rolar para baixo aqui e OK, então deixe-me apenas mostrar-lhe um erro comum que os desenvolvedores cometem. Vamos começar a expandir isso um pouco mais para a detenção. Ok, então, tipo, agora, isso parece perfeitamente bem, certo? E você pode pensar para si mesmo Oh, parece bom neste tamanho de tela particular, então deve ficar bem agora, certo? No entanto, quando se trata de testar a capacidade de resposta, você deve sempre testar os intervalos para cada ponto britânico. Então, no nosso caso agora são ponto de ruptura atualmente é 10 24 para cerca de 7 60 Devemos testar nosso projeto em ambos os pontos finais. Certo? Então, às 10. 24 que é aproximadamente em torno de Ah, aqui. Este é o 10. 24. Parece bom, certo? Mas então, medida que começamos a nos aproximar dos 760, começamos agora a notar uma grande questão aqui. Observe agora que a terceira coluna é executada de forma eficiente agora está mais abaixo. Se continuarmos, minimizando, minimizando novamente, de repente, ele está de volta para onde deveria estar. Mas então, se chegarmos ao som 60, é possível que tenhamos o problema novamente. Então, o que está acontecendo aqui? Por que as alturas flutuam? E por que está subindo indo? Bom. Eu vou descer. Bem, é simplesmente porque nestes diferentes pontos, o campo de pesquisa tem uma linha adicional de texto comparada com a coluna de dados analisados. Observe a direita aqui agora, por exemplo, por exemplo, nós progredimos por conta própria é a linha adicional de texto. Mas então, se fizermos isso maior agora, você pode ver o número de linhas para o campo de pesquisa e analisá-lo da mesma forma. É por isso que estes dois brancos aqui são meio equilibrados, certo? Mas então você expande e, de novo, aqui, a mesma coisa acontece de novo. Então, a razão pela qual estamos tendo esse problema. Além desta linha adicional é porque estamos flutuando as colunas. Tenha em mente que quando você flutua em coma, você flutua um elemento. Há sempre a possibilidade de quebrar a estrutura natural. Mas lembre-se, nós também falamos sobre a propriedade limpa. Podemos usar o Partido Clipper para evitar que tais problemas aconteçam. Mas aqui está uma fina. Como saberemos qual desse Colombo deveria ser o alvo? Não vai fazer nenhum sentido para nós entrarmos aqui e dizer, OK, OK, bem, vamos apenas pegar todas as colunas da seção porque nesse caso, conhecidas, as colunas estarão flutuando. Mas queremos que alguns grumos flutuem enquanto queremos que outros não flutuem. Então ele era exatamente o que vamos fazer. Teríamos de apontar as colunas para a direita, neste caso, para a direita, para aqueles cuja estrutura foi quebrada neste caso neste momento. Chamá-lo 40 a propósito, Eu acho que eu disse antes que executado Visão havia 1/3 coluna. Na verdade, é a quarta coluna. Meu plano de erro à frente é a terceira coluna. Então, neste caso, e então você pode ver que a quarta coluna é a que está sendo afetada. Como tal, queremos limpar a coluna para sua luz. Então, basicamente, vamos limpar a terceira coluna, que é planejado com antecedência e também no futuro. Se decidimos adicionar colunas adicionais, talvez mais duas colunas. Posso garantir-lhe que há uma possibilidade de que a sexta coluna seja afetada. Então, neste caso, onde você gostaria de levá-lo. A terceira coluna A quinta coluna, a sétima coluna, nona coluna, 11ª coluna e assim por diante e assim por diante. Essas são as colunas. Você é alvo neste tipo particular de cenário. Mas como fazemos isso? Como diremos a terceira coluna? A quinta coluna sete e assim por diante. Bem, vou apresentar a vocês no novo selecionado conhecido como o filho final selecionável. Vamos até aqui e aqui é exatamente como vai funcionar. Primeiro vou me sentar. Ligue para Dash 1-4 e agora Coolum e agora termina Criança. Este aqui é o seletor que podemos usar para atingir elementos específicos em qualquer estrutura, mas vamos atrás do 3º 5º 7º e assim por diante. Então eu vou apresentar a vocês esta fórmula para terminar mais um. Sei que parece grego, mas não se preocupe. Vou explicar-te isto agora mesmo. Basicamente, o que está acontecendo aqui é que criamos um loop. Vês este fim ali? Começará com um valor fora de zero. Então, basicamente, o primeiro elemento que vamos atingir seria o tempo zero mais um, que seria basicamente zero mais um, que seria o primeiro elemento. Isso é bom. Mas, em seguida, o fim vai agora virar para um. Então agora serão dois multiplicados por um um mais um, que será três animais 22 que seria multiplicar por duas mulheres mais não deve ser o quinto elemento e assim por diante e assim por diante. Então, esta aqui é uma forma de segmentar os números ímpares, Theo, colunas antigas em nossa estrutura. Então eu vou fazer isso. Eu vou entrar aqui. E só para provar que isso realmente funciona, vamos mudar a cor primeiro. Ok? Para ler. Idealmente, neste momento, deve ser apenas a primeira e a terceira colunas cujo Culo fica vermelho. Vamos para o nosso Broza. Vamos entrar aqui. Refere-se à página e agora você pode ver que tanto a primeira como a terceira colunas a cor mudou para ler porque estamos direcionando todas as colunas numeradas ímpares em nossa estrutura. Dito isso, vou voltar aqui agora mesmo. Mude Coehlo para limpar e vamos apenas dizer que são ambos. Deixe-me ter certeza de que isso está correto. E lá vai você em segurança voltar para os rebeldes estão atualizando a página e lá vai você. Portanto, não temos mais problemas com as colunas estão empilhando um sobre o outro. Então é exatamente assim que você pode corrigir esse tipo de problema, mas não é um partido Clipper e levá-lo nas colunas numeradas ímpares em sua seção. Então é isso, a parte não vai me dar uma parte dois. Disponível Agora aborde o minuto em que a equipe, bem como as seções de nossos clientes. Vejo-te então. 79. Responsiveness de Tablet parte 2: Bem, volte. Teoh são design responsivo e tudo bem. Até agora, tão bons serviços prestados foi cuidado fora enquanto caminhar com a gente também foi cuidado . Mas agora precisamos mudar as estruturas para Mitt, a equipe e nossos clientes. Então vamos fazer isso para fazer a equipe. Podemos ir com três colunas coisa que deve estar bem. Então vamos tentar entrar em três colunas aqui. Então vai fazer isso. Vou até aqui e logo depois da lista de serviço. Na verdade, números, pegue todo esse código. Vamos copiar isso. Venha aqui, colar. E, claro, agora vamos mudar a lista de serviços também. Nossa lista de equipe, talvez. Vamos ligar para a lista do Tim. Então o que vamos fazer é mudar o mínimo. E o clássico é o membro da lista de traço da equipe. Apenas confirme que é esse o caso. Vamos voltar ao índice com HTML. E ah, lá estava Ok, então você pode ver. Sim, é a lista da equipa. OK, bom saber. Então nós temos equipe uma lista, e então não há necessidade de usar o símbolo maior que porque não havia nenhuma criança Elementos Aliados é apenas um único elemento aliado na estrutura. Então o com aqui mudará o com mais de dois. Vamos com 32,5% porque, novamente, os Aliados também têm margens. Então você tem que manter isso em mente. Uma ondinha. Então vamos em frente. Salve isso. E vamos ver o que temos agora. O que se refere a página. Vamos rolar aqui e oh, ok, então parece que 32.5 pode ter feijão um pouco demais. Vamos inspecionar e dar uma olhada no que temos. Ok, então você pode ver que temos margens para a esquerda, que é 1%. Então, oh, eu sinto muito. Isso realmente vai além 33% imediato, porque se você adicionar 1% para a esquerda para 32 ponto mais torna-se para o 3.5, modo que saberia andar. Então o que podemos fazer é talvez possamos mudar com aqui 2/3 a 1,5% em vez disso. Então, com isso, em 1,5, agora temos essa estrutura particular, o que é bom. Está tudo bem. É muito parecido com o que temos atualmente aqui, como você pode ver, então teta 1,5% são vai fazer o truque. Então vamos mudar de volta para 321 0,5%. Incrível. E finalmente, estamos dando uma olhada na seção de recusos de nossos clientes. É a que está bem aqui. Então, o que temos aqui? Temos a lista de clientes, e depois temos os nossos aliados. Certo, bem direto para a frente. Vamos fazer isto. Eu vou até aqui e todos aqueles pegarão todo esse código de novo. Copiar Colar. E então vamos mudar de equipe para clientes. E então a classe aqui vai ser listas de clientes, lista de clientes. E, claro, o com. Vamos manter o com em 31,5% também, só para mencionar alguma consistência. Então vamos salvar isso. Vamos voltar aqui, é onde a primeira página. Vamos ligar até aqui e lá vai você. Incrível. Incrível. Incrível. Sem classe. Agora a aparência é muito boa. Então é isso para a mesa. Vamos rolar até aqui. Certifique-se de que está bem, então o contato de ainda parece bom. O futuro parece bom. Vamos até 760 e ver se há algo que precise ser mudado de novo. Certo, então neste momento, agora, estamos de fato no alcance de 750. Então é assim que as coisas se parecem quando visualizadas em um telefone celular. Na verdade, não é tão ruim de qualquer maneira. Vamos dar uma olhada nisso no próximo vídeo. Eu só queria confirmar agora, lá para a vista de mesa no 762 tudo parece perfeitamente bem. Alma. Nós estávamos praticamente feito com a exibição de tabela, e então agora podemos passar para projetar o site para o telefone fora da vista. Então isso é um alemão no próximo vídeo sobre, vamos dar uma olhada no que diz a você então. 80. Responsividade de telefone: bem-vindo de volta ao vídeo final em uma seção responsiva, porque agora vamos segmentar o menor tamanho de tela em 7 60 pixels. E para ser honesto com você, geralmente é de longe o mais fácil de corrigir, porque tudo o que você realmente precisa fazer é geralmente apenas definir todas as colunas para ir cheio com a maior parte do tempo e, em seguida, nossas colunas que eram três colunas antes de você simplesmente dizê-las vá para a coluna. Então você dá a eles um com talvez 48%. Então é muito fácil. De qualquer forma, vamos em frente e mirar no final. Então isso é tão pequeno quanto ele fica e eles nos pegaram. Parece bem, mas agora eles estão sobre a seção definitivamente precisa ser alterado, como você pode ver, então precisamos ir estão cheios com para cada uma dessas colunas individuais. Então vamos dar uma olhada na estrutura. Vamos voltar ao index dot html e aqui em cima. Então é aqui que usamos o traço de carvão Juan traço para a aula. Nós não precisávamos levar isso em uma visualização de tablet porque parece bom. Mas agora, para a visão do celular, bem, espero que precisemos fazer algumas mudanças. Então vamos para cá. E, claro, vamos percorrer todo o caminho até aqui. Estou apenas removendo todo esse espaço vazio. Ok, então bem aqui dentro do máximo com 768 pixels para o telefone, nós vamos dizer ponto chamar Dash um traço para e neste caso Will apenas disse o withs para ir basicamente cheio com, então vamos apenas com 99%. Vamos com 98%, porque lembre-se, nós temos alguma margem. Então vamos com 98%. Vamos salvar a cabeça de volta aqui foram primeiro a página e lá vai você. Agora parece perfeitamente bem. Incrível anos setenta desde que eu acho que também precisamos definir isso para ir cheio com porque em duas colunas não parece tão bom. Acho que aqui dissemos que era para uma única coluna. Sim, você pode ver agora que esta é uma coluna. Parece muito melhor. Então vamos mudar isso. Então eu vou até aqui, pegar a lista de serviços completamente. Vamos copiar isso. Venha aqui e pague tudo de novo. Mas agora simplesmente mudará o com para a lista de serviços de 48 para 98,5. FM legal. Vamos em frente. Guarde essa cabeça aqui. Bem, primeiro a página e lá vai você. Simplesmente assim. Parece bom. Parece muito melhor, mas como ele, OK, por que andar com a gente também precisaria ir completo com. Como você pode ver, isso não está parecendo muito bom. Então vamos fazer isso de novo. Vou pegar as mudanças de layout. Vamos copiar isso. E, de fato, vamos colá-lo aqui no topo. Certo, movemos essa linha. Tudo bem, então coluna, traço 1-4 vamos com 98,5%. Diga que a cabeça de volta aqui, atualize a página. E lá vai você. Como eu disse, é muito, muito fácil. Tudo o que você realmente precisa fazer neste momento é apenas mudar as larguras de suas colunas em meio ao tim. Definitivamente. Acho que podemos ir com dois clubes aqui, em vez de um. Acho que duas colunas. Nós ficaremos bem. Então, vamos também corrigir esse. Ah, lista da equipe. Vamos em frente. Vamos pegar isso. Vamos até aqui, colar. E agora vamos simplesmente mudar a lista da equipe com de para 1,5 e podemos ir com 14 9 na verdade, não para o nome, mas 48 0,5% seguro. Aquela cabeça de volta aqui foi a primeira página e lá vai você, bom aspecto. Olhando bem. Vamos descer até aqui. Nossos clientes Ok, Isso pode definitivamente ir para colunas também. Então vamos fazer isso. Vamos pegar essa cópia, vir aqui, colar, e então simplesmente mudaremos a lista de clientes. Diferentes. Esse 1.5 2 48 0,5 também. É seguro. Vamos voltar aqui. Bem, primeiro a página e você vai. Então, isso também parece bonito. E depois, por último, mas não listas até aqui. Os empreiteiros parecem bem. Lá vai mudar qualquer coisa, mas a comida precisa de algumas mudanças. Como você pode ver agora, as mídias sociais Aikens são para as luzes e, em seguida, temos o menu de navegação para a esquerda. Então isso parece meio distorcido. Então o que podemos fazer aqui é basicamente configurá-los para ir com e, em seguida, talvez apenas o nosso texto, alinhá-los ao centro. Então vamos dar uma olhada na estrutura de moedas para o rodapé para que você possa ver que temos um menu de fotos de classe e em sua classe são menu social. E se formos para o nosso principal ponto CSS, vamos até aqui. Você notaria isso. Ok, nós fizemos flutuar o principal social para os direitos, e nós também flutuamos o pé em muitos para a esquerda. Talvez possamos remover os carros alegóricos e ver o que aconteceria. Então vamos fazer isso. Vou criar uma nova seção para o rodapé. Vamos colar isso e vamos apenas mudar a lista de clientes aqui para comida e, em seguida, simplesmente vamos apenas mudar a classe aqui. Então temos o menu Fouda Dash e podemos ir com um coma e, em seguida, classe de membro do menu Social Desh . Apenas confirme que estas são as aulas reais. Então temos menu social e, em seguida, menu de tempo de comida. Ok, incrível. Então vamos até aqui e agora basicamente vamos dizer carros alegóricos. Nenhum flutua nenhum. Vamos ver o que acontece. Vamos salvar isso. Vamos voltar aqui. Vamos nos referir a Page e lá vai você. Ok, então chega de flutuar. Mas agora você pode ver que ainda temos as mídias sociais Aikens tipo de como na mesma linha com o menu de comida top. Portanto, a razão pela qual isso ainda está acontecendo é porque as companhias aéreas em ambos os menus também estão flutuando para a esquerda. Se voltarmos para ah, principal que CSS e vamos até aqui, você pode ver aqui que temos provavelmente o rodapé que você pode ver. Nós temos o pé, Emmanuel. Eu saio flutuando para a esquerda. Nós também temos sob o menu social. Nós temos o social, muitos aliados flutuando para a esquerda também, então nós podemos apenas mover a lata de fluxo deles e simplesmente exibi-los agora como um bloco em linha . Então veja isso como se eu fosse. Vou voltar aqui e vamos pegar todo esse código. Vamos pegar essa cópia, vir aqui, colar, e então vamos dizer “Menu da comida”. Ilyse, menu social aliado e agora flutuar. Nenhum. Mas então, se não os flutuarmos, eles serão exibidos como um bloco. Mas para garantir que eles não deslocam o bloco vai apenas agora dizer, exibir como e em bloco de linha. Ok, vamos em frente. Guarde isso. Volte aqui, atualize a página e lá vai você. Então, agora, eles não estão mais flutuando. Mas temos sido capazes de exibi-los em linha porque estamos usando-os como em blocos de linha. Se nós não disse exibição no bloco de linha, eles vão exibir como blocos empilhados em cima um do outro. A última coisa que precisamos fazer é enviar um aliado para o centro. Basicamente. Então as ordens vêm aqui e sob o tempo integral, um novo e social muitos serão apenas um texto, ah, linha centro vírgula cólon salvo que volte. Aqui se refere a página e lá vai você. Então, há realmente ah maneiras diferentes de como nós poderíamos ter corrigido esse problema em particular. Mas eu só quero te mostrar essas outras maneiras de sair deste avião. Seus itens de lista como blocos interiores em vez de flutuá-los para a esquerda ou para a direita, modo que é praticamente para o responsivo são parte para a visualização de telefone. Muito obrigado por assistir. E, claro, te vejo na próxima última vez. 81. Revisão de seção de responsividade: então eles têm. Chegamos ao fim desta seção onde abordamos a capacidade de resposta e, neste ponto, você já deve começar a construir sites porque você sabe que é Jemele. Você sabe, CSS, e você também sabe como tornar seu conteúdo e a estrutura adaptável a diferentes tamanhos de tela . Mas você sempre pode aprender algumas coisas novas que algumas coisas adicionais novas. E na próxima seção, vou mostrar como você pode otimizar e aprimorar ainda mais o design e a funcionalidade do seu site. Te vejo então. 82. Pré-visualização de otimização de sites: o que é bem-vindo a esta seção onde vamos abordar a otimização do site e o ângulo do braço . O principal objetivo nesta seção é obter a vida do nosso site na Internet. Até agora, estamos construindo localmente. Agora é hora de transferir todos os nossos arquivos para a Internet. Então eu vou mostrar a vocês como você pode obter um nome de domínio, como você pode obter hospedagem na Web e, claro, como você pode finalmente lançar seu site ao vivo na Internet. Mas antes de fazermos isso, também é importante que você aborde alguns aspectos realmente importantes do desenvolvimento da Web, como a otimização do motor de busca S E O. Então eu vou mostrar a vocês como você pode otimizar seu site HTML, motores de busca completos. E, claro, vamos enfrentar a velocidade também. Não vai importar se você criou o site mais bonito. Se é lento para carregar as pessoas e não vai gostar do site, então você quer garantir que você está chateado cargas o mais rápido possível, e eu vou ensinar-lhe todos os truques que você precisa saber para garantir suas cargas laterais o mais rápido possível possível. Então esta é uma espécie de seção complementar para a seção de previsões, mas no entanto também é uma seção muito, muito, muito importante, então, sem mais delongas, vamos começar. 83. Otimização para motores de busca (SEO): Tudo bem, pessoal, vamos falar sobre o básico de S e o para o nosso site HTML e a maior parte dele vai chegar até nós otimizando para as palavras-chave que estavam tentando segmentar. Então, quando digo curas, quero dizer os tipos de palavras que as pessoas vão digitar no Google. Em outras finanças você nos encontra. Então, somos uma empresa de Web design. Mas vamos supor que estamos em Nova York. Certo, então deveríamos estar pensando, tudo bem, como as pessoas nos achariam no Google? Normalmente, eles podem ir ao Google e digitar algo como, Ah, empresa de Web design em Nova York. Certo, vamos em frente. Agora pressione Enter e vamos dar uma olhada no que temos aqui. Então aqui embaixo, você pode ver que nós temos, Ah, Ah Big Drop, Inc. Temos Max hambúrgueres, temos mídia Blue Fountain. Então vamos imaginar que estamos tentando obter o impacto na Web para ser na primeira página do Google. Como é que vamos fazer isto? Bem, como eu disse , começa com as palavras-chave. Então as palavras-chave estavam tentando otimizar nossa empresa de web design em Nova York, então ele era exatamente o que podemos fazer. Podemos voltar para o nosso índice de HTML e um branco ou você tem sua meta seção. Eu vou ir em frente agora e colar este código e lá está ele, bem ali. Então nós temos metta nome descrição conteúdo e então nós temos metta nome palavras-chave e, em seguida, os números do continente ir em frente e realmente remover este conteúdo porque isso não é o que estamos tentando segmentar. Então vamos começar. Primeiro de tudo com o um estão abaixo das palavras-chave. A chave estava neste caso agora vai ser uma empresa de web design em Nova York, certo? Estas são as palavras-chave que tentavam atingir. Então é exatamente assim que você indicaria as palavras-chave como uma segmentação com seu documento HTML . Agora, a descrição desta será agora fornecer os detalhes sobre quem somos e o que fazemos . E você pode ver a meta descrição para todas essas empresas. Por exemplo, Big Job tem sua não muito de uma descrição é apenas Cesar Web design empresa em Nova York foram ao lado desenvolvimentos grande queda. Certo, mas Max Burns tem uma descrição muito melhor. Eles dizem que no ponto Max Primeiro Relatório abrangente até o design do site, desenvolvendo uma Web serviços de marketing para empresas de vários tamanhos e assim por diante. Então isso aqui é o que chamamos de meta descrição, então é uma ótima maneira de otimizar e classificar ainda mais para a segmentação por palavra-chave. Mas também é uma boa maneira de fornecer mais informações aos potenciais clientes. E você pode ver a outra idéia de nossos links. Tem algo parecido. Nosso amigo azul e dizer que ele é uma agência digital criou despesas que conectam problema. Tudo bem, isso é bom. Volte aqui. Então o que vamos fazer aqui é para a meta descrição. Conteúdo enfraquecer, dizer algo como premiado e agora Web design empresa em Nova York. Está bem. E então nós construímos sites fantásticos na ah Ford Able Prices. E, claro, você pode adicionar um pouco mais, mas normalmente você não quer ir além de 160 caracteres. Isso geralmente é o máximo, então, mas aqui nós adicionamos as palavras-chave novamente Web design empresa em Nova York. Mas também fornecemos mais algumas informações sobre seu obeah e premiado Como sobre empresa de design? E, claro, nós construímos sites fantásticos a preços acessíveis, então essa será a nossa meta descrição. Boy também adicionou. As alas chave eram alvos em que é a empresa de Web design em Nova York. Então esse é tipicamente o primeiro passo. O segundo passo agora vai ser o título real. É óbvio que a etiqueta de título aqui representa o título da nossa página. Agora é uma construção de impacto zweiri. Incríveis pontos positivos. Ok, tudo bem. Mas nós poderíamos otimizar isso adicionando, são palavras-chave estavam aqui também. Então, em vez de dizer que seria construção de impacto é ciência. Se podemos dizer impacto na Web e, em seguida, premiar, na verdade. Mas vamos apenas dizer Web ah, empresa de design em Nova York novamente. Tudo bem, então neste ponto, agora temos nossas palavras-chave em três lugares diferentes. Nós tê-los nas palavras-chave reais meta nós tê-los em uma descrição, mas todos nós agora também tê-los no título de nossa página. Então isso aqui já é um começo muito bom para S C O. Mas a outra questão agora lida com a estrutura fora de nossa página. Google e outros motores de busca, eles adoram estrutura. Querem ver-nos a ter uma etiqueta com duas etiquetas. É com bichas porque isso mostra estrutural. Estas são todas as razões pelas quais o primeiro texto principal que temos em nosso site, que é, naturalmente, o que está aqui, que é o nível do seu negócio. Construa um impactante, sua presença se você notar que usamos H um tags para eles porque eles estão todos bem lá no topo da página. É por isso que usamos o Hum agora. Tecnicamente, poderíamos vir aqui e também tentar adicionar as mesmas palavras-chave novamente. Então, em vez de dizer que aumente o nível do seu negócio, construa uma presença de impacto para a frente , poderíamos simplesmente dizer, World Design Company em Nova York. No entanto, você não quer sobrecarregar sua página com as palavras-chave porque o Google pode realmente penalizá-lo por isso. Então, tenha cuidado. Use suas palavras-chave. Quero dizer, você realmente quer otimizar para eles. Mas não comece. Teoh, o que eu disse é, não os otimize demais. Basicamente, se você tiver sua descrição em suas palavras-chave e, em seguida, seu título, tudo bem. Ok, isso é perfeitamente bom como está. Certo, vamos continuar rolando para baixo. Então, levou sobre as palavras-chave que tomamos sobre a estrutura, que é bom como é, no entanto, uma outra do que poderíamos fazer para otimizar. Nosso documento externo para Seo é algo que realmente já fizemos, e isso vai ser as tags antigas para nossas imagens. Lembra-te, falámos sobre a velha etiqueta. O tipo antigo é muito, muito importante porque ajuda, ah, software usado por pessoas cegas para indicar-lhes o que é a imagem. Então vamos dar uma olhada em algumas das imagens que temos. Nós temos, ah, ah, a escrita da imagem. Por exemplo, para os membros da equipe, você pode ver as tags antigas, uma idéia que você enferrujou equipes de alerta. Imprimir sente basicamente o imposto antigo. Aqui estão os nomes dos membros da equipe, mas mais adiante aqui também. Mas temos clientes. Você pode ver os tanques antigos todos têm descrições, por exemplo, disse que Holmes logotipo ah, crescer logotipo secretário, hiper hiper kit, logotipo verificado, finanças, olhar, logotipo e assim por diante. Então, uma outra maneira de realmente otimizar seu site para um selo será otimizar suas imagens simplesmente fornecendo-lhes todas as tags que o Google adora isso E você realmente quer garantir que todas as imagens do seu lado têm tags antigas? Uma última maneira de otimizar nosso site XML será melhorar a velocidade, garantir que a velocidade é o mais rápido possível e que algo virá de nossa entrevista no próximo vídeo. 84. Otimização de velocidade 1: Então vamos falar sobre a otimização de todos os sites. Velocidade e velocidade é importante, não apenas para o CEO s, porque o Google e outros motores de busca adoram quando seu site carrega muito, muito rapidamente. Mas também é importante para a experiência do usuário. Quando as pessoas visitam seu site, você quer que elas se divirtam. E uma das maneiras como você pode garantir que eles se divirtam é garantir que suas páginas e seu conteúdo sejam carregados o mais rápido possível. Assim, os sites uma das melhores maneiras de otimizar sua velocidade é otimizando as imagens do seu lado . E no lance dele, vou mostrar como você pode otimizar suas imagens HTML. Como o inferno Agora disse, Nós temos muitas imagens. Temos antecedentes. Temos imagens para os membros da nossa equipe. Temos imagens para clientes também, os logotipos e assim por diante. Então, geralmente, quando se trata de otimizar suas imagens, o mais importante é tentar garantir que elas sejam um tamanho pequeno possível. Então não há por que você quer Imagens para ser o menor possível em tamanho é porque quanto menor as imagens em tamanho, mais rápido ele iria carregar uma imagem que é 10 kilobytes de tamanho vai carregar muito, muito mais rápido do que uma imagem que é, digamos, 500 kilobytes de tamanho. Então, a primeira viagem aqui, quando se trata de otimizar suas imagens, é simplesmente usar estacas J o mais rápido possível. Você normalmente tem pings ou J escolhe imagens livres, e ele vai dar uma olhada em todas as pastas que você vê aqui. Observe que o ícone de cinco não está no formato rosa. O logotipo está no formato rosa, entanto, a imagem do herói é um J. Nossos membros da equipe são todos J cavilhas, como você pode ver e, em seguida, fundo todo o design de anime saco J. Pegs, mas e finalmente os clientes, as imagens, os logotipos, se eu em formatos rosa Agora, se você não sabia disso, o formato rosa de uma imagem é tipicamente superior tem melhor qualidade do que o formato Jay Peak. Mas com a melhor qualidade vem um comércio de melhor qualidade significa que a imagem vai ser iniciada à vista. Assim, como tais pings normalmente carregam slaw, então J pegs que eles são de melhor qualidade, mas eles carregam mais devagar. Então, como resultado, disso. Você quer garantir que a maioria das imagens que você usa em seu site R J. Pegs use dores para o seu logotipo para seus cinco ícones e para os tipos de logotipos do seu lado. Porque, como eu disse, nossas dores tendem a ser de melhor qualidade. Então, para sua garota baixa, os logotipos dos clientes, você quer que eles sejam de boa qualidade. É por isso que usamos pings como resultado em vez de estacas J, mas para os fundos para os membros da nossa equipe, não precisamos de imagens para ter essa qualidade de grade. É por isso que usamos J. Pegs como resultado. Então essa vai ser a primeira dica aqui. Escolhas J usadas para a maioria das imagens usadas pings para logótipos e, em seguida, para o ícone de cinco. Agora, com tudo isso sendo dito, uma outra maneira de reduzir o tamanho está fora. Nossas imagens são assegurando que isso significava que não carregamos imagens de grandes dimensões em primeiro lugar. Agora, do que estou falando? Você diz que se olharmos para o MIT a seção de equipe como um exemplo, vamos dar uma olhada em nosso mar ou Sr. Roster Dela Cruz. Eu vou para a direita? Clique aqui e eu vou inspecionar. Ok, veja isso. Então aqui você pode ver que nós temos os links para a imagem. Mas você vê duas dimensões separadas? O 1º 1 é a árvore a cair por 200. Mas, em seguida, em Beckett, temos intrínseco 9 50 por 8 50 Intrínseca indica o tamanho real fora da imagem em nossa pasta que é 9 50 por 8 50 no entanto, estavam realmente exibindo esta imagem em particular em uma dimensão de 22 cheio por 200. O uso da discrepância maciça aqui é carregado uma imagem que é de 9 50 por 8 50 mas apenas exibindo essa imagem na verdade em U 4 por 200. Então, em tal neve, agora, a imagem do Sr. Dela Cruz é grande, porque normalmente você quer o tamanho carregado. O original diz que a imagem é o mais próximo possível das dimensões que vamos usar para exibir a imagem em nosso site. Então você quer garantir, ou se queremos garantir que o tamanho do upload seja tão próximo de 2 a 4 por 200. Mas antes de fazermos isso, não cometa o erro. Eu vou pensar nisso. Oh, as energias de um próximo de vocês estão no maior. Não, até nós usamos a tela diz aqui, hein? Vamos voltar aqui. Vamos percorrer todo o caminho até a exibição de modelo. Certo, vamos continuar. Vamos continuar. Certo, então eu não estou aqui agora. Você pode ver que a imagem agora parece ser um pouco maior, porque agora eles estão em três colunas, vez de quatro colunas. Se eu clicar com o botão direito do mouse e inspecionar o número do aviso, a imagem agora foi exibida em 258 por 231 Ok, vamos continuar minimizando o tamanho da tela e, em seguida, ao redor aqui Aviso. Agora está em duas colunas. Então, se eu voltar e clicar com o botão direito aqui agora, você pode dizer que não foi exibido em 303 por 271 Então vamos continuar e ver se ele fica maior. E não, parece ficar menor à medida que diminuímos o tamanho da tela. Mas por aqui, é aqui que a imagem ou imagens dos membros da nossa equipe são exibidas em suas maiores dimensões em aproximadamente três ou quatro por 272 Então, antes de começar a cortar suas imagens, certifique-se de descobrir o maior dimensões com imagens mais ricas serão exibidas em seu site. Então, isto vai. Agora é cerca de três ou quatro por 272 No entanto, antes de começar a cortar suas imagens, Limoges notificá-lo de que temos telas de alta resolução, e estes são tipicamente os do IOS de computadores Apple, Dispositivos Apple. Então a recomendação é que você realmente recorte suas imagens duas vezes, duas da maior tela que menciona. Então, se nós os temos, a dimensão legis exibida agora é para ser uma queda por 272? Em seguida, devemos par imagens para cerca de 60 esperar por 544 Se a minha matemática está correta apenas para que eles também ficaria bem em dispositivos Apple. Então, quando se trata de cortar suas imagens e mudar decide um Billy tudo depende do que você está usando os valores em um Mac. Eu sei que você tem, como uma ferramenta embutida para isso. Você pode usar esse. Eu estou em um PC, e eu tenho a minha boa e velha pintura. Vou usar a ferramenta de pintura para simplesmente redimensionar. Então eu vou até aqui, Teoh, Teoh, basta clicar na mudança de redimensionamento da porcentagem de dois pixels. Então vamos com 6 10 e por isso seria 6 10 por 5 por 5. Ok, vamos em frente. Agora clique. OK, então o que eu vou simplesmente fazer agora é eu vou salvar a imagem e eu vou enviar a imagem para as equipes são pasta. Tudo bem. Como podem ver agora, aplaudi a nova imagem enferrujada. Chama-se Rusty Dash New, e você pode ver agora que a imagem original do tamanho aqui era 118 kilobytes. Mas como reduzimos dimensões, agora temos o novo tamanho em 62,4 são kilobytes. Então o que eu posso simplesmente fazer aqui é apenas ir em frente agora e excluir a imagem oleada. E, claro, certifique-se de que o nome da sua nova imagem é o mesmo nome usado no arquivo HTML. Então é enferrujado dot jpg. Então, se você deixar para otimizar as imagens restantes para os membros da sua equipe. Por favor, vá em frente e faça isso. Você pode fazer os mesmos quatro clientes. Mas a verdade é que essas imagens já são muito, muito pequenas em tamanho contra elas. Este tem 8,6 kilobytes, uh, apenas 12,5 então eles já são muito, muito pequenos. E não há realmente nenhum ponto em você tentar reduzir o tamanho dessas imagens porque elas já são muito, muito, muito pequenas. Então você pode simplesmente ignorar este. No entanto, um grupo de imagens que talvez precisemos otimizar seriam as imagens de fundo, porque estas são um pouco maiores do que todas as outras que podem ver clientes é que 600 Kilobytes Services estão em fundo de 51 kilobytes e, em seguida, um para a equipe é um 328 kilobytes. Agora, em vez de reduzirmos as dimensões, o que podemos fazer, podemos tentar comprimir as imagens, e para isso, podemos fazer uso desta ferramenta chamada Imagem, Comprimir It Desligado. Cometas realmente chamado Optimize Illah. Então você vai para a calma compressível de imagem e aqui você verá o botão verde para carregar arquivos. Vou em frente agora, fazer o upload dos arquivos. Vamos ver seus antecedentes e vamos fazer upload dos três. Vamos enviá-los. O primeiro em carregou segundo, e depois o terceiro 1 carregou ou K. Então aqui você pode agora começar a ver os possíveis resultados, aqueles para os clientes. Como exemplo, Não há nenhuma era 601 kilobytes, mas e se nós comprimê-los, ele agora forçado a 468 kilobytes agora porque a qualidade dessas imagens não são tão importantes, o que podemos fazer é certo Por aqui. Com a qualidade, podemos reduzir ainda mais a qualidade, e reduzindo a qualidade, também somos capazes de reduzir ainda mais o tamanho da imagem. Por isso, reduzimos para 88. Vamos ver o que vai acontecer. Na verdade, vamos continuar. Por algum motivo, está demorando um pouco mais, forçado a ver os novos resultados para a imagem compactada com qualidade de 88%. Muito bem, já passaram mais de cinco minutos, e ainda estou preso nesta página, e parece ser algum tipo de inseto. Eu não sei por que isso está acontecendo, mas cada vez que eu tento reduzir a qualidade da imagem, você simplesmente tem essa roda giratória e nada aconteceu. Então talvez quando você tentar o seu, você pode ser bem sucedido. Talvez eles possam ter corrigido o problema. Talvez eu esteja fazendo algo errado, eu não sei. Mas mesmo assim, mesmo com isso, ainda conseguimos otimizar as imagens. Você pode ver que os clientes foram usados em tamanho entre 2% fontes por 24% e equipe por um mísero 1%. Mas acho que a equipe nossas imagens de Baghlan já otimizam. É por isso. Então eu posso simplesmente ir em frente. Agora clique em baixar tudo e isso vai me fornecer com uma pasta Zip. Eu consentimento é uma pasta e, em seguida, simplesmente descompactar a pasta no meu computador e, em seguida, simplesmente substituir as imagens compactadas são com os já são. No HTML que eu vou arquivado, modo que tem sido muito como otimizar suas imagens novamente. Estacas J usadas sempre que possível. Use apenas pings para seu logotipo e seu ícone de cinco. Tente Teoh. Reduza o tamanho de suas imagens sem esperança para combinar com tudo não coincidir com Bobby. Duas vezes fora das dimensões mais leves são com as quais eles serão exibidos em seu site . E então, é claro, você também pode usar o compressor de imagem que vem para comprimir suas maiores imagens. Então é isso para a velocidade otimizando você de cabeça para velocidade. Uma parte de bateria muito bem otimizará nosso cabo. 85. Otimização de velocidade parte 2: Bem-vinda de volta. Espero que você esteja curtindo nossas aventuras de otimização do site e o que eu vou mostrar a seguir é como você pode otimizar seu código CSS. E assim como com imagens, também podemos comprimir nosso código CSS, e podemos usar uma ferramenta chamada CSS. Muitos arquivaram calma. Então o que isso faz é que você simplesmente fornece o código de suas cidades, você executá-lo através do mecanismo e você terá uma versão otimizada do seu código CSS Agora, a coisa aqui, porém, é que você normalmente quer fazer isso quando você está pronto para lançar seu site porque não vai fazer nenhum sentido para você otimizar seu código CSS. E então você começa a adicionar um pouco de frio extra mais tarde. Não, você quer otimizar o produto final. Mas você também quer esperar até que você esteja prestes a lançar quando estiver pronto para lançar, porque a saída que vamos obter não vai ser fácil de ler. Então o que vou fazer aqui é dar um exemplo a vocês. Vou em frente e simplesmente pegar alguns não todos, mas alguns dos códigos que temos. Então, vamos. Mas Teoh Main que CSS e eu vou pegar bem aqui do número um. Vamos até o 133. Eu era um número muito aleatório. Vamos em frente e copiar isso. Vamos voltar para o nosso Mas eu estava Ah, eu vou ir em frente agora, colar isso. E agora verifica isto. Acho que vou clicar nos homens se eu e lá vamos você. Então agora, esta é a versão compactada desligada ou nós temos aqui e vocês podem ver agora que isso é muito menor em tamanho, mas as ordens que ele chamou agora são praticamente ilegíveis. Isto vai ser muito, muito difícil para nós lermos. Mas essa é a troca se você estiver indo para comprimir seu código CSS para que ele carregue mais rápido e seus absolutos mais rápidos. O comércio fora aqui é que o código CSS vai ser mais difícil de realmente, Porque por que novamente? Você só quer fazer isso, quer todos prontos para lançar seu site. Então não vou notificar o tribunal porque ainda não estamos prontos para lançar nosso site. Mas eu só queria te mostrar isso. Então isso é no futuro. Se você queria lançar seus clientes de cabeça ou seu site um pouco antes de fazer isso você pode otimizar a velocidade usando a ferramenta CSS muitos fogo. Então é isso. Obrigado. Tanta fortuna. Vemo-nos na próxima aula. 86. Criando nossos favos: Tudo bem, então estamos quase perto de uma cadeia longa de todo o site na Internet. Mas antes de fazermos isso, vamos rapidamente tomar cerca de cinco ícones. E se você não sabe o que se eu tiver Ícone é basicamente o que você pode ver nas guias do seu navegador. Então, aqui, aberto. Você pode ver que este é o ícone de cinco para o nosso site. Tenho outros sites que abri. Nós temos Amazon. Você pode ver o sinal A e o amarelo estão bem ali. Você tem Marte. Se você não conhece Mars, eles são especialistas em S e o. Certifique-se de verificar o site, mas você pode ver o seu próprio. Perricone é um M com um fundo azul. Você também tem um laboratório cibernético sobre o escudo preto e verde. E não é muito importante que você tenha feito isso. Se eu tenho, eu posso. Mas é bom ter. Mostra profissionalismo. Também mostra classe agora. Nós já temos um ícone de cinco, mas eu não mostrei como você pode realmente criar o seu. Existem várias ferramentas na Internet que você pode usar. Um dos meus favoritos vai ser o ícone Rial cinco gerar todos os pontos Net. Então o que acontece aqui, basicamente, é que quando você vai aqui, você cívica pode selecionar seu tecido na imagem e simplesmente escolher a imagem que deseja usar. Agora eles recomendam que você vá com uma imagem que é cerca de 60 por 60. Havia pelo menos um dos 70 por 70. Observe que eles são quadrados, as dimensões são quadradas. Então, por favor, qualquer tecido quando você quiser usar, certifique-se de que as imagens em um formato quadrado. Então eu vou, eu vou apenas ir em frente e usar o logotipo que eu tenho e vamos em frente para baixo e enviá-lo. Agora, se a sua imagem não é de 60 por 60 você vai para esta mensagem dizendo que Ei, você sabe, nós somos o comando para ter sucesso até 60. Vou continuar ignorando isso e continuar com essa foto. Tudo bem, então aqui você pode começar a ver os resultados como eu posso olhar como em diferentes ferramentas e nos diz que qualquer um pode ver. Isto é para o próximo e Google, parece bem se você rolar para baixo aqui, é assim que ele vai olhar como no IOS você tem o saco de sangue deschamado lá com o ícone. Isso está tudo bem. Você tem um para os comas apreciados. Bem, você tem um para o Windows Metro neste caso agora. Eu não gosto deste fundo porque eu acho que é tipo de sobreposição com a cor clara para que possamos ir com, digamos, azul mais escuro como um exemplo. Então agora você pode ver que agora as aparências são muito melhores. Então isso continua caindo. E, ah, sim, então realmente, isso é tudo que você precisa fazer neste momento. Neste momento, você terá o passo final onde você terá que escolher onde deseja exibi-los . Você gostaria de ter os cinco ícones localizados neste cara agora você tem a opção de dizer que Abu joga arquivos americanos na madeira do meu site. É recomendado, mas eu não recomendo que você realmente faça isso, porque o que isso significa é que você vai ter que ter seus cinco ícones dentro desta pasta particular em desdobramento exato estão segurando seu índice de HTML, E eu preferiria que o meu tecido aparecesse numa pasta chamada Cinco Ícones dentro da pasta de ativos , se eles, exceto então aqui está exatamente o que vamos fazer. Ok, eu vou voltar aqui, e eu vou dizer que eu não quero colocá-lo na raiz da minha pasta. Em vez disso, eu vou colocá-lo nos ativos, e, em seguida, os cinco Aikens são dobrar para cima. Deixe-me apenas confirmar que estou derramando ativos corretamente porque estou derramando tablets, então está tudo bem. Eu sabia que algo estava errado quando vi isso. Certo, esse não é o espírito dos bens, certo? Ativos A s s E t s ok. Tenho que me lembrar disso. Então vamos fazer agora é colocar os cinco ícones dentro deste diretório terá ativos e, em seguida, cinco ícones. Tudo bem, então vamos em frente. Agora. Clique na malha do gerador possui e código HTML. E, hum, é isso. Enquanto isso, eu vou voltar aqui agora mesmo em vez da nossa pasta de ativos. Vou em frente agora e criar uma nova pasta. Um, icônico foi chamado. Os cinco ícones se dobram. Certo, então vamos voltar. Teoh conta para baixo. Então, aqui mesmo. Diz para baixo com o teu pacote, está bem? E então, dentro desse código na seção de cabeça das suas páginas, vou em frente agora e pegar esse tribunal antes de tudo, então vamos pegar essa cópia de volta para o Sr. Brackets. Então vamos como se eu fosse em frente. E agora movemos o tecido original em que tínhamos o link todos nós movemos este, vamos criar algum espaço. E agora vou em frente e colar todo esse código. Permitam-me assegurar que todos estes links são abas corretamente. Lá vai você. E OK, então, credores, removam esses espaços vazios. Remova o último espaço vazio aqui também. Ok, isso é bom. Agora salve a cabeça para trás. Teoh explode. Então agora eu vou simplesmente ir em frente e baixar o pacote de £5. Tudo bem. Então, como você pode ver, eu baixei o pacote. Vamos para as minhas pastas. E está agora dentro das pastas de cinco ícones que você pode ver este é o arquivo zip. Então o que precisamos fazer agora é simplesmente extrair. Vou em frente agora e extrair todos os arquivos. E agora você vai encontrar outra pasta com os cinco reais um concerto depois de ir aqui e então nos movemos novamente. Vou cortar tudo isso e depois garantir que eles estão dentro da pasta de cinco contas . Então eu vou em frente agora, pagá-los aqui. Vamos remover o arquivo zip e também a pasta do pacote. Então é isso. Portanto, certifique-se de que se você está fazendo o seu semelhante certifique-se de que os cinco julgamentos em si estão dentro diretamente dentro de fora. Seus cinco ícones são pastas. Então nos disseram que tudo deve andar corretamente. Mas se eu voltar ao meu navegador agora e atualizar esta página, você notaria que não vemos mais o ícone cinco. Não sei por que isso não acontece localmente, mas já testei isso. Não sei por que isso não acontece localmente, E eu sei que se lançarmos nosso site ao vivo na Internet, você verá o ícone cinco e, de fato, deixe-me fazer isso rapidamente. Vou abrir um dos meus sites de amostra e você pode dizer que este é exatamente o mesmo código que temos. Mas observe que esta é uma tarefa real do site ao vivo uma chave vir e Por que você pode ver Temos agora. Os cinco estão aparecendo e eu usei exatamente a mesma cor que temos aqui. Então há algo que eu não sei o que é exatamente. Mas quando vamos em frente para lançar o nosso site ao vivo na Internet são os cinco ícone vai aqui para que, se um cinco ícones espero que você tenha gostado de vídeo, Eu vou vê-lo na próxima aula. 87. Validação de marcação de HTML: já realmente quase pronto para agora finalmente lançar o nosso site. Mas antes de o fazermos, é importante verificar se todo o nosso código foi verificado e também foi otimizado. Agora já falamos sobre o unificador CSS anteriormente. Não se esqueça de fazer isso pouco antes de você estar pronto para lançar para você vindo aqui imputar todo o seu CSS recebendo saída unificada e, em seguida, copiado na saída de efeito sobre o seu estilo que diz este arquivo. Não se esqueça de fazer isso. Se você quiser otimizar a velocidade do seu lado, não é obrigatório. Não é necessário. Mas ajuda a aumentar a velocidade fora do seu site. Vou fechar isso, mas isso é para o CSS. Agora, para o documento HTML que temos, há outro serviço chamado Validar tudo. E basicamente o que isso faz é que ele verifica são arquivo html para garantir que não havia cotovelos, não há links quebrados. E é apenas uma ferramenta muito, muito boa para usar antes de lançar seu site. Vida na Internet. Então aqui estão as várias maneiras como você pode verificar. O que vamos fazer é ir validar por upload de arquivos. Eu vou clicar lá, e então eu vou escolher o nosso índice dot html final. Vamos em frente. Abra isso e ah, vamos clicar em verificar e ver o que temos e Oh, bem, nós realmente temos três setas. Uau. Ok, eu não esperava isso, para ser honesto com você, ok, vamos ver. Então temos uma válvula ruim para atributos. Tempo online 491. Ok, vamos para o nosso arquivo html index dot e vamos ver, então ele permanece na linha. 491 e é a ferida para baixo. Ah, onde está? Ok, então aqui, linha 491 olhos. Então, qual é o problema ? Deixe-me voltar aqui. Diz que é mau villa para o real, mas tipo em imputação elemento. Ok, vamos ver. Ah, ok. Eu vejo qual é o problema. Ouvi dizer que não especificamos o tipo de campo que o título deveria ser. Então, neste caso, agora vai ser só um texto. OK, texto. Vamos voltar para dentro dele e ver o que mais eram os outros dois. Então o número dois também está mentindo para 91 Diz-se que o espaço reservado só é permitido um tipo de MP é o número de e-mail. Senha. Ok, ok, porque nós especificamos tipo para ser texto. Isto devia estar a tomar cuidado. E finalmente, registro só é permitido quando? Está bem. Está bem. Então o único problema que tivemos aqui foi porque nos esquecemos de especificar o tipo de campo que este deveria ser. E como resultado, esse foi o primeiro Aargh. E em segundo lugar, você não pode adicionar coisas como necessárias para qualquer tipo de, ah campo que não tem um tipo. É por isso que tínhamos as mensagens do diabo. E você também pode adicionar um lugar mais antigo para qualquer sensação que não tenha um tipo especificado. Então Maley especificando que este campo aqui é um campo de texto. Acho que devemos ficar bem. Então vá em frente. Agora salve este arquivo. Vamos voltar aqui. Eu vou voltar e escolher o mesmo caiu de novo porque esta é a mesma versão . Vamos abrir isso e verificar. Então Ok, não vai ver agora, nós não temos mais nenhum nível em também, e é em HTML. Documento está pronto para ir, e estamos prontos para carregar todos os arquivos para a Internet. Então evento alemão. Próximo vídeo. Bem, vamos agora ir em frente por Ah, nome de domínio, obter hospedagem e finalmente lançar nosso site. Vida na Internet. Vejo-te então. 88. Lançando nosso site ao vivo: Certo, então estamos prontos para lançar toda a vida do site na Internet. Mas precisamos fazer coisas. Precisamos de um nome de domínio, e também precisamos de alguma hospedagem. Agora, há várias empresas de hospedagem lá fora, e uma das minhas favoritas é o lado do chão. Eu tenho sido anfitrião com eles por muitos, muitos anos agora, e eles são, na minha humilde opinião, um dos melhores nossos cavalos e empresas do mundo. Se você quiser Em sua alternativa, eu também uso maneiras de nuvem que homens diferença aqui é que Cloud Way é especializada em hospedagem em nuvem . Então, a hospedagem aqui é muito mais rápida, mas também é um pouco mais cara agora. terreno lateral também oferece hospedagem em nuvem, mas sua hospedagem em nuvem é um pouco mais cara do que as formas de nuvem. Certo, então uma razão para um comentário externo. Primeiro de tudo, que você começa com armas laterais porque, além de ter em nossa hospedagem em nuvem, eles têm o tipo regular de hospedagem, que seria a hospedagem compartilhada. Então deixe-me mostrar um exemplo do que estou falando aqui. Eles têm pacotes diferentes. Eles têm esse tipo de postagem crescer grande e depois virar nerd. Portanto, a principal diferença entre esses três, claro, é a quantidade fora da funcionalidade que está sendo oferecida. Iniciar, por exemplo, oferece que você só quer único site crescer grande oferece site ilimitado, então não é ir show. Mas então a grande diferença entre ir grande e ir buscar é que voltar. Claro que oferece. Você é mais espaço. Ele pode lidar com 100.000 visitas por mês, enquanto Grbic lidar profano 25.000. Então, a coisa é, se todos vocês almoçarem em um site real recomendarem lá. Você quer ir com o pacote de inicialização ou crescer grande. Agora, à medida que seu site começa a ganhar mais tráfego e você sente a necessidade de atualizar seus pacotes , você sempre pode ir até o show. Ou, se preferir, pode acabar por mudar de pistola lateral e passar para formas de nuvem para hospedagem na nuvem. Não se preocupe, você sempre pode arcanjo essas ofertas e pacotes mais tarde, mas embora venha, claro, começou lado terra e ir com o pacote de inicialização ou o ir grande. Agora, antes de irmos com o anfitrião e precisamos comprar um nome de domínio. Agora, para fazer isso, vou para os serviços de novo. Mas agora vou mudar para domínios e vou clicar no domínio de registro . Então lá você tem basicamente as extensões de domínio. Você tem os EUA EUA a calma. Não urtiga auto biz. Idealmente, você quer ir com a calma. A calma é de longe a melhor. Porque quando as pessoas ouvem o nome do seu site, o automaticamente como eles, vai acabar em comunicação. Nunca vai izumi Oh, ele deve terminar em ponto net ou o AWG? - Não. As únicas outras vezes em que você pode não querer usar o com é se, digamos que você está construindo um site para a escola, por exemplo, então ponto e d. Você pode ser muito mais apropriado o ogle antes, como organizações e assim por diante. Mas na maioria das vezes, 90% das vezes você quer ir com ponto com. Então, aqui mesmo, você tem a opção de digitar e seção para ver se o nome de domínio que deseja que exista. Então, neste caso agora, o nome do nosso negócio é impacto na web. Então eu vou digitar impacto na Web, e eu vou escolher ponto com e ah, vamos ver se isso existe. Eu vou ficar muito, muito chocado se é uma preocupação agora que ele não está disponível para registro. Então eu vou apenas ir em frente e mudar o SI dois K e vamos dizer que eu vou ir em frente agora e tal e espero que um estará disponível e ele também não está disponível. Então, quando eu estou indo simplesmente fazer agora é, eu vou apenas ir em frente e adicionar um C então agora é ponto com impacto. Vamos em frente e procurar por isso, e isso está disponível para entender. Agora a coisa é, este não é um bom site, então eu realmente não me importo com o nome de domínio real em si. Mas se você está construindo petróleo lançando um site real, por favor, passe algum tempo para chegar a um nome de domínio que irá corresponder ao que você está tentando oferecer e também são fazer sentido. Não entre para começar a digitar em palavras aleatórias e ah, apenas para que você possa obter um nome de domínio, certifique-se de que seu nome de domínio faz sentido e também, de certa forma, está relacionado. Qual site é sobre? Então eu faço é agora. Vou em frente agora e selecionar impacto na Web ou em casa. Tudo bem, então aqui. Eu vou em frente. Agora, clique em, adicione. Então é adicionado agora, aqui em baixo. Muito também depende da empresa de hospedagem de ir com isso pode oferecer-lhe serviços adicionais . Alguns podem não. Então, no caso, fora do lado indo agora, eles oferecem hospedagem adicional a oferta de privacidade do domínio. Então, se esta é a primeira vez que você está indo com Saigon, eu posso recomendar que você clique em adicionar para que você possa ir com o pacote de hospedagem de domínio Web aqui para que você possa clicar em adicionar, e você pode então escolher qual plano você deseja ir com. Mas eu já tenho um plano de hospedagem com terreno lateral, então eu não preciso disso. Então, tudo o que vou fazer agora é vir aqui e simplesmente pagar pelo nome do domínio . Agora, uma coisa que eu devo mencionar é que quando você se vincular o nome de domínio e hospedagem, você terá que fazer alguma verificação. Então você terá que fornecer a si mesmo. Você fornece-lhes o número de telefone com o qual eles podem ligar para você ou enviar uma mensagem de texto. Então esse é o primeiro de uma verificação. O segundo passo como que eles vão realizar um pequeno nossas transações bancárias ou cobrar um cartão com uma certa quantia fora do dinheiro. Então você terá que ir à sua conta bancária e verificar. Diga a eles quanto eles realmente cobraram e então Ardell verifique sua identidade. É importante por razões de segurança, obviamente, para que possa ver. Agora eu verifiquei minhas identidades, e agora eu posso ir para a página inicial e a próxima coisa será configurar um site. Agora vamos em frente e fechar. Nuvem pesa. Então, como eu disse, você precisa de nome de domínio e ele também precisa de hospedagem. E eu disse, Alia, que eu não iria para a hospedagem porque já tenho uma conta de hospedagem com o lado do chão. Mas deixe-me mostrar-lhe como você pode aproveitar o novo julgamento mês de guerra que Saigon oferece são meus alunos para que você possa ir até aqui para clicar em conjunto lados ou você também pode apenas ir para os nossos serviços. Você pode vir aos serviços e então você verá o Holsten Link grátis. Você pode clicar lá, então eu vou seguir o plano de inicialização. Vou clicar em um plano liso. E agora isso seria importante. Certifique-se de escolher o data center mais próximo do seu próprio local físico. Então, se você está na Ásia, você quer ir com Cingapura. Se o seu novo, se você pode ir com a Alemanha ou Holanda e assim um, eu vou com a Ásia Cingapura, eu vou clicar em confirmar, e eu vou clicar em ordem agora e ah, tudo bem. Então vamos ver o que vai acontecer. Acho que vou receber um e-mail confirmando o processamento do pacote Holsten. Então vamos esperar mais alguns segundos. Normalmente, não leva muito tempo para que o pedido termine o processo. E talvez tenha. Tudo bem, eu vou ter que pausar o vídeo e sempre, hum, o vídeo quer que a ordem tenha terminado. Tudo bem, então levou cerca de dois minutos para todo o processo terminar. Mas agora você pode ver que você está pronto. Então eu vou clicar no site de configuração. Tudo bem, então eu me importo que você possa ver, César. Novo domínio. Domínio existente. Domínio temporário. Agora, já temos um domínio que acabamos de comprar. Então eu vou clicar no domínio existente e eu vou entrar aqui e ir com Web impacto em casa. Vou clicar em Continuar e pronto. Tudo bem. Então o que eu vou fazer, eu ouço é que eu vou simplesmente clicar em Ignorar e criar oito sites vazios que é clique lá dentro . E esses são serviços extras que você pode ir para. Eles não são necessários. Então eu só cozinho no final. Basicamente, isso significa que Sarah Gone está criando os arquivos necessários para que o domínio exista, ele está criando os bancos de dados também. Então o que eu vou fazer agora é pausar o vídeo mais uma vez e retomar os desejos. Este processo terminou, tudo bem. Diz que você pode ver agora ele diz que você está tudo pronto quando eu clicar em ir para o site bem aqui. E basicamente, isso é o que você veria. Você diz algo como, há apenas dizendo que Ei, há um site incrível chegando a este nome de domínio particular e iria em frente e fechar isso e eu vou passar por cima para gerenciar o site agora. Então o próximo passo que temos que passar é fazer upload dos arquivos que temos em nossa pasta para o site. Estou falando sobre o índice do HTML, os cinco ícones, todas as imagens que precisamos para enviar todos esses arquivos para todo o site. Então aqui, isso é basicamente o back-end para o chão lateral. E deixe-me apenas enfatizar que cada empresa de hospedagem que você vai com, na verdade, maioria deles, eles terão algo muito parecido com isso. Então, mesmo se você não estiver indo com o terreno lateral, ele ainda será semelhante ao que você pode encontrar com sua própria empresa de hospedagem na Web. Então o que você quer fazer é procurar por uma função específica chamada gerenciador de arquivos . Tenho a certeza que o encontrarás nas tuas costas e a minha está aqui. Então eu vou clicar no gerenciador de arquivos, e é este monitor de arquivos que nos permitirá carregar nossos arquivos em nosso site. Agora, observe que quando expandir seu para a direita aqui, você verá esta pasta chamada nossa pasta xml ponto público Está dentro desta pasta onde devemos adicionar todos os nossos arquivos. Então, por favor, faça sempre isso. Certifique-se sempre de que as faltas que compõem o seu site estão dentro do público na pasta html escola . Então aqui, o p a. Você pode ver que eu tenho a opção desligada, carregue um arquivo ou carregando uma dobra para cima. Então vamos apenas ir em frente e fazer o upload do índice no arquivo HTML. Primeiro de tudo, então vamos em frente, carregue esse. E em seguida, eu vou agora para pasta e carregar os ativos, dobrar com todas as imagens. Então diz que isso vai adiar alguns bens. Sim, vá em frente e carregue isso. Não é um problema. Então, todas as imagens foram baixas. Foram aplaudidos logotipos, as imagens de membros da equipe ah, os cinco calos I e velho, claro, o arquivo CSS tem conta. Esquecemo-nos disso. Ok, então isso é praticamente um bom Todos os 37 arquivos foram carregados com sucesso. E agora o momento da verdade. Se eu ir em frente agora e visitar os sites, vamos apenas ir em frente e ir para cada pétala calma. Aí está, está carregado agora. Lá está ele. Agora temos impacto na Web ou pente ao vivo e direto nas Internets, e lá está. Então é exatamente assim que você pode carregar seus arquivos para o seu servidor Web. Apenas alguns pontos, como se você tivesse muitos arquivos, e você preferiria não carregá-los um por um. O que você pode fazer é simplesmente adul deles para um único arquivo zip, carregar esse arquivo zip e depois extrair o arquivo ZIP. No meu caso, neste momento, há um botão de extração. É o único aqui para que você possa extrair esses arquivos. Mas certifique-se de que seus arquivos estão no diretório raiz do fazer. Ok, certifique-se que eles dentro diretamente do seu público na pasta html da escola. Se eles estiverem em outra pasta, você pode ter um ou dois problemas com isso. Então, por último, mas não menos importante, eu encorajaria você a ter quaisquer problemas tentando fazer upload de seus arquivos ou algo não está funcionando corretamente. Vou recomendá-lo antes de tudo, entre em contato com sua empresa de hospedagem na Web. Se eles são uma boa empresa, eles devem ser capazes de ajudá-lo. E uma vez que é o seu próprio sistema. Eles estarão em um muito, muito bom conselho presidencial você sobre a melhor forma de fazer upload de seus arquivos. Mas é isso. Nós adicionamos nosso site com sucesso. Vida na Internet Pense é muita fortuna. Vemo-nos na próxima aula. 89. Gerenciando scripts: já, parabéns foram lançados com sucesso nosso site Life na Internet. Mas agora que ele está na Internet, você pode começar a notar é uma ou duas questões, particularmente no que diz respeito à velocidade fora do seu site para ver agora, Se eu desejo atualizar minha página, note que ele vai começar a tomar um pouco mais do que o habitual, especialmente quando você começa a adicionar código adicional e talvez você seja pego do Google ou de outro serviço lá fora para adicionar algo à sua cabeça do arquivo PHP. Coisas assim, você pode começar a notar seu lado ascendente diminuindo um pouco. Uma maneira de garantir que seu site é o mais rápido possível é gerenciar seus scripts e do que estou falando? Se eu voltar para nossas ferramentas laterais e abrir o arquivo de índice de excrementos, notem que aqui estamos chamando um script da frente. Incrível. É divertido, incrível, responsável por exibir todos esses ícones em nosso pago. Lembre-se, entanto, este cooperador está em nossa cabeça está na seção de cabeça no site uma maneira como podemos melhorar ainda mais a velocidade de nossos sites é mover scripts como este para a seção FOTA. Então o que você quer fazer é pegar esse roteiro e então eu vou em frente agora e cortar isso. Eu vou vir até aqui e logo após o pé uma seção eu não vou pisar a luz do roteiro lá. Posso ir em frente agora e salvar isso. E, claro, se eu voltar para as minhas contas, estamos primeiro na página e Ah, lá vai você. Então, basicamente, o ponto aqui é que sempre que você tem scripts, menos que seja explicitamente afirmado que esses scripts devem estar na seção principal do seu site, você normalmente quer movê-los para baixo para o rodapé porque agora, ordem. Antes, quando os scripts estavam na seção head vai acontecer é que o navegador começa a partir do topo do seu arquivo e vai todo o caminho para baixo. Então, neste caso, agora mesmo, antes que o Boza comece a exibir o logotipo, o conteúdo da sua página, ele irá atender ao script, antes de tudo, e terá que executar seu script. Os pulos executivos levam mais tempo do que a execução de conteúdo normal. Então, ao invés de ter quem visita seu site esperando o irmão para executar o script , o presidente pode pelo menos ver o conteúdo de sua página e depois para baixo. Finalmente, uma vez que os golpes A entrou no pé da seção, ele pode então executar o script para exibir esses ícones. Esses ícones aqui não são tão importantes quanto o conteúdo real fora da página. Então, mais uma vez, a menos que explicitamente declarado, eu sempre adiciono seus scripts na seção de rodapé do seu site. Então é isso. Muito obrigado por assistir. E claro que te verei na próxima aula. 90. Você fez o seu: Então é isso. Chegamos ao fim desta seção. Nós construímos um verdadeiro murado, interativo, site responsivo com HTML cinco e CSS três e da parte inferior do meu tinha cal. Não diga muito obrigado por chegar até aqui, e espero que tenha aprendido em dois ao longo da jornada. Agora, se você amou o curso até agora, eu encorajaria você a deixar um comentário para o curso, por favor, porque comentários realmente me ajudam muito. E eu realmente apreciaria uma crítica por escrito sua. Agora, se você estiver interessado, eu tenho mais conteúdo. Eu tenho a outras seções onde eu mostrar-lhe os conceitos básicos de que design e também o negócio de pesquisa PHP interessado? Certifique-se de verificar esses dois são seções bônus. Caso contrário, se você está satisfeito com o que você aprendeu até agora, membro apenas diga muito obrigado Mais uma vez e Linda deseja tudo de melhor em seu exame. Um cinco e CSS, onde os projetos pensam que é muito e também da próxima vez bye bye 91. Pré-visualização de seção de web: bem-vindo a esta seção de bônus muito especial onde vamos abordar Web design, e é uma coisa a saber, HTML e CSS diz. Mas é outro bem diferente ser capaz de projetá-lo. Sítio Web. Basicamente, pense nos tipos de colágeno que vai usar os tipos de imagens que você vai usar, como você vai para o espaço, soar o conteúdo, como você vai projetar as estruturas, coisas assim. Então requer algum treinamento para poder fazer coisas assim. Bem projetado e desenvolvimento Web são realmente duas coisas diferentes. Pensa em Chateado como uma casa, certo? Imagine que uma casa era um site. O arquiteto é a pessoa que projetou a casa. Nesse caso, o arquiteto é o Web designer. O desenvolvedor do mundo é o pedreiro real que passa a começar a colocar os Briggs e fazer todo o edifício em si. Então essa é a diferença. Então, muitas pessoas são desenvolvedores da Web, mas não são Web designers, que significa que mesmo que eles possam construir um site, eles precisam de outra pessoa para projetar para perturbar primeiro e então eles vão olhar para o design e , em seguida, construí-lo para fora. Então o que eu quero fazer aqui é mostrar a vocês como você também pode tirar a bola do Web designer e vir com idéias para projetar um site e, eventualmente, construí-lo. Deixe-me tornar o desejo abundantemente claro, eu sou mais um desenvolvedor Web do que um Web designer. Então esta seção não é uma seção avançada por qualquer trecho da imaginação. Isso é apenas básico puro de Web design. Se você é muito mais se estiver mais interessado em aprender sobre Web design, existem outros cursos que você pode fazer? Esta seção é tudo sobre o básico, apenas ensinando você o suficiente para ser capaz de chegar a bons projetos para seus sites, Então eu espero que você encontrar uma seção de vários completo Vamos começar. 92. Estrutura de sites: Vamos dar as boas vindas ao Teoh. Esta nova seção, onde estamos falando de Web design e o primeiro e eu gosto de falar vai ser a estrutura geral do seu site. E vamos começar falando sobre a cabeça para fora. Agora, o cabeçalho do normalmente contém o logotipo, bem como o menu de navegação principal, e a maioria dos sites tem esta fórmula particular onde você teria o logotipo à esquerda e, em seguida, o menu principal à direita. Como você pode ver aqui na Web impacto ou vir, laboratório cibernético tem uma estrutura muito semelhante. Moss tem algo semelhante, exceto que, além de ter o logotipo à esquerda, você também tem este pequeno mini-menu que próximo logotipo. Mas, em seguida, na luz você agora tem como o menu de navegação principal. Agora há fora qual mais, que tem algo semelhante. Escritor, você tem o logotipo à esquerda. Você tem o menu principal ao lado do logotipo. Mas então, aqui na luz, você tem muitos, muitos onde você pode fazer login ou experimentar seu produto para caixa livre que vêm tem algo semelhante. Mas você tem o local à esquerda, o menu principal bem ali no centro, mas depois outro muitos, muitos dias brancos para a luz. Então, realmente se resume ao tipo de site que vocês estão construindo. Mas na maioria dos casos você terá o logotipo branco lá à esquerda. E se você precisa ter mais de um menu em seu cabeçalho, você pode ir com ter são o primeiro menu direito próximo logotipo e, em seguida, o segundo ali à direita, como o que você tem aqui em Marte e fora qual, Além disso, Ou você pode decidir ter o logotipo à esquerda, os homens muitos à direita no centro e, em seguida, o segundo menu à direita. Normalmente é assim que você quer ir. No entanto, existem outros casos em que você pode ter uma cabeça diferente de design onde você teria o logotipo bem ali no meio da parte superior e, em seguida, o menu principal sobre a necessidade. O logótipo. Agora esse tipo de design é perfeito. Restaurantes completos, cinemas, massagens. spas de Paolo basicamente servem sobre sites ienes Ted, se isso faz sentido mas contra agora, isso faz todo o sentido porque entre o menu principal e o logotipo, você tem, como o telefone número. O que, claro, faz todo o sentido porque este é um restaurante onde as pessoas podem querer chamar pode ser a evasão do Booker. Talvez pedir comida para entregar coisas assim. E, claro, eles também têm seus horários de abertura quando eles são abertos, quando suas roupas que, claro, faz todo o sentido para esses tipos fora do site. Então, novamente, tudo depende do tipo de perturbação do seu prédio. Se o veículo de construção até um Web sites para empresas, então você quer ir com o logotipo no menu principal esquerdo na luz ou, se você está construindo para restaurantes. São tais Pollos Parsons como que você poderia ir com Haven não logo abaixo do centro e , em seguida, o menu principal abaixo do logotipo. Vamos dar uma olhada em dois sites que não seguem esses conceitos de design, e o 1º 1 aqui vai ser Neil Patel dot com. Agora, mesmo que ele tenha seu logotipo no Hedda, ele não tem seu menu no cabeçalho. Na verdade, está no rodapé, mas aqui embaixo como você pode ver, mas não há por que esse design funciona bem. É porque fora do tipo fora da página site este é, isso é uma espécie de caixa do Google onde você entra aqui, você toca em qualquer domínio que você quer competir contra, e então você clica em Pesquisar e então ele mostra como você não pode classificar esse domínio e Google e outros motores de busca. Então o ponto aqui é que as pessoas não estão realmente interessadas em navegar pelo site . Eles só querem entrar aqui tocando no nome de domínio e depois ver como eles podem derrotar esse domínio. É como o Google. Quando você acessa o Google, você não está procurando navegar por aí. Você só quer procurar algumas palavras-chave e, em seguida, descobrir mais informações sobre essa chave específica. Qual é o nosso tópico? Então, novamente, tudo se resume ao tipo de site que você está projetando, e às vezes você pode precisar do menu. Às vezes você pode não precisar de muitos. Então, o flexível e, finalmente, vamos dar uma olhada no TechCrunch Doc com. Aqui eles têm o logotipo à esquerda, mas então eles têm seu próprio menu diretamente abaixo do logotipo à esquerda também. Esta é uma dívida de design que você provavelmente não verá muitas vezes. E não é o melhor. Na minha humilde opinião, quero dizer, quero dizer, todos TechCrunch, eu acho que eles li alguns artigos muito, muito bons no site às vezes, mas pessoalmente, eu não sou um fã deste tipo de projetado. Por que não ter apenas o seu logotipo à esquerda, direita, e então ter o seu menu principal bem aqui na cabeça também. Mas para a luz, eu acredito que isso vai parecer muito melhor do que como atualmente parece com isso. Isso não é ótimo, na minha humilde opinião. Então eu só queria apontar isso. Você pode ver alguns sites com esse tipo de design. Tudo bem. Mas já foi dito, Vamos passar para a próxima seção e eu quero falar sobre a manchete principal. Agora, A manchete principal é projetado para transmitir imediatamente a um visitante o que o site é tudo sobre em suas meninas. Neste momento, Webb, impacto permanece no nível do seu negócio. Crie uma presença na web impactante. Então animais se comprometendo aqui pela primeira vez, vamos ver isso. Está bem, parece com isto. As pessoas vão se especializar em ajudar as empresas são melhoradas sua presença na Internet porque basicamente o que isso é tudo sobre, nunca ir para Neil Patel. É basicamente a mesma coisa, Len, Por que seus concorrentes estão tão altos e como você pode por muito tempo eles. Ele lhe diz imediatamente como ele pode ajudá-lo vídeos lagosta sobre o muito semelhante, eles dizem conhecimento de segurança cibernética facilitado, e eles também fornecem mais algumas informações. Aqui, Marte é a mesma coisa. Há uma maneira mais inteligente de fazer. S E O. Você vai Teoh para fora, que enviar e-mails frios personalizados que recebem respostas e, finalmente, caixa ponto com. Simplifique a forma como trabalha a colaboração segura com qualquer pessoa, em qualquer lugar e em qualquer dispositivo. Então o ponto tem sido que a luz depois de sua cabeça para cima onde você tinha um logotipo e seu menu principal , você quer ter uma manchete principal descrevendo o que seu negócio é tudo sobre ou o que o site é tudo sobre. Isso é basicamente o que você gostaria de fazer. Certo, vamos fechar esses outros sites porque não precisamos mais deles. E, ah, apenas fechou Baltimore, tudo bem, então da próxima vez que vamos falar sobre aqui vai ser esta seção Tudo bem, então aqui, você pode ver que nós temos uma seção por causa de nós. Temos serviços prestados a pé com a gente e assim por diante. Mas se você notar que os fundos mudam assim sobre casa, como um fundo branco liso diz desde que tem um fundo de imagem enquanto anda com a gente tem outro branco por grande bem feito. A equipe tem seus próprios testemunhos de fundo tem seu plano de fundo novamente, os clientes tem uma bolsa diferente, e alguém o ponto de ser aqui que uma maneira de separar seções é adicionando diferentes fundos para eles. Não vai ser bom se você tem exatamente o mesmo fundo são para várias seções são consecutivamente. Você poderia, de certa forma, escapar com apenas ter, tipo, tipo, um saco branco simples em um avião de volta e arrefecer outro tipo. Talvez, Mas na maioria dos casos, você quer ter fundos diferentes para suas seções diferentes. Desta forma, ele transmite para o usuário. Ok, esta é uma seção diferente, e isso só faz você parecer muito mais atraente aqui. Um ciber-laboratório que você pode ver morreu aqui. Eu tenho um fundo branco claro para o que é cibernético de laboratório, e então o instrutor Mitchell tem o fundo verde enquanto Upside tem uma causa de fundo branco . O átrio tem um fundo verde. E então você tem este, Ah, vídeo que tem um tipo de fundo asiático preto reivindicações tem um fundo branco se acusado como um fundo verde. O software tem um saco preto e assim por diante e assim por diante. Você pode ver agora que a cada nova seção você tem um novo fundo como pesos. Você se separou do sabonete da seção anterior. Isso é uma coisa que eu preciso falar também. Tente adicionar diferentes planos de fundo para suas seções. Você poderia ir com um plano, fundo, Coehlo ou você poderia ir com uma imagem de fundo. Agora vamos até aqui para a comida, e geralmente seu rodapé é onde você pode ter seus ícones de mídia social. Você também poderia tê-los em seu cabeçalho, se você quisesse. Mas aqui na foto, é um bom lugar para ter suas mídias sociais, e ele também poderia ter, como um segundo menu de navegação de distância. Terceiro no menu de navegação dependente do site que você tem no futuro também. Então, tipicamente aqui o menu terá em seu rodapé seria páginas bem apontadas que não são os mais populares neste vai agora. Por exemplo, as políticas são transportadas como eventos. Estes não são tão populares como as ordens aqui. Como por que nossos depoimentos de serviços. Estes são como as imagens que são mais procuradas. Então, para as páginas que não são tão frequentemente exigidas novamente como eu disse, como políticas F acusa como que você pode tê-los no pé, nosso menu. E, claro, não se esqueça de ter sua cópia. Luzes texto direito dia novo rodapé também 2020, mas será impacto. Tudo bem, reservado O eleitor é um bom lugar para ter seu texto de direitos autorais. Por último, mas não menos importante, eu só gostaria de falar sobre animações. Tudo bem, agora eu sei que animações podem ser fantásticas. Eles fazem seu site parecer muito, muito, muito emocionante. Mas tente o máximo possível para limitar o número de animações que você tem em execução do seu lado porque animações eu tomar muito mais poder para processar. Então, quanto mais as missões você tem um em seu site tão lento. Por quê? Vai se tornar. Então tente minimizar ter animações ou controles deslizantes ou até mesmo alongamento de vídeo. Minimize-os o máximo possível. Tente ir com as imagens e texto GLA. Mas em casos em que é, é muito importante que você tenha, ah, ah, vídeo por presságios. Você pode mostrar o vídeo, mas como eu disse, tente minimizar as animações, os controles deslizantes. Ah, e assim por diante em seu site. Então isso é muito obrigado por assistir vídeo. Vemo-nos na próxima aula. 93. fontes: Então vamos falar sobre um aspecto muito, muito importante do design e que vai ser fundos. Os fundos que você escolher em extremamente importante porque eles tendem a refletir o tom fora seu site. Os telefones são a melhor maneira de indicar esse tipo de personalidade que seu site incorpora para que ele possa ser profissional. Pode ser um tipo de personalidade blogueiro ou talvez até mesmo a nossa cómica na natureza. Agora, para demonstrar a importância dos telefones, deixe-me dar alguns exemplos. Então aqui no nosso site estavam usando o bastante seguro Monserrat está fora da família? Certo? Mas então se eu decidir vir aqui e mudar a família de fundos de indenização para vamos com talvez alguns cursivos, certo? Então meu rim agora e eles mudam isso para cursivo. Você pode ver agora que o tom quase instantaneamente muda agora, mesmo a manchete tem esse tipo de ah divertido que você normalmente associá-lo como sites de filmes ou coisas assim. Ele não reflete mais esse tom profissional de negócios. E aqui no CBR, que é um site de quadrinhos, você pode ver a família divertida que eles estão usando aqui. Já é semelhante à maldição que temos aqui. Mas como porque este site é sobre quadrinhos, uma banda desenhada, notícias de TV mostram coisas assim. Mas dê uma olhada com o Washington Post. Ok, este é um site. É um site de revista para notícias, e você pode até ver a partir do logotipo em si. Você pode ver que tem esse tipo muito artístico de combustível. Para esse fim, é claro, as manchetes aqui você pode ver que isso é muito, muito parecido com os tempos New Roman e o próprio corpo do texto. É muito mais profissional do que crucificar o que você tem aqui em C, Belgacom e ah céus, elipses que tiveram o privilégio de andar. É o eliminatório que treme cara ponto com, e claro, esse cara é um comediante. Ele você sabe que ele é um showman, basicamente, e você pode dizer bem aqui pelos telefones que estão sendo usados nele ele pode. Reflete o tom. Isso afeta o tom do site que você pode ver aqui em baixo nós estamos usando tipo de um tipo de banda desenhada de um universo de fundos esfriado aqui dentro. Você pode ver aqui que o telefone foi usado. Você nunca vai encontrar telefones profissionais como o mesmo em sellout ou vezes novo Roman sendo usado em conjuntos como este. Você vai encontrar algo mais relacionado com nossos sons cômicos ou cursivos ou algo assim. Então, novamente, os fundos que você escolher têm que refletir o tom do seu site. Agora, quando se trata do tamanho da fonte, normalmente você quer usar uma ciência entre 15 pixels e 22 pixels para o texto normal . Agora, a razão pela qual há um intervalo é porque não são todos divertidos. As famílias são iguais quando se trata de seus tamanhos. Então, uma ciência de Monserrat de 15 pixels pode ser maior do que um pequeno tamanho de 15 pixels. Mas geralmente entre o intervalo de 15 pixels e dois em pixels, você terá o nosso algo ideal para a família de telefones que você está usando agora Headlines. H quer H duas abelhas devem ser maiores do que o seu texto normal. Esta é a Sistan morta. Então aqui é como um exemplo de que pode ter você pode ter talvez o seu H um, que será o maior em 40 pixels h dois, talvez 34 pixels cada três faria entre quatro escolher Susan. Claro, seu texto normal representado pelo P R teria 18 pixels aqui é como um exemplo fora do telefone diz que você teria para suas manchetes e seu texto normal. Agora, quando se trata de escolher a própria família divertida real, existem dois tipos principais. OK, você tem o sol serif e você tem a Siri. Se você pode ter ouvido falar destes antes, servir significa simplesmente que o texto tem uma declaração na parte inferior de cada letra, e você normalmente vê isso, especialmente em como os A's, os chás e talvez até mesmo o S. Você vai ver. Você pode ver bem aqui. Tem esse tipo de arrogância ou influência, ou eu realmente não sei como descrevê-lo. Mas olhe para o fundo do sol. Sue se significa que leva decoração Hachinohe na parte inferior de cada perna contra a direita no pôr do sol. Basicamente , são apartamentos. Não há design artístico. - Nada. Nada desse tipo é basicamente plano, então essa é geralmente a maior diferença entre seu filho Síria e seu Sarif. Então, quando se trata de escolher sua família de telefone para o seu texto. Você é típico no goopy desce. Então breve algo porque é muito mais fácil de ler do que o Su Se e quando se trata de escolher as famílias de telefones, eu posso recomendar esses cinco de telefones do Google. Estes cinco são geralmente os melhores, melhores, e são os telefones seguros que você pode usar para o tornozelo. sexo que tens em aberto manda-te ter o Latell. Ganhaste sete, que é o meu favorito. Você tem jeito real, e você também tem filhos PT. Agora, com isso dito, não estou dizendo que esses são os únicos cinco que você pode escolher. Há muitas, muitas centenas de outros fundos lá fora, mas o ponto aqui foi que se alguma vez estoque e você não sabe qual família divertida ir com, basta ir com um desses cinco, e você vai ficar bem. Então, quando se trata do estilo do telefone e você quer ir com um telefone para sua cabeça como e saber que para o seu texto regular, é uma ótima maneira de diferenciar entre suas manchetes e texto irregular. Você está pronto para ter o tamanho do telefone para indicar a diferença, mas muitas vezes é um bom A. Você teve outro tipo de diversão? Família fala especificamente para sua cabeça como um para um texto regular e um opcional. Você pode optar por ter 1/3 de fundo para seus links. Não é necessário, mas você poderia fazer isso também. Mas você não quer ir com mais de três famílias de fazenda em seu site. Então é isso para os telefones. Muito obrigado por assistir. Vemo-nos na próxima aula. 94. Cores: Celestica O que, sem dúvida, o aspecto mais importante do Web design e que vai ser cores. As cores são extremamente importantes porque, assim como com as famílias dos fundos, elas também refletem emoção e tom. As cores que você calça ditam a emoção ou o tom Associate ID com seu site. Agora olhe para estes dois círculos onde você tem o primeiro 1 que é maior. Não há nenhuma cor lá, exceto cinza preto e basicamente parece sem vida. Mas então você adiciona alguns tons de vermelho e escritório, ou menos. O círculo agora se torna um pouco mais animado. Este é o impacto de Carlos em seu site. Mas outra coisa é que, apesar de sabermos que os nossos à paisana são muito, muito importantes, estão a jogar demasiado. chamada também pode resultar no facto de a Europa ter sido muito, muito brega e não muito, muito boa de se olhar. Então, realmente se resume a você alcançar um equilíbrio quando se trata de escolher seus colares. Mas, obviamente, a questão pode ter aqui é como escolher os Kahlo's para o meu site. Quando eu vou fazer aqui é eu vou dar-lhe três passos básicos para ajudá-lo a ser resolvido . Este desafio para o primeiro passo aqui seria escolher um Carlo dominante. Qual é a Kahlo associada à minha marca com o meu logotipo? Com o meu site. Este vai ser o seu domínio e Kahlo. Eu quero dar-lhe o segundo passo aqui, que seria criar um ou dois atos e cores para criar uma chamada. Nós viemos. Então você escolhe sua cor dominante principal, e então a partir dessa cor você escolhe um ou dois são acentos próximos para complementar essa cor dominante . E, finalmente, na Etapa 3, você escolhe uma chamada de segundo plano. Oh, aqueles que são passos básicos. Vamos voltar a pisar, que é o Kahlo dominante. A decisão dominante, como eu disse, é a sua associação de marca. Basicamente dita o que o site da água da sua marca é tudo sobre. Aqui estão alguns exemplos com Coca Cola Light. Os anos dominantes da faculdade, obviamente vermelho e com o tempo penso na Coca-Cola. Você pensa fora da chamada ou ler, mas você também tem Animal Planet. Não é coincidência que aqui usassem verde em vez de ler. Você também vê por que eles escolheram verde aqui. Aqui está outro exemplo da Best Buy. Se você mora nos Estados Unidos ou, possivelmente, até mesmo Canadá, você pode ter ouvido falar de Best Buy você basicamente por Ella truques De lá e em Dublin, cor aqui é geralmente uma homenagem novamente. Você vai ver por que eles escolheram usar laranja aqui. Então, quando se trata de cores, as cores têm diferentes tipos de emoções associadas a elas. Vermelho, que é muito, muito comum, representa energia, perigo, vibração, urgência. Você normalmente veria vermelho quando você tem o site trinchando para mim ou algo muito, muito importante. Talvez haja uma contagem regressiva. Algo assim diz, basicamente impulsos. As pessoas devem agir. Agora você tem um é muito, muito parecido, que é a laranja. Mas isso representa sem amigos e criatividade. Mas também é usado para exortar as pessoas a, como comprar algo ou assinar. Não é uma coincidência porque, na Best Buy, você tem esse tipo de coehlo laranja amarelado associado a eles. Então vamos seguir em frente. Você tem verde. Lembre-se Animal Planet usando verde como o nosso principal Dublin Kahlo. Isso porque o Green é usado para representar a natureza. Representa a saúde, representa a riqueza, e também é a segunda cor mais preferida por homens e mulheres na verdade não sabiam disso. Eu só descobri quando eu estava fazendo a pesquisa para esta lição em particular. Mas verde é, na verdade, são a segunda cor mais preferida. Sabe qual é a primeira cor? Você sabe, a cor mais referida que você vai descobrir em breve. Então concordo, como eu disse representa saúde, riqueza natural. Você tem amarelo, representa a juventude e partilha plenitude. E é usado para chamar a atenção instantaneamente. Um jogo para você. Se você vai a um site e você tem um botão que tem um saco Tio de Amarelo, você vai notar esse botão primeiro antes de qualquer botão de autor. E agora aqui você tem preto. Preto é usado viagens e fechaduras de poder Nós l contra. Isso é o que muitas vezes você vai encontrar preto assistido com marcas. Estado evoca força e profissionalismo. Você tem roxo agora. O problema é usado. Representar riqueza, lealdade com eles. É usado em produtos de beleza e até mesmo companhias aéreas. Na verdade, Thai Airways, eu acredito que Qatar Airways também, eu acredito que talvez ah klm Lufthansa. Não me lembro, mas sei que algumas companhias aéreas usam nosso roxo também. E agora nós chamamos Gray usado Trip é em neutralidade, lógica, tecnologia futurista. É por isso que está associado a marcas como a Apple Apple. Eles têm todos grandes como uma de sua cor dominante principal. Então é apenas para representar tecnologia, competência, competência, sofisticação. E finalmente, você tem Blue, que representa confiança, segurança, estabilidade, negócios Houston, bancos e azul é na verdade a coluna número um mais diferente por ambos os homens e Mulheres. Tudo bem, então basicamente, você tem que escolher um Kahlo dominante que representa o que é seu negócio ou o que seu site é tudo sobre. Parece que eu quero gastar alguns minutos para pensar sobre isso, e então, basicamente, você pode usar sua chamada dominante em seus fundos, seus botões, bem como áreas para as quais você quer chamar a atenção. É onde você usaria sua cor dominante. Mas então você também tem as cores do sotaque certo. Você pode usar isso também em fundos, botões e links. Se você quiser descobrir como você pode criar um sotaque cores de seu Kahlo dominante, certifique-se de verificar o livro PDF que eu tenho. Com este curso, você encontrará uma seção dessa forma. Hoje. Eu levei a bola perto. Você vai encontrar uma teoria de ligação onde você pode encontrar tudo o que você pode criar. As roupas de acento para sua cor dominante basicamente podem ir com a Adobe. Um crente. Adobe Colors tem uma ferramenta que pode permitir que você crie roupas de acento de cores dominantes. Você poderia simplesmente fazer sua pesquisa e Google simplesmente acontecer. Sua principal demanda. O Coehlo. E descubra com o que as cores do acento estão associadas. Coehlo dominantes são. E então, finalmente, você tem sua cor de fundo. Não há qualquer particular você um pretendente com sua bolsa na cor, exceto certifique-se de que seu texto é sempre fácil de liderar. Não é coincidência que a maioria de volta em chamadas sites são tipicamente brancos porque o imposto chamado Texas, geralmente preto e preto, vai muito, muito bem com branco. Então, quando você está escolhendo seu fundo Coehlo, apenas certifique-se de que o texto é facilmente lido pelos usuários. Então é tudo para o Carlos. Muito obrigado por assistir. E claro que te verei na próxima aula 95. Trabalhando com ícones: Vamos falar sobre ícones em volição para Web design. E eu pensei em usar exemplos ao vivo se além do seu show de luz para falar sobre este tópico em particular. Então Aikens são usados hoje em dia em muitos, muitos sites. Estou aqui no Uber Dot com e aqui preste muita atenção a esta última seção crítica . Você tem ícones apenas em cima de alguns pedaços de texto em particular. Então você tem que comer certo? E claro, você tem o garfo e uma colher representando Eat. Você tem o carro representando Vied. Você tem essas barras representando ganhos, que, a propósito, você também poderia usar este chefe para representar nossa força de sinal, talvez até mesmo frequência pessoalmente vistas mais antigas, talvez o sinal de libra ou o Sinal de dólar. Mas isso também é perfeitamente bom. E, claro, você pode ver os outros ícones aqui e o texto que eles estão associados. Então, quando se trata de usar em ícones, regra número um é que você quer ter certeza de que os ícones representam com precisão o texto que eles estão associados. Não vai fazer sentido se para a bicicleta como exemplo, em vez de usar uma bicicleta real, você acabar usando o carro. Não vai fazer nenhum sentido tão bem. Número um de novo. Certifique-se de que o texto e os ícones correspondem. Mas então, onde exatamente você usaria seus ícones? Você pode usar seus ícones em colunas. Você também pode usá-los em torneiras. Por exemplo. Esta é uma conta bem aqui. Se eu for para, eu posso clicar em Ganhar, e então você tem que ganhar livros aqui em cima. Um negócio conclusivo para livros de negócios aparece para que você possa usar ícones para representar suas guias , mas você também pode usá-los em colunas como Abaixo aqui está um exemplo. Você tem a coluna da coluna das garrafas, Global para a coluna do navio e, claro, no topo, você tem os ícones. É também por isso que, em nosso site, onde temos serviços fornecidos que eu usei ícones representam nossa água. Categoria particular é tudo sobre novamente. Você pode ver os ícones refletindo com precisão o texto. Não são adequados com garantia de cultura, com a marca de verificação nossa nuvem com a nuvem. Posso escrever a segurança cibernética deles com o escudo e assim por diante. Então, como eu disse, você pode usar ícones em suas colunas e seus tamps. Mas há outra regra associada aos ícones, e esse é o fato de que os ícones não devem ser os holofotes. Eles devem ser muito, muito pequenos, e deve ser usado para apenas basicamente elogiar ou melhorar o design fora da coluna ou da torneira que eles estão associados. Isso nunca deve ser o centro das atenções. Mais uma coisa eleito, mencionado que temos em Aikens é quando você usá-los em seu menu de navegação, certifique-se de que é em uma situação em que há espaço suficiente para que eles sejam usados. Em outras palavras, eles não fazem seu menu parecer desordenado neste caso. Por exemplo, com uber notar que à esquerda, onde eles têm o menu principal real, eles não têm ícones representando nosso qualquer texto. Mas aqui na luz, onde eles só têm os produtos linguísticos, Logan e depois se inscrever, eles são capazes de usar Aikens porque, bem, basicamente, os ícones podem ser Philip um pouco Mais espaço aqui. Basicamente, se você remover os ícones aqui, os muitos ainda vão olhar, olhar OK, mas apenas esta semana ícones os que representam produtos de linguagem e Logan eles fazem plantá-lo maravilhas aqui em nosso impacto na Web. Não terá feito qualquer sentido para nós ter ícones, terreno direito braço uma navegação muitos porque, novamente, já temos o que, como sete itens em nosso menu principal. Então, adicionar ícones adicionais só fará isso parecer muito, muito, muito agrupado ou coagulado, e não ficaria bem. Então, novamente, se você estiver indo para usar Aikens em seu menu, certifique-se de que há espaço suficiente para que eles apareçam. Então é tudo para Aikens. Muito obrigado por assistir. Vemo-nos na próxima aula. 96. Imagens: Vamos falar sobre outro aspecto importante do design, e isso vai ser imagens de fundo que tipos de imagens que você usa são muito, muito importantes agora. O que eu quero fazer aqui é demonstrar as várias maneiras como você pode aplicar suas imagens de fundo , bem como os efeitos que você pode aplicar a elas para que todas pareçam realmente, muito boas. Agora o primeiro 1 aqui é que você tem esta imagem de fundo, você tem um logotipo e você também tem algum texto. Então isso não parece tão bom, certo? Parece que dificilmente se vê o logótipo. Você dificilmente pode ler o conteúdo do logotipo e até mesmo o próprio texto. É mesmo que você possa ler e você pode ver que é um blog facilitado. Ele meio que se mistura um pouco com o laptop porque o laptop também é branco, então não é realmente visível tão bem. No entanto, se agora aplicarmos sua capacidade com uma chamada Baghran de preto, agora você pode ver que objetivo baixo é mais visível, bem como o texto. Então esta aqui é a maneira mais popular de aplicar nossas imagens de fundo, especialmente quando você quer reproduzir texto em sua imagem de fundo. Você pode ir para a capacidade. Bem, talvez 0,5 ponto seis. Torne o texto mais visível. Faça com que as imagens ou os logotipos que possam estar no fundo também sejam mais visíveis . A 2ª 1 aqui vai ser com Grady INTs. Agora Grady basicamente envolve a combinação de cores, e aqui você pode ver, por exemplo, você tem uma espécie de mistura avermelhada rosada à esquerda em direção ao centro e seguida, sob o quê? Você tem algo mais verde Greysia do jeito que você pode ver bem ali. E aqui está outro exemplo novamente. Você tem algo como azulado roxo bem ali à esquerda, e então foi ao mesmo tempo. O direito que você tem algo mais limão esverdeado de uma forma, para ser honesto com você nunca foi um fã de Grady Insight. Hadley já usou brilho nos meus desenhos de bunda, mas isso não quer dizer que não sejam. Eles são incríveis. Você pode usar granadas para criar verdadeira Itália, são belos efeitos em seu site, mas aqui está outro que não é muito, muito comum, mas é realmente muito bom também. E esse é o efeito do sangue. Assim, você pode ver no saco e nós temos a imagem de um homem segurando um celular . Mas você pode. Hoje é sangue e não é branco. Sangue é porque queremos o texto. O vício das mídias sociais para ser mais são visíveis para ser mais aprimorado. Então aqui está outro tipo de estilo. Você pode aplicar às suas imagens de fundo. Você pode torná-los um pouco de sangue, a fim de ter o texto no fundo ser mais visível. Então, mais uma coisa no show vai ser quando você adicionar caixas de texto direito com algum texto. Neste caso, neste momento, podem ver que temos a caixa de texto com o debate. Talvez as palavras como fazer livro didático de allays para fotos na loja de alimentos. Um pesos realmente impressionantes. Você desenha sua bolsa quando imagens como esta é ter alguma capacidade na própria caixa real . Agora, se você olhar de perto, você ainda pode ver isso através da caixa. Ainda podemos ver as estrelas lá fora. Não é ah, pico. É uma espécie de transplante. Você pode ver tapinhas do bagman também, então há outra maneira legal de adicionar caixas de texto em seu site Quando eles acabarem. aneto de limão em cima de uma imagem de fundo, tentou torná-los um pouco mais transparentes para que o usuário ou o leitor ainda pode ver no saco redondo através da caixa. Então, em geral, são vitais puxar imagens que são muito pequeno reboque. Evite o alongamento. Lembre-se, estamos falando sobre o tamanho da capa na propriedade, bem como o conteúdo. Se você estiver indo para usar a capa, lembre-se, a cova irá esticar a imagem para garantir que ela sempre ocupa a totalidade com uma altura de seu recipiente. Se você usar imagens de dois pequenos, você pode acabar direto na imagem e eles parecem sangue, e eles não vão ficar tão bem. Portanto, evite fazer upload para imagens pequenas, mas, ao mesmo tempo, evite imagens opulentas e superdimensionadas. O prejuízo aqui é que quando você tem sobre imagens científicas, eles vão demorar mais para carregar e, como tal, a velocidade de um sofá respeitável como resultado. Então, tente fazer upload de imagens que não são mais do que duas vezes suas dimensões reais de exibição. Lembre-se que falamos sobre isso na seção colocá-lo que você quer ir com não mais do que vezes , também, porque realmente, porque realmente, vezes dois é o que vai acomodar nossas telas de alta resolução, como as que você encontrar em Dispositivos Apple. Qualquer coisa mais do que isso é apenas muito agora, só para lhe dar uma rápida recapitulação entre pings e J. Lembre-se, obtém melhor qualidade, mas como eles são de melhor qualidade, eles são maiores em tamanho, e o resultado levará um pouco mais de tempo para carregar do que Jeb XG. Porcos muitas vezes sentem qualidade, mas o comércio fora aqui é que um menor na ciência e ele vai carregar muito mais rápido, então use pings para seus logotipos. São logotipos agradecidos, possivelmente até ícones. Mas, em seguida, use J pigs, principalmente para suas imagens regulares em seu site. Então é isso para imagens. Muito obrigado por assistir. Vemo-nos na próxima aula. 97. Espaçamento: Uma última coisa e vamos conversar antes de nos reunirmos. Esta seção sobre conceitos básicos do Web design vai ser espaçamento agora. Já tomei o layout geral, mas não falei sobre espaço. E antecipação, claro, é muito, muito importante. Geralmente, você queria ter espaçamento suficiente entre suas seções, suas colunas, bem como sua cabeça e o GLA Texas. Eles podiam ver agora em um site de vida. Nós temos muito e muito espaçamento. E, claro, permite que o conteúdo em todo o site basicamente todos respirem. Mas agora imagine exatamente este mesmo site. Mas agora sentimos que qualquer espaço aqui é o resultado. Aqui, você pode ver a seção sobre EUA agora parece rebelde salão. Parece que todo o Texas está moldado um contra o outro. Você pode ver a seção de serviços fornecidos, bem como a pé com a gente. Tudo o que parece uma bagunça porque não há espaço no espaçamento, como eu disse, é muito, muito importante. Certifique-se de que não há espaço entre o conteúdo. Use suas margens. Use seus padrões apropriadamente. Mas, claro, não exagere. Não use em margens de 200 pixels ou padrões de 500 pixels. Claro que você não quer ir. Nosso golpe é fácil de imaginar. Os padrões. Basta ter certeza de que é muito espaço entre suas seções, colunas e, claro, entre suas feridas H para usar H três e ataques diretamente, certifique-se de usar suas margens e padrões são para eles. Então é isso para o espaço e não há muito o que falar aqui. Mas muito obrigado por assistir. E, claro, te vejo na próxima aula. 98. Revisão de seção de web: Então é isso. Chegamos ao fim desta seção de bônus onde abordamos os conceitos básicos fora do Web design, e espero que agora você entenda a importância de escolher escrever como você pode andar de Kahlo com Bhagwan Images High pode reproduzir texto em imagens de Baghlan, como você pode andar com ícones, espaço e coisas assim. Então, como eu disse, alienígena para visualizar esta seção não é um cinto avançado. Os conceitos de Web design se você está mais interessado em Web design e tenho certeza de que você confinou armas avançadas e causas lá fora na Internet. Mas se você está interessado apenas em Linda noções básicas, esta seção espero que tenha proporcionado tais noções básicas para ir lá e começar a projetar belos sites. Então é isso. Espero que gostem desta seção. Muito obrigado, e claro que eu vou vê-lo na próxima seção. 99. Pré-visualização de seção de PHP: Tudo bem. É uma bem-vinda à seção de bônus número dois. Nós vamos abordar o básico de P H P. Agora PHP é uma linguagem de programação muito, muito poderosa que você pode ter ouvido falar. Quando você pensa em PHP, pense em servidores Web que eles basicamente usaram para atacar ou estabelecer uma comunicação entre ele . Website Willbros Up e serviço Web de TI. Quando tudo tosse servidores, pensar fora PHP agora como competir ser realmente beneficiar todo o site como ele é, mesmo que agora este é um site bem desenvolvido, ele é projetado lindamente. É responsivo, mas não é tão interativo. Por exemplo, se eu clicar em, digamos, depoimentos, descobrir que nos leva até a seção de depoimentos. Mas e se você quisesse um depoimento separado da página quatro? E se você quisesse ser capaz de deixar esta página e ir para outra página? Como é que conseguimos isso? Mas nós podemos conseguir isso com o PHP tão envolvido nesta seção, eu vou mostrar como você pode fazer uma visão mais interativa para que quando você clica em links no menu, ele leva você para as páginas reais para esses itens de menu e Claro. Não se esqueça do nosso formulário de contato. Nós temos um formulário, mas não é funcional. Se alguém entrar aqui digita a mensagem de nome do e-mail, ele enviaria nada vai acontecer. Mas com Ph. B. vou mostrar como você pode fazer com que os formulários de contato funcionem corretamente. Então é isso para esta seção, você vai encontrá-lo muito, muito útil porque o PHP é uma linguagem de programação extremamente poderosa e é uma que você deve saber. Você precisa saber pelo menos o básico do PHP para poder construir nossos sites interativos. Então sente-se, relaxe e, como sempre, espero que gostem desta seção. Vamos começar. 100. Criando o arquivo footer.php: Muito bem, bem-vindo à seção PHP. E o que eu quero fazer aqui é apresentar a vocês uma instrução ou função PHP conhecida como include all require. O que exatamente são esses dois? Bem, vamos dar uma olhada no nosso site talvez. Atualmente, é uma única página. Você clica em qualquer um dos links aqui. Ele leva você para baixo para a respectiva seção e assim por diante. Mas e se quiséssemos que nosso site fosse como todos os sites tradicionais onde você tem várias páginas? Então, quando você clica em depoimentos, por exemplo, veterano trazendo aqueles aqui para a seção de demissão, ele nos leva a uma página separada especificamente para o depoimento. Normalmente, é assim que a maioria dos sites são. podemos usar o PHP para tal No entanto,podemos usar o PHP para tal. Deixa-me mostrar-te uma coisa. Ok, vamos passar para w três escolas ponto com notou que sempre que eu clico em qualquer uma dessas guias aqui, duas coisas são sempre consistentes. Claro, todos desta página são o cabeçalho e o pé para baixo atingido O conteúdo nunca muda entre a página real em si. O conteúdo muda. Sim. Se você clicou em matemática Djebbour, por exemplo, tudo isso aqui muda. No entanto, o cabeçalho e rodapé é sempre o mesmo. Você sempre encontrará um logotipo à esquerda. Você vai encontrar seu menu no imediatamente, que este texto à direita você vai encontrá-los no menu de navegação sexta-feira. Não importa qual aba clique nele é exatamente o mesmo uma e outra vez como tal, Se queremos criar uma página separada para qualquer um desses itens de menu, vamos querer ir para fora para ser exatamente o mesmo. Você queria ir para estar lá à esquerda, o menu principal à direita, e depois aqui em baixo. Claro, queremos colocar para fora para ser exatamente o mesmo em todas as páginas sem ser dito. Se quisermos criar um, digamos, um arquivo html de início de testemunho, teríamos que incluir exatamente o mesmo. É um código semelhante para o cabeçalho, e os alimentos são todos novamente sem PHP. Mas com PHP, podemos simplesmente ir para os depoimentos, não arquivar html e simplesmente dizer, hey, chamar o conteúdo ou recuperar o conteúdo para o cabeçalho. Todos recuperaram o conteúdo do rodapé com uma única linha fora do código que você não acredita em mim . Vamos verificar isso. Está bem. O que vou fazer aqui é isto, está bem? Vou até um público que pasta HTML, e aqui vou criar um novo arquivo. Ok, deixe-me, tipo, tipo, clique por aqui, Lim Descartável. Feche isso nos dias finais de fixação. Tudo bem, então aqui, eu estou indo para um clique. Clique no novo arquivo, e eu vou chamar este fouda dot PHP. Ok, agora repare. Eu o chamo de PHP e não dot html. Você logo descobrirá. Vou voltar ao index dot html e depois abrir este arquivo. Eu vou vir até aqui, e o que eu vou fazer é pegar o conteúdo de toda a seção de rodapé. Por isso, aqui mesmo, vou vir até aqui. Cascalho disto. Agarre tudo. Vou cortar isso agora. Eu vou abrir, fouda dot PHP e eu vou colar todo esse frio aqui. Deixe-me ir em frente e salvar. Eu também vou salvar o arquivo html index dot que salvou esse também. Agora, se eu voltar para o Broza e eu gostaria primeiro uma página notar que nós não vemos mais o rodapé mesmo porta Agora nós temos um pé do arquivo PHP. No entanto, no próprio arquivo html do índice, não há código. Não há nada Tell no navegador ou no servidor para recuperar o conteúdo fora fota dot PHP. Como tal, agora temos que incluir uma declaração PHP em nosso em exercer sua NFL para dizer, hey, recuperar o conteúdo para food tar dot PHP. E é aqui que a declaração mágica do PHP vai cair. Então aqui mesmo acima da tag buddy, eu vou dizer ponto de interrogação PHP incluir. E, em seguida, em casacos fota pensamento P, uh, uh, rodapé dot PHP e, em seguida, dois pontos e, em seguida, ponto de interrogação gritted no símbolo. Este aqui é o código PHP dizendo ao servidor para recuperar o conteúdo fora do rodapé dot PHP. E, claro, nós apenas dizemos para a vitória porque pé do PHP e índice dot html I e exatamente a mesma pasta, então certifique-se que o caminho está sempre correto. Então eu vou continuar agora, salvar isso, mas agora se eu voltar aqui e eu atualizar a página, notar que nós ainda não estamos dizendo o conteúdo do rodapé. Por quê? Porque agora nosso arquivo está muito frio. Index pensou HTM l Se você quer que seu servidor processe código PHP, você tem que nomear seu arquivo dot PHP e não pensou html notou que o debate que poderíamos aqui é tudo em preto. Eles não estão destacados. Como o código html. Está em azul, vermelho e assim por diante. Então o que eu vou fazer agora é simplesmente mudar o nome do arquivo html index dot. Vou renomear isso para índice ponto p h p. Vamos confirmar isso. E agora Norte é que de repente parece ser bom agora é agora destacado porque temos agora salvar o arquivo como um arquivo PHP e não um arquivo HTML. Se eu voltar para o navegador e atualizar a página, você saberia notar. Agora temos o rodapé aparecendo. Então eu disse, OK, os ícones finalmente apareceram. Eu estava sempre esperando os ícones para exibir, mas você não pode ver que o fota agora é exibido completamente porque aqui nós temos o código chamando o conteúdo do PHP fértil. Pé da página B tem o código HTML para o pé para cima. E, claro, nós também renomeamos nosso arquivo html index dot para indexar pensamento P H p Agora você pode estar se perguntando, OK, então eu mostrei a você como usar a instrução include a. No entanto, há Outra declaração é muito, muito semelhante, que é a instrução require. Qual é exatamente a diferença entre include e the choir? Ambos alcançarão o conteúdo do seu caiu corretamente. No entanto, um é mais seguro, enquanto o outro é menos seguro. O que eu quero dizer? Tenha em mente que sempre que você está lidando com código PHP, você também está lidando com um servidor Web. Como tal, pode haver situações em que haja uma falha na comunicação entre seu navegador e esse site. Ou talvez a UPS se recuse a responder. Quem sabe quando tais vendas, ou chamar a declaração que você escolher bem indicar como o civil Lewis vai responder em tal cenário. No caso de incluir continuará a saída de código, mesmo que haja um tempo exigirá não mais este código animal de jogo, ele simplesmente vai parar para demonstrar isso. Vamos fazer alguma coisa. Está bem. Eu vou descer aqui e vamos para indexar o PHP. Uh, eu vou descer aqui. Vamos apenas adicionar algum código se semelhante aqui. Então deixe-me ligar para este Hum e eu só vou dizer olá. Deixe-me fechar esta etiqueta também. Ok, eu vou em frente agora, e eu vou salvar este arquivo. No entanto, eu vou mudar o nome do nosso pé sobre PHP. Vou renomear isso para, digamos, pé alto. Ah, um ponto PHP. Vamos sair disso. Ok, então agora, aqui, onde você tem o include para o dot PHP nós não temos mais o pé do Petri caiu porque agora é pé são advertir ponto PHP. Então deve haver um “sempre “aqui. Mas note o que vai acontecer se eu voltar para o navegador e atualizar a página. Observe que, sim, nós não temos mais o rodapé porque é agora pé estão vagando. Ph b. No entanto, ainda temos agora o Nós agora temos o Olá. Tagged o h um tipo exibindo Olá, porque isso é o que ele requer. Então é isso que inclui faz. Mesmo que já havia um erro aqui porque footed de poesia não foi encontrado, incluem, ainda passou a saídas o H um tag off. Olá. No entanto, se eu mudar, incluir agora para exigir todo o que vai acontecer, eu vou em frente agora. Salve isso. Se eu entregar de volta para as contas estão em. Eu me refiro a página aviso que os átrios intactos não mais este lugar. Isso é porque podemos ser coro assim que há uma área fora de qualquer tipo. O resto do registro do navio frio não será mais exibido. É por isso que é mais seguro. Você normalmente não quer manter na saída em código Se houver um Evel, há muitos cenários onde isso não será muito para não ser uma boa idéia para continuar colocando código. Mesmo que já haja uma mensagem, os hackers podem tirar proveito disso e realmente estragar seu site. Então, para estar no lado seguro, você normalmente quer ir com exigem em vez de incluir todos Kate. Então eu vou em frente agora e simplesmente remover a etiqueta H 1. E, claro, eu vou salvar o arquivo. E depois voltarei aqui. E, claro, também simplesmente renomeou o pé um de volta para ah rodapé dot PHP. Deixe-me confirmar essa. E lá vai você. Ok, eu vou voltar aqui. Apenas atualize a página e certifique-se de que está tudo bem. E, ah, então é isso. Então, muito obrigado por assistir o primeiro vídeo aqui na seção PHP Alemanha Próximo vídeo wearable Agora crie nosso cabeçalho dot arquivo PHP. 101. Criando o arquivo de header.php: Bem, os retornos e o vídeo das pessoas são criados com sucesso. Nosso arquivo PHP adulto pé e nós também fomos capazes de usar a instrução require para recuperar seu conteúdo. Então o que eu vou fazer agora é simplesmente criar oito um novo arquivo, e vamos chamar esse arquivo. A cabeça são ponto PHP é limitado. Fechou este índice com o arquivo PHP. Ah, deixe-me criar um novo arquivo. Chame hedda dot PHP confirme e tudo bem, eu vou abrir mais oito PHP. Vamos também abrir o índice dot PHP. Então agarre no frio para a cabeça do PHP vai ser um pouco mais complicado do que o pé do PHP. A razão é que mesmo que nós só queremos o logotipo e o menu de navegação, a imagem de fundo futuro, bem como este texto e estes dois botões todos incluídos dentro da seção Hedda, ele está bem aqui. Note que este é o dia da casa da Hedda I.D . E sua seção de cabeça fora também contém esta divisão colina de classe de herói e todos esses outros conteúdos. Então vai ser um pouco mais complicado, mas vou falar sobre isso com mais detalhes no próximo vídeo. Então, apenas para manter as coisas simples para este vídeo, eu vou ir em frente e pegar tudo até onde você tem a tag HTML no topo . Então eu vou cortar isso e depois ir para a cabeça do tahp e nós colamos todo esse código . Vamos salvá-lo e, em seguida, voltar para in exert PHP e fora do curso aqui mesmo. Só estou removendo esse espaço vazio aqui. Eu vou dizer pergunta Mark PHP exigem e, em seguida, casacos. E então Hedda, eu pensei, P h P P Colon pessoa Mark absolvido e símbolo. Guarde isso. Vamos voltar aqui. Atualize a página e lá vai você. Então, à frente do PHP agora está andando, bem como o rodapé trouxe PHP. Então é isso para criar o chefe do arquivo Petri Alemanha Vendex Video disponível agora tentar criar uma página separada 102. Criando a página de contato: Bem, volte. Então o que vamos fazer agora é criar uma página separada cheia. Digamos que a seção de contato. Ok, então o que eu vou fazer agora é, como sempre, eu vou voltar aqui. Vamos abrir nossa pasta XML de ponto público. botão direito aqui. Sai de um novo arquivo chamado seu ponto de contato PHP. Vamos confirmar essa. Vou abri-la. Primeiro de tudo, vamos, abra. Ok. Vou voltar ao índice do PHP. Agora vamos pegar a seção para o contato. Então, vai ser bem aqui? Seção I d contatos. Vou pegar tudo até aqui. Eu estou indo para ir em frente agora e cortar esta cabeça sobre para entrar em contato com PHP ritmo todo esse código . Vamos salvá-lo. Eu também vou salvar o nosso índice de ponto PHP também. Vamos salvar essa. Vamos voltar aqui. Vamos atualizar a página e OK, então é chamado aqui. Não temos mais a seção de contato. Ainda podemos clicar no contato, vender em maior porque não atualizamos o menu. Um link. Mas o que eu posso fazer é ir até o meu véu e depois simplesmente dizer pensamento de contato. PHP pressione enter. E lá vai você. Agora você pode ver que temos a página de contato sem a cabeça erguida sem a comida. Então vamos voltar ao nosso contato com o PHP. E agora vamos incluir ou exigir melhor o cabeçalho e o pé. Então vamos fazer isso. Vou abrir uma nova linha White hit no topo. Mas você tem seção I d E eu só vou abrir a tag PHP PHP requer Coates hedda dot PHP Vamos adicionar um cool longo fechado uma tag PHP. E então, é claro, eu não apenas copio este também, e então ele virá todo o caminho até aqui e então simplesmente repita o processo. Mas desta vez mudar cabeçalho dois rodapé dot PHP salvar. E agora eu vou voltar para o Broza, atualizar a página e o “hey “você vai. E agora temos à frente de sermos chamados. Nós também temos o pé estão sendo chamados bem e notar que nosso formulário de contato US agora é também estilo porque estamos chamando o chefe do PHP que também tem o link para o arquivo CSS. Então isso é um evento alemão. XVID disponível agora Vá em frente para atualizar os links do menu. Te vejo então. 103. Como atualizar os links do menu: bem-vindo de volta ao vídeo das pessoas é criado com sucesso nosso contato com o arquivo PHP. No entanto, aqui nos principais muitos quando clicamos no contato, ele não faz nada porque nós não atualizamos o link para apontar para a página do ponto de contato PHP . Então para fazer isso muito, muito, muito simples, eu vou voltar para o cabeçalho dot arquivo PHP porque este é o arquivo segurando nosso menu principal agora e então tudo o que temos que fazer é ir para a seção de navegação, olhar para a seção de contatos e, claro, aqui. A etiqueta A é Bem, nós queremos pegá-la porque esse é o link. Eu vou entrar aqui agora e simplesmente dizer quatro barras de contato adat P P P P P. Isso é tudo o que precisamos fazer. Vou em frente agora. Salve isso. Vamos vir aqui primeiro de Page e Linda certificar-se de que eu estou na página inicial. Ok, então para mim agora, se eu clicar no contato, ele agora nos leva para a página ponto de contato p h p p. Diz fácil assim. Então vamos criar outras páginas. Basta ir para o seu menu de navegação me e atualizar o imposto A para apontá-los dois apontar seus links para as novas páginas, no entanto, notar agora que nós somos mesmo o mundo para entrar em contato com a página PHP, não temos como voltar para a página inicial. Uma solução pode ser criar um novo item de menu chamado Início e simplesmente apontar que eu tentarei para a página inicial. No entanto, uma maneira melhor, mais do que pontos fora ou criar um link para a página inicial seria adicionar o link no objetivo baixo. Muitas vezes você vai para sites, você não iria ver uma página inicial, mas se você clicar no logotipo, ele irá levá-lo de volta para sua página inicial. Então vamos fazer algo muito, muito parecido aqui. Vou voltar para a cabeça do arquivo PHP. Vamos procurar a seção do logotipo e fora do curso. Está bem aqui, mas você tem rap local e depois o nome. Então, muito simplesmente onde temos a imagem exibindo o logotipo real, eu vou apenas adicionar a etiqueta a que uma viagem é igual. E então, em casacos, você pode estar pensando, como apontamos para a página inicial. É muito, muito simples. Basta adicionar 1/4 barra. Isso é tudo que você precisa fazer. Então agora vou em frente, fechar isso e, claro, no final, bem aqui. Também vou fechar a etiqueta mais uma vez. E lá vai você. Vou em frente agora e salvar isso. Vamos passar aqui Refere-se a Página e, claro, observe que ainda estamos no contato com o PHP nossa página. No entanto, se eu conheço Nova no logotipo, especialmente o círculo aqui quando eu clicar nele, ele nos leva de volta para a página inicial para o arquivo PHP index dot. No entanto, este texto em si ainda não é um link. Então tudo o que precisa fazer agora é vir aqui e fazer exatamente a mesma coisa. Então, basta pegar estes uma etiqueta com o Ford Slash vindo aqui colado para os ataques contínuos classe span . E, claro, eu terminei aqui. Vá em frente e feche. Ah, a tag save Voltar aqui refere-se a página e eles vão agora O logotipo inteiro é clicável . Vamos para o contato com a página PHP clique no texto, certo? R. Ele nos leva de volta para a página inicial do índice ponto p h p. Então é isso para atualizar nossos links manuais. E claro, te vejo na próxima aula. 104. Desafio de PHP: Quero aproveitar esta oportunidade para apresentar a vocês um pequeno desafio, se estiverem prontos para isso . Até agora, tão bom que pudemos atualizar nossos links de menu. No entanto, no contato do PHP aviso, ainda havia visto a imagem de fundo, bem como esta seção de herói quando idealmente tudo o que deveríamos ser vistos seria o logotipo, o menu de navegação e, em seguida, o formulário de contato. Como o que você tem aqui na Academia do Banco Mundial. Esta é a página inicial. Mas se você clicar no contato, você pode ver agora que você não tem mais a seção de heróis. Tudo o que você tem é apenas um texto, bem como o formulário. É apenas na página inicial onde você tem esses heróis seção com a imagem de fundo e o texto. Da mesma forma, eu quero que você tente e recriar algo semelhante aqui em nosso site para que quando você clicar em contato com o PHP, você não disse mais sua imagem de fundo. Você não disse mais este texto nenhum dois botões. Tudo o que você verá será o logotipo, o menu de navegação e, em seguida, o conteúdo para os empreiteiros são formados, Então eu vou dar algumas dicas se você voltar para o arquivo PHP ponto cabeçalho. Este é o dia em que estamos tentando remover da herança PHP este dia de classe de herói. Então você vai simplesmente remover este texto, colocá-lo dentro do arquivo PHP index dot, e então você vai ter que fazer algum estilo porque quando ela removeu esta seção sua moeda Hedda fora do logotipo. E no menu de navegação, não temos mais a imagem de fundo como, como seu fundo você. Então você terá que usar algum CSS para aplicar, talvez um saco em cool off preto ou talvez outro tipo de cor. Então esse é o desafio. Convido-vos a experimentarem, se quiserem. E, claro, se você se deparar com algum desafio, deixe-me saber mais do que feliz em ajudá-lo. Então isso é eu acho, tanta sorte, e claro que eu vou te ver na próxima aula 105. Função de data: Bem, volte. Quero mostrar-lhe uma maneira rápida. Ou melhor, uma rápida recepção de volta. Eu quero você. Bem-vinda de volta. Quero mostrar a vocês uma maneira melhor de mostrar as datas em nossa comida. Então, mas temos todos os direitos reservados, nosso texto de direitos autorais. Agora, estamos colocando manualmente a data com HTML, o que significa que quando o novo ano chegar terá que voltar ao nosso código e mudar 2022 2021 barco com GHB, podemos realmente fazer isso automaticamente. As pessoas acompanharão o ano, e quando o novo ano chegar, ele mudará automaticamente 2022 2021. Então, como fazemos isso? Bem, vamos fazer uso de uma função chamada data PHP. Basicamente, o PHP tem muitas funções como programas pré build que podem produzir força de dados. Então o que eu vou fazer aqui é ir para o meu pé, comecei PHP porque esse é o arquivo que tem a data. E bem aqui eu vou remover 20 21 de todos, e então eu vou introduzir o código PHP de abertura. PHP e então eu vou dizer echo Echo é basicamente usado para saída de dados. É como imprimir nosso conteúdo. Então, meu eco, estamos pedindo ao PHP para exibir algum conteúdo. Então, queremos exibir a data. Então, como resultado, eu vou dizer eco e depois datas e, em seguida, entre parênteses e, em seguida, em casacos duplos, eu vou adicionar o código de capital, por quê? E então meu semi dois-pontos, e então eu vou fechar o código PHP. O que isso está fazendo agora é dizer ecoar a data e por que a capital representa o ano. Então deixe-me ir em frente agora e salvar isso e eu vou voltar para minhas contas são refere-se a Page. E então, se formos a escola até aqui, você pode ver que agora temos 2020 sendo saída, Ted. Mas como sabemos que está funcionando? Bem, se eu voltar aqui e eu mudei o capital por que então vamos dizer que eu neste caso representarei o dia. Vou em frente agora salvar novamente. Vou voltar para o meu navegador foram primeiro uma página e agora você pode ver hoje é terça-feira. Então agora você pode ver que o PHP está realmente funcionando. Então este é o código geral, certo? Você tem seu código PHP de abertura e, em seguida, eco para saída, e, em seguida, a função é chamada de datas. Mas mesmo sobre datas é que há um monte de variáveis com uma data que você pode ter o tempo você pode ter o dia que você pode ter o mês. Você pode ter o ano e assim por diante. Então cada uma dessas variáveis tem seu código. Então eu, neste caso, representa o um dia. E se eu quisesse exibir, digamos, o mês como um exemplo, vou remover l e usar F maiúsculo em vez disso. Vamos guardar isto e deixar-me mostrar-te. Eu vou atualizar os profissionais são vir todo o caminho até aqui e agora você pode ver que é junho 2020. Na verdade, vamos em frente e produzir o mês e também ah, o ano. Então vai B F e depois espaço e depois um capital. Por que voltar aqui? Refresque. Venha até aqui e lá vai você. Estamos em junho de 2020. Nota, a propósito, que essas letras eles realmente maiúsculas minúsculas ar sensível pouco. Quatro Não são colocados nada, ele só irá produzir a letra real f enquanto um pequeno pouco por que irá produzir os últimos dois dígitos fora do ano. Então, neste caso agora, se eu salvei isso e voltei aqui, agora serão 20 em vez de 2020. Então, tenha isso em mente. Vamos voltar aqui. Mudar tudo de volta para por que salvar? E lá vai você. Então é assim que você pode usar a função de data para produzir a data do ano da moeda. E se você quiser mais instruções, você pode ir para o PHP dot net e então simplesmente procurar a função date. Aqui você vai encontrar todas as várias variáveis que você pode usar, como s capital. E você pode usar Z. Você pode usar W e assim por diante e assim por diante. Então isso é que eu acho, tanta sorte. Vejo-te na próxima aula 106. Como trabalhar de forma contatos: Tudo bem. Então, bem-vindos ao vídeo final aqui na nossa ressecção do período. E quando eu quero fazer aqui para mostrar a vocês como fazer o formulário PHP andar, nós atualmente o temos como uma forma de estilo de Deus. CSS HTML, mas nada mais. Não há funcionalidade nos bastidores Agora, eu já criei todo o código necessário. Então, o que vou fazer agora é te guiar pelo tribunal e explicar como realmente funciona . Então eu não tinha meu contato com o arquivo PHP aberto aqui, como você pode ver. E aqui, é aqui que o formulário realmente começa. O que você tem quatro métodos é igual a obter agora. Existem dois tipos de valores que você pode fornecer aqui. Você pode ir obter todos post é o valor muito melhor, porque é mais seguro do que obter. E eu vou te mostrar exatamente o porquê. O que eu vou fazer agora é simplesmente ir em frente e salvar esses dois arquivos. Não se preocupe com eles. Explicarei exatamente o que está acontecendo, mas vou voltar aos meus golpes. Nossos calendários se atualizam. Não, não, que temos como o valor vital onde temos a formação, mas está pronto para ficar bem, então para entrar agora. E eu preenchi o título do meu e-mail de nome e l está tendo algumas algumas mensagens. Bem, e eu vou apertar enviar, tudo bem. Basicamente, estamos tendo uma mensagem de erro, mas não é necessariamente porque off que fica realmente doente. É por causa do mudou desenvolvido para obter Mas é algo mais realmente queria mostrar-lhe o que acontece no u R l Quando você usa você vê bem aqui temos o nome da pessoa que envia o e-mail que é Alexander Bony. Temos o endereço de e-mail dele. Temos o título. Nós temos a mensagem Todos cabeça de saída em Diyala Bill. Isto é o que o Get faz. Ele emitirá o conteúdo fora do formulário no U. R L, que é muito, muito ruim por razões de segurança. Você quer ir com post no porque com post, você não vai ver esses valores em tudo. O Islam volta aqui e muda o formato que ele começa a postar agora A razão pela qual estamos realmente tendo as mensagens de erro, porque na forma real fazendo todo o processo, e nós Basin, postamos , postar, postar, postar e assim por diante. Então, se quisermos usar o “get “terá que mudar alguns dos caras aqui. É por isso que tivemos a mensagem do Errol. Mas voltando aqui, eu tenho o posto para o método do formulário Vela. E agora aqui, onde você tem ação. Isto é muito, muito importante. Porque bem aqui, isso significa para PHP. O que exatamente deve acontecer quando um usuário clica enviar direito? Nervoso e ok, Vá entrar em contato conosco, formar o PHP e obter todo o tribunal de processamento necessário desde o dia. Isto aqui é agora o arquivo PHP em forma de contato dos EUA. Este é o pH real que poderíamos andar nos bastidores para produzir a forma e o conteúdo e fazer tudo o que é necessário. Então, o que exatamente está acontecendo aqui? Um par de coisas eram bastante coisas realmente eles Apenas atualizar esta página. Muito bem, agora deixa-me mostrar-te uma coisa se eu tentar enviar este formulário sem preencher o título, adivinha o que diz. A polícia preenche este campo mesmo que eu preencha o campo e eu diga olá e aperte “Enviar novo. Também diz que a polícia segue este campo também. Basicamente, dissemos ao Peter para confirmar que o descida preencheu todos os campos necessários . E como fazemos isso? Bem, nós fizemos isso aqui. Os credores orientam você através da inicial. Ah, começando. Então, aqui mesmo. Isso é apenas para confirmar que há realmente dados no formulário. E se não houver formulário, se não houver dados, basta dizer, Ei, não há dados postais. Isso é basicamente o que isso faz aqui. É aqui que começamos a confirmar que o usuário está realmente preenchendo os campos. Você tem esta função de filtro, filtrar, higienizar, string e-mail Estes tudo isso aqui é apenas para confirmar que o usuário está realmente preenchendo esses sentimentos corretamente e, em seguida, convidar aqui. Você pode ver que ele diz retornos preenchidos sempre mensagens. Basicamente, se o campo de nome não for campo ou a sensação de e-mail não estiver preenchida ou a sensação de tatuagem não estiver preenchida ou mesmo do campo de mensagem não estiver preenchido, mas sim na saída. Dispense, dizendo um ou mais. Os campos silenciosos estão vazios. Eu sei que isso parece complicado, mas é basicamente PHP. Não é assim tão complicado. Não se preocupe. E então aqui, se para alguém que não está aqui um usuário preencheu todos os campos, mas não preencheu os fiéis corretamente bem, ele vai dizer que o formato de e-mail está incorreto. Isso é exatamente o que esta função em particular está fazendo. E você pode ver isso se sim, basicamente é condição. É tudo condicional se o usuário preencheu os telefones. Mas infill dos fiéis corretamente saída essa mensagem, dizendo o e-mail do que está incorreto. Isso é exatamente o que todo este tribunal aqui está basicamente fazendo sua confirmação de que o usuário preencheu todos os campos corretamente. E se o usuário não emitiu uma mensagem do Evel, certo? Não, antes de eu continuar aqui, você tem nome, e-mail, e-mail, mensagem de título. É importante que você adicione uma nova variável aos campos de formulário. E foi exatamente o que eu fiz aqui. Se foi chamado o nome que você pode ver aqui mesmo sob o nosso nome de contato, temos nome igual a nome para e-mail. Temos nome é igual a e-mail e, em seguida, também para título. Temos nome igual a Titou. E, finalmente, para a mensagem, temos nome igual a mensagem. Para que Petri possa higienizar adequadamente cada um desses campos, eles precisam ter o nome disponível. Então, por favor, vou em frente e fazer isso. Não se esqueça de fazer isso. Voltando ao formulário de contato. Então aqui, basicamente, o que está acontecendo aqui. Isso está bem? Então, o que acontece se o usuário tiver preenchido velho? Ele se sente corretamente enviar o e-mail como que é basicamente o que isso faz. Escritor. Você tem o pedágio, e este é o endereço onde o e-mail será enviado para qualquer contato de será enviado para. Então você pode entrar agora e mudar isso para o e-mail apropriado aqui. Agora mesmo. Estamos criando a própria mensagem. Quando o e-mail é enviado, como será apresentado? Bem, nós temos o assunto. Certo, o valor do assunto. E, claro, aqui temos o nome e depois o título. Então, basicamente, quando recebemos o e-mail ou do formulário de contato, o título do e-mail terá o nome da pessoa também. Perguntado esse título Isso é basicamente o que essas linhas que o assunto irá produzir esta linha e, em seguida, a mensagem real fora do e-mail agora terá o nome da pessoa, o e-mail, o título e, em seguida, a mensagem. Isso é o que tudo isso faz. Você disse que este corte para trás e barra para trás e estes são como as quebras de linha para ser fora. Verifique se você não tem. HTML. Isso é apenas para garantir que cada um disso esteja em uma linha separada. Mas tudo isso aqui, mas apenas saídas nos valores de toda a saída do filtro envolvem o nome do e-mail título e , em seguida, mensagem. E então, é claro, seu e-mail tem que ter a cabeça como no lugar. Então, o chefe do filme será contato de impacto e aqui novamente. Você quer confirmar que este e-mail real aqui está correto? Eu defini o meu para ser exatamente o mesmo que eu disse isso para bem aqui e, em seguida, é claro, respondeu e depois o post e-mail. Portanto, queremos responder ao e-mail que foi preenchido no formulário de contato, que é onde temos nosso post e um e-mail aqui. Isso é exatamente o que esta linha faz. E então, é claro, você tem o Papai Noel chamadas de e-mail para assunto cabeça mensagem como basicamente, e esta é a função final para enviar o e-mail. Finalmente ritual, é claro, novamente terá as imagens. Foi enviada para o sujeito, essa mensagem. E, claro, a cabeça necessária disso é exatamente o que sua função pode fazer. E, finalmente, se o e-mail foi enviado com sucesso, Echo, Isso deve ter enviado uma mensagem de enviado com sucesso Obrigado ou então dizer que havia um Evel . A mensagem não nos foi enviada basicamente o quê? Este nosso último pedaço de código faz isso como eu disse, vou compartilhar o código com você, e você é mais do que bem-vindo para testá-lo. Experimente isso. E, hum, é basicamente isso. Então, se você tiver alguma dúvida sobre isso, me avise. Muito obrigado por assistir, e eu verei na próxima aula 107. Conclusão final: então isso vai se tornar oficial. É você, o fim deste curso em HTML e CSS e do fundo do meu coração llamado seguro Spanglish tanto. E espero que você aproveite completamente este curso e espero que você tenha aprendido o suficiente sobre HTML CSS e alguns dos projetos en PHP para construir belos, sites interativos responsivos. Se você gosta do curso, por favor, considere deixar os comentários comentários realmente ajudar. Meio também, por favor, passar talvez 30 segundos e apenas esperando. Se você dizer às pessoas o quanto você gostou do curso, tudo realmente, realmente apreciá-lo. E não se esqueça que estou no YouTube. Eu tenho um canal do YouTube a assinatura macaco Hit the bill para que você notificado sempre que eu carregar em você tutorial. E claro que também estou no Facebook. Aquele macaco online é a minha página. Junte-se ao grupo do Facebook. Se não o fez, é um ótimo lugar para interagir comigo e com outros alunos também. Mais uma vez, do fundo do meu coração. Muito obrigado por terminar o curso. E desejo-lhe as melhores felicidades em projectos de desenvolvimento na Europa. Olhe e eu falo com você da próxima vez. Tchau tchau