Quindi il prossimo andiamo avanti e duplichiamo questo markup che è tutto ciò che ho fatto qui.
Ho usato parole leggermente diverse leggermente diverso pancetta ipsum tra questi paragrafi.
Quindi copierò questi due in h t m l Ma di nuovo non è il punto focale qui.
Quindi, cosa vogliamo di nuovo, assicuriamoci di prendere questo da zero, quindi la classe div è uguale a post.
E alcuni di voi potrebbero chiedersi perché mi sia anche preso il disturbo di mettere div div con post di pari
livello postare su tutto.
Funzionerebbe bene senza quello.
Si tratta davvero di raggruppare le cose insieme.
Preferirei avere un pasticcio gigante in cui un post sul blog sanguina in un altro.
Mi piace avere le cose contenute un po 'così che so che questo è un post e finisce qui, quindi
è più o meno a mio avviso mantenere il codice un po' pulito.
Quindi volevamo avere un div chiamato data o data classica e quella data è l'11 dicembre 2015.
Salvalo.
Poi abbiamo avuto un H2 e quell'H-2.
Questo è un altro articolo che è un altro terribile articolo.
Non raccomandare di leggerlo.
Si tratta solo di pancetta.
Quindi andrò avanti e copierò di nuovo questa citazione.
Che è un paragrafo
La classe equivale al preventivo dell'incollatura in.
E poi abbiamo altri due paragrafi qui.
Uno e infine l'ultimo bit di markup di cui abbiamo bisogno.
Il secondo paragrafo
Eccoci.
Quindi vediamo come appare.
Quindi una cosa che sto notando è che abbiamo un po 'meno spazio tra i post qui.
Quindi questo si imbatte in questo.
La data dell'11 dicembre vogliamo sicuramente una piccola spaziatura lì come possiamo vedere nella parte sinistra di quello
potrebbe essere perché la HRR che ci manca.
Anche se penso che quello che dobbiamo fare è aggiungere un po 'di margine tra i post del blog.
Quindi iniziamo facendo questo.
Quindi non abbiamo realmente visto l'elemento H R nella pratica.
È molto semplice da usare proprio come questo.
In realtà, l'auto-chiusura non prende nulla è non ha alcun tag di chiusura o qualsiasi contenuto
interno solo una regola orizzontale di char.
Se aggiorniamo ciò che vedrai.
Quindi questo ci dà questa linea e questo normalmente va bene.
Alla maggior parte delle persone piace però disegnarli un po ', quindi questo è veramente debole.
Non so se puoi dirlo, ma fondamentalmente si sta facendo un po 'più denso e poi si stacca sui
bordi e ci sono alcune grandi risorse e cose in linea che puoi usare per disegnare qualsiasi carattere.
E il motivo per cui hanno aggiunto questo qui è che volevo costringerti a cercare qualcosa e cercare di trovare
alcuni stili che non hai scritto tu stesso.
Quindi ti mostrerò esattamente cosa farei per trovare alcuni stili H R.
Vorrei solo lo stile di Google HDR e vedere cosa otteniamo.
E puoi vedere che in realtà ho cliccato su due di loro prima.
Quindi abbiamo stili semplici per ogni barattolo e puoi vedere che ci sono alcune opzioni qui.
Quindi pensano che sia quello con cui sono andato proprio qui.
Ma proviamo solo uno come questo.
Clicca sul codice e tutto ciò che dobbiamo fare è copiare questi.
Questi sono due stili e copiarlo e non lo facciamo.
Non voglio pensare che tu abbia bisogno di capire ogni riga qui perché questo è qualcosa di piuttosto
avanzato e di tipo hacky come puoi vedere questa persona dice.
Non dovrebbe funzionare, ma l'unica cosa che vogliamo fare è assicurarsi che questi stiano selezionando
la nostra H R e quindi ciò che sta facendo è far sì che HRO abbia una classe di stile 7
che non abbiamo.
solo come si presenta.
Quindi selezioniamo un carattere e vediamo
Ricarica la pagina.
OK, quindi andiamo.
Quindi personalmente non mi interessa per quello.
Userò questo qui quel tipo di scia.
Sentiti libero di fare quello che vuoi e divertirti.
Ma di nuovo il punto era che volevo che provassi e trovassi qualcosa di esterno che non hai scritto e
voglio mostrarti che è del tutto bello farlo.
Quindi sto solo copiando questo.
Non ho scritto questo.
Devi liberarti di questi stili qui e metterlo dentro
Quindi tutto quello che stanno facendo è che sembra che stiano impostando un bordo sull'HRO, quindi nessuna altezza del bordo che è solo un pixel
e quindi questa immagine di sfondo che è una sfumatura.
E così è così che ottengono quell'effetto sfumato.
Quindi se ci aggiorniamo ora eccoti.
Abbiamo questo gradevole effetto sfumato qui e se lo volessimo.
In realtà preferisco questo, quindi vado avanti e manterrò questo.
Oltre questo.
Potrei cambiare un po 'il colore in modo che sia un grigio più chiaro, ma continuiamo a tenerlo per ora.
Ma abbiamo ancora questo problema che è il nostro prossimo post sul blog che sta iniziando troppo presto e abbiamo bisogno
di aggiungere un po 'di spazio lì.
Quindi tutto ciò che dobbiamo fare è aggiungere un po 'di margine.
Quindi questa è in realtà una bella coincidenza che abbiamo questo post wrapper per blog in ogni post perché possiamo
aggiungere un margine alla fine di ogni post in modo da aggiungere spazio qui.
Quindi tutto ciò che dobbiamo fare è selezionare.
Lascia che ti mostri solo il post della classe.
Questo è un post.
Quindi andiamo qui.
È come il margine postale e facciamo 20 pixel e non solo margine.
Facciamolo sul fondo, quindi solo il mese di marzo e il fondo si aggiornano e sembra abbastanza vicino.
qui abbiamo uno spazio un po 'più grande di quello che facciamo qui ed è perché questo o quello
che abbiamo aggiunto è in realtà al di fuori della classe post, quindi non è influenzato da quel margine che abbiamo aggiunto.
Quindi l'ultimo piccolo problema qui è che
Quindi, se lo facessimo, sposteremo semplicemente il carattere A.
Dov'è.
Qui andiamo in fondo al post e siamo freschi.
Puoi vedere se otteniamo la spaziatura che vogliamo.
OK, quindi se volessimo sperimentare e ottenere quello esatto, torneremmo a quel punto H. R. stili e provare alcuni
degli altri.
Ma quello che voglio davvero mostrare di nuovo è che possiamo incorporare altri stili in.
Non dobbiamo sapere esattamente come funzionano, anche se è una buona idea essere curiosi
e cercare di capirlo.
Quindi spero che ti sia piaciuto realizzare questo progetto in un blog semplice e minimale e per ora.
Ovviamente non funziona come un blog.
Non ci sono commenti che non possiamo aggiungere in un nuovo post con alcun tipo di interfaccia.
a javascript e quando in particolare e arriviamo al back-end e abbiamo un database e abbiamo un server
che va in un framework chiamato Express, in realtà andremo a prendere questo blog e trasformarlo in un
vero blog in cui possiamo aggiungere un post utilizzando un modulo che possiamo commentare e possiamo fare altre cose come votare.
Dobbiamo effettivamente modificare il vecchio noi stessi, ma quando arriviamo
Quindi sarà davvero eccitante.
Lo useremo per valutarlo.
È relativamente bello cercando relativamente poche righe.
OK Ci vediamo quando copriamo javascript