Então, em seguida, vamos continuar e simplesmente duplicar essa marcação, o que é tudo o que fiz aqui.
Eu usei palavras ligeiramente diferentes com um bacon ipsum ligeiramente diferente entre esses parágrafos.
Então, vou copiar esses dois para o h t m l Mas, novamente, esse não é o foco aqui.
Então, o que queremos novamente, certifique-se de que vamos apenas pegar isso do zero, então é div divisão igual a postagens.
E alguns de vocês podem estar se perguntando por que eu mesmo incomodava colocar div um div com a classe igual a postagem
em torno de tudo.
Isso funcionaria bem sem isso.
Realmente é apenas sobre agrupar as coisas.
Preferiria ter uma bagunça gigante onde uma postagem de blog sangrava para outra.
Eu gosto de ter coisas contidas um pouco para que eu saiba que este é um post e ele termina
aqui, então é mais sobre a minha opinião mantendo o código um pouco limpo.
Então, queríamos ter uma div chamada data ou data clássica e essa data é 11 de dezembro de 2015.
Salve isso.
Então nós tivemos um H2 e aquele H-2.
Este é outro artigo que é outro artigo terrível.
Não recomendo que você leia.
É apenas sobre bacon.
Então, eu vou seguir em frente e copiar esta citação novamente.
O que é um parágrafo.
A classe é igual à citação que cola que em.
E então temos mais dois parágrafos aqui.
Um e, finalmente, o último bit de marcação que precisamos.
O segundo parágrafo.
Aqui vamos nós.
Então vamos ver como isso parece.
Então, uma coisa que percebo é que temos um pouco menos espaçamento entre as postagens aqui.
Então, este apenas se depara com isso.
A data de 11 de dezembro, definitivamente queremos um pouco de espaçamento, como podemos ver na parte esquerda do que
poderia ser porque o HRR que estamos perdendo.
Embora eu pense que o que precisamos fazer é apenas adicionar alguma margem entre as postagens do blog.
Então vamos começar por fazer isso entrar.
Então, na verdade, não vimos realmente o elemento H R na prática.
É muito simples de usar apenas parece assim.
Na verdade, o fechamento automático não leva nada é que ele não possui nenhuma tag de fechamento ou
qualquer conteúdo interno apenas uma regra horizontal de caracteres.
Se atualizarmos o que você verá.
Então, isso nos dá essa linha em curso e isso normalmente está bem.
A maioria das pessoas gosta de modelar isso um pouco, então esse é realmente fraco.
Eu não sei se você pode dizer, mas é basicamente ficando um pouco mais grosso e depois arrastando
as bordas e há alguns recursos excelentes e coisas on-line que você pode usar para modelar qualquer char.
E a razão pela qual eles adicionaram isso aqui é que eu queria forçá-lo a procurar algo e a
tentar encontrar alguns estilos que você não escreveu.
Então vou mostrar-lhe exatamente o que eu faria para encontrar alguns estilos de H R.
Gostaria apenas do estilo HD do Google e ver o que recebemos.
E você pode ver que eu realmente clique em dois deles antes.
Então nós temos estilos simples para cada frascos e você pode ver algumas opções aqui.
Então eles acham que é esse o que eu fui aqui.
Mas vamos tentar um como este.
Clique no código e tudo o que temos a fazer é copiá-los.
Estes são dois estilos e copiem isso e não o fazemos.
Eu não quero pensar que você precisa entender todas as linhas aqui, porque esta é algumas coisas que são
bastante avançadas e tipo de hacke, como você pode ver, esta pessoa diz.
Não é realmente suposto funcionar, mas a única coisa que queremos fazer é garantir que estes
vão selecionar nossa H R e então o que isso está fazendo é deixar HRO com a classe de estilo 7 que
não temos.
ver o que isso parece.
Então, vamos selecionar um char e vamos
Recarregue a página.
Ok, então vamos lá.
Então eu pessoalmente não me importo com esse.
Eu vou usar este aqui, esse tipo de trilhas.
Sinta-se livre para fazer o que quiser e brincar com ele.
Mas, novamente, o ponto era que eu queria que você tentasse encontrar algo externo que você não escreveu e eu
quero mostrar que é totalmente bom fazer isso.
Então estou apenas copiando isso.
Não escrevi isso.
Preciso se livrar desses estilos aqui e colocar isso dentro.
Então, tudo o que eles estão fazendo é parecer que eles estão definindo uma borda no HRO, então sem altura de borda que é apenas um pixel e,
em seguida, essa imagem de plano de fundo que é um gradiente.
E assim é como eles conseguem esse efeito de gradiente.
Então, se atualizarmos Agora você vai.
Nós temos esse efeito de gradiente agradável aqui e se nós quiséssemos.
Eu realmente prefiro esse, então eu vou seguir em frente e manter esse.
Por cima disto.
Eu posso mudar a cor um pouco para que seja um cinza mais claro, mas vamos manter isso por enquanto.
Mas ainda temos esse problema que é nosso nosso próximo post do blog está começando muito cedo
e precisamos adicionar algum espaço lá.
Então, tudo o que precisamos fazer é adicionar um pouco de margem.
Então, esta é realmente uma boa coincidência que temos esse wrapper de post do blog em todas as postagens, porque podemos apenas
adicionar uma margem para o final de cada postagem para que isso acrescente espaço aqui.
Então, tudo o que precisamos fazer é selecionar.
Deixe-me mostrar-lhe o post da classe.
Essa é uma publicação.
Então, vamos apenas aqui.
É como margem de postagem e vamos fazer 20 pixels e não apenas margem.
Vamos apenas fazê-lo no fundo, então só março e fundo se refrescam e isso está bastante próximo.
que temos um pouco mais de espaço aqui do que fazemos aqui e isso é porque isso ou aquilo
que adicionamos é realmente fora da classe de postagem, de modo que não está sendo afetada por essa margem que nós adicionamos.
Então, o último pequeno problema aqui é
Então, se fizéssemos, apenas movemos o A char.
Onde fica isso.
Aqui vamos para o final do post e estamos frescos.
Você pode ver se conseguimos o espaçamento que nós queremos.
Ok, então, se nós quiséssemos experimentar e obter esse exato, só retornaríamos a esse H. R. estilos e tente alguns
dos outros.
Mas o que eu realmente quero mostrar novamente é que podemos incorporar outros estilos.
Nós realmente não precisamos saber exatamente como eles funcionam, embora seja uma boa idéia ter curiosidade
e tentar descobrir isso.
Então, espero que você tenha gostado de fazer este projeto para um simples e mínimo blog simples e por enquanto.
Obviamente, na verdade, ele não funciona como um blog.
Não há comentários que não podemos adicionar em uma nova postagem com qualquer tipo de interface.
mesmos, mas quando chegamos ao javascript e quando, em particular, chegamos ao back-end e temos um banco de dados
e temos um servidor indo em um framework chamado Express nós realmente vamos levar esse blog e transformá-lo em
um blog real onde podemos adicionar uma postagem usando um formulário que podemos comentar e podemos fazer outras coisas como votação.
Nós temos que realmente editar o envelhecer para fora de nós
Então isso vai ser realmente emocionante.
Vamos usar isso, avaliá-lo.
É relativamente bom procurar relativamente poucas linhas.
OK, vou vê-lo quando cobrimos o javascript