Alors, maintenant, allons-y et doublez ce balisage qui est tout ce que j'ai fait ici.
J'ai utilisé des mots légèrement différents légèrement différents bacon ipsum entre ces paragraphes.
Donc je vais juste copier ces deux plus dans le h t m l Mais là encore, ce n'est pas l'accent ici.
Donc, ce que nous voulons à nouveau assurez-vous que nous allons prendre ce à partir de zéro, donc c'est div classe égale postes.
Et certains d'entre vous pourrait se demander pourquoi j'ai même pris la peine de mettre div un div avec classe égale post autour de tout.
Cela fonctionnerait bien sans cela.
Il s'agit vraiment de regrouper les choses ensemble.
Je préférerais avoir un énorme gâchis où un blog saigne dans un autre.
J'aime avoir des choses contenues un peu pour que je sais que c'est un poste et il se termine ici, donc c'est plus juste à mon avis garder le code un peu propre.
Donc nous voulions avoir une date nommée date ou date classique et cette date est le 11 décembre 2015.
Sauf que.
Ensuite, nous avons eu un H2 et que H-2.
C'est un autre article qui est un autre article terrible.
Ne recommandez pas de le lire.
C'est juste du bacon.
Je vais donc aller de l'avant et copier cette citation à nouveau.
C'est un paragraphe.
La classe est égale à citer la pâte qui dans.
Et puis nous avons deux autres paragraphes ici.
Un et enfin le dernier bit de balisage dont nous avons besoin.
Le deuxième paragraphe.
Voilà.
Alors voyons comment cela ressemble.
Donc, une chose que je remarque, c'est que nous avons un peu moins d'espace entre les messages ici.
Donc, celui-ci se heurte à cela.
La date du 11 décembre, nous voulons certainement un peu d'espacement, comme nous pouvons le voir dans la partie gauche de ce pourrait être parce que le HRR que nous manquons.
Bien que je pense que ce que nous devons faire est juste ajouter dans une certaine marge entre les messages de blog.
Commençons donc par obtenir ce h r in.
Nous n'avons donc pas vraiment vu l'élément H R vraiment dans la pratique.
C'est très simple à utiliser ressemble à ceci.
C'est réellement auto-fermeture ne prend rien, c'est qu'il n'a pas de balise de fermeture ou tout contenu interne juste une règle horizontale char.
Si nous rafraîchissons ce que vous verrez.
Donc, cela nous donne cette ligne qui traverse et qui ordinairement est très bien.
La plupart des gens mais comme style de ces un peu de sorte que celui-ci est vraiment faible.
Je ne sais pas si vous pouvez le dire, mais il est fondamentalement obtenir un peu plus épais et puis à traîner sur les bords et il ya quelques grandes ressources et des choses en ligne que vous pouvez utiliser pour le style tout char.
Et la raison pour laquelle ils ont ajouté ceci ici est que je voulais vous forcer à chercher quelque chose et à essayer de trouver des styles que vous n'avez pas écrit vous-même.
Donc, je vais vous montrer exactement ce que je ferais pour trouver des styles H R.
Je voudrais juste Google HDR style et voir ce que nous obtenons.
Et vous pouvez voir que j'ai effectivement cliqué sur deux d'entre eux avant.
Donc, nous avons des styles simples pour chaque pot et vous pouvez voir qu'il ya quelques options ici.
Donc, ils pensent que c'est celui avec lequel je suis allé ici.
Mais essayons juste un comme ceci.
Cliquez sur le code et tout ce que nous avons à faire est de les copier.
Ce sont deux styles et copier ce vers le bas et nous n'avons pas.
Je ne veux pas penser que vous avez besoin de comprendre chaque ligne ici parce que c'est quelque chose qui est assez avancé et genre de hacky que vous pouvez voir cette personne dit.
Pas vraiment censé travailler, mais la seule chose que nous voulons faire est de s'assurer que ceux-ci vont être de sélectionner notre H R et donc ce que c'est de faire est de laisser HRO avec la classe de style 7 que nous n'avons pas.
Alors choisissons un char et voyons ce que cela ressemble.
Actualisez la page.
OK, nous y allons.
Donc, personnellement, je ne me soucie pas de celui-là.
Je vais utiliser celui-ci ici ce genre de sentiers off.
N'hésitez pas à faire ce que vous voulez et jouez avec.
Mais encore une fois, le fait est que je voulais que vous essayiez de trouver quelque chose d'externe que vous n'écriviez pas et je voulais vous montrer que c'est parfaitement bien de le faire.
Je ne fais que copier ça.
Je n'ai pas écrit ça.
Besoin de se débarrasser de ces styles ici et mettre cela en.
Donc, tout ce qu'ils font, c'est qu'ils semblent fixer une bordure sur le HRO, donc pas de hauteur de bordure qui est juste un pixel, puis cette image de fond qui est un gradient.
Et c'est ainsi qu'ils obtiennent cet effet de gradient.
Donc, si nous rafraîchissons Maintenant, vous y allez.
Nous avons ce beau gradient effet ici et si nous voulions.
En fait, je préfère celui-ci donc je vais juste aller de l'avant et garder celui-ci.
Sur ceci.
Je pourrais changer la couleur un peu de sorte qu'il est un gris plus clair, mais gardons cela pour l'instant.
Mais nous avons encore ce problème qui est notre prochain post blog commence trop tôt et nous avons besoin d'ajouter un peu d'espace là-bas.
Donc, tout ce que nous devons faire, c'est ajouter un peu d'une marge.
Donc, c'est vraiment une belle coïncidence que nous avons ce blog post wrapper autour de chaque poste, car nous pouvons simplement ajouter une marge au bas de chaque poste de sorte que va ajouter de l'espace ici.
Donc, tout ce que nous devons faire est de sélectionner.
Permettez-moi de vous montrer le poste de classe.
C'est un poste.
Alors nous allons juste ici.
C'est comme la marge poste et faisons 20 pixels et pas seulement la marge.
Faisons-le juste sur le bas donc seulement Mars et le fond rafraîchir et qui est à la recherche assez proche.
Donc, le dernier petit problème ici est que nous avons un peu plus d'espace ici que nous le faisons ici et c'est parce que ce ou que nous avons ajouté est en fait en dehors de la classe post donc il n'est pas affecté par cette marge que nous avons ajouté.
Donc, si nous faisions cela, nous déplaçons simplement l'A char.
Où est-ce.
Ici nous allons au fond de la poste et nous sommes frais.
Vous pouvez voir si nous obtenons l'espacement que nous voulons.
OK, donc si nous voulions expérimenter et obtenir cet exact, nous allons revenir à ce H.R. styles et essayer certains des autres.
Mais ce que je veux vraiment montrer à nouveau, c'est que nous pouvons incorporer d'autres styles.
Nous n'avons pas vraiment à savoir exactement comment ils fonctionnent bien que c'est une bonne idée d'être curieux et d'essayer de comprendre.
Alors j'espère que vous avez aimé faire de ce projet à nice simple minimal blog et pour l'instant.
Évidemment, il ne fonctionne pas réellement comme un blog.
Il n'y a aucun commentaire que nous ne puissions ajouter dans un nouveau message avec n'importe quel type d'interface.
Nous devons réellement modifier le vieilli lui hors de nous-mêmes, mais quand nous arrivons à javascript et quand en particulier et nous arrivons à l'extrémité arrière et nous avons une base de données et nous avons un serveur allant dans un cadre appelé Express, nous allons réellement prendre ce blog Et de le transformer en un véritable blog où nous pouvons ajouter un post en utilisant un formulaire que nous pouvons commenter et nous pouvons faire d'autres choses comme voter.
Ce sera donc vraiment excitant.
Nous allons l'utiliser pour l'évaluer.
Il est relativement agréable de chercher relativement peu de lignes.