Dus de volgende up laten gaan en gewoon dupliceren dit markup dat is alles wat ik hier deed.
Ik heb gebruikt iets andere woorden iets anders bacon ipsum tussen deze paragrafen.
Dus ik zal gewoon deze twee meer dan kopiëren in de h t m l Maar nogmaals, dat is niet de focus hier.
Dus wat we willen weer zorg ervoor dat laten we dit gewoon vanaf nul, dus het is div class is gelijk aan berichten.
En sommigen van u misschien wel af waarom ik eens de moeite genomen te zetten div een div met klasse evenaart record rond alles.
Dit zou prima werken zonder dat.
Het is echt alleen over het bundelen van de dingen.
Ik zou liever dan het hebben van een gigantische puinhoop waar men blog post bloedt in een andere.
Ik willen hebben dingen doen, die een klein beetje, zodat ik weet dat dit een post en het eindigt hier, dus het is meer zo ongeveer in mijn mening het houden van de code een beetje schoon.
Dus dan wilden we een div genaamd datum of klassieke datum te hebben en die datum is 11 december 2015.
Behalve dat.
Dan hadden we een H2 en dat H-2.
Dit is een ander artikel dat een ander artikel verschrikkelijk.
Niet aan te raden dat je het leest.
Het is zowat spek.
Dus ik ga gewoon verder te gaan en opnieuw te kopiëren dit citaat.
Dat is een paragraaf.
Klasse evenaart citaat pasta die in.
En dan hebben we nog twee alinea's hier.
Eén en tenslotte het laatste beetje markup die we nodig hebben.
De tweede paragraaf.
Daar gaan we.
Dus laten we eens kijken hoe dit eruit ziet.
Dus een ding dat ik ben te merken is dat we een beetje minder ruimte tussen de berichten hier.
Dus dit een net loopt in deze.
De datum 11 december willen wij zeker een beetje afstand er zoals we kunnen zien in het linker deel van die zou kunnen zijn omdat de HRR die we missen.
Hoewel ik denk dat wat we moeten doen is gewoon toe te voegen in een aantal marge tussen de blog posts.
Dus laten we beginnen met het verkrijgen van deze h r in.
Dus we hebben niet echt gezien de H R element echt in de praktijk.
Het is een zeer eenvoudig te gebruiken net ziet er zo uit.
Het is eigenlijk zelfsluitende niets het is het geen afsluitende tag of een innerlijke inhoud slechts een char horizontale lijn moest doen.
Als we vernieuwen wat je zult zien.
Dus dat geeft ons deze lijn over te gaan en die normaal is prima.
De meeste mensen wel graag stijl die een beetje dus dit is echt zwak.
Ik weet niet of u kunt vertellen, maar het is eigenlijk een beetje dikker en vervolgens achterstand op de randen en er zijn enkele grote middelen en dingen op de lijn die je kunt gebruiken om elke char stylen.
En de reden dat ze deze toegevoegde in hier is dat ik wilde je dwingen om iets op te kijken en om te proberen om een ​​aantal stijlen die je niet zelf hebt moeten noteren.
Dus ik ga u precies laten zien wat ik zou doen om een ​​aantal H R stijlen.
Ik zou alleen Google HDR stijl en zien wat we krijgen.
En je kunt zien dat ik heb eigenlijk klikte op twee van hen voor.
Dus we hebben eenvoudige stijlen gekregen voor elke potten en je kunt zien dat er een paar opties hier.
Dus ze denken dat dit is degene die ik ging met hier.
Maar laten we proberen een als deze.
Klik op de code en alles wat we moeten doen is te kopiëren deze.
Dit zijn twee stijlen en kopieer deze naar beneden en wij niet.
Ik wil niet te denken dat je nodig hebt om elke regel te begrijpen hier, want dit is een aantal dingen dat is vrij geavanceerde en soort hacky zoals je kunt zien deze persoon zegt.
Niet echt geacht te werken maar wel het enige dat we willen doen is ervoor zorgen dat deze zullen worden gekozen voor onze H R en dus wat dit doet is laten HRO met klasse van stijl 7, die we niet hebben.
Dus laten we kiezen gewoon een char en laten we zien hoe dit eruit ziet.
Ververs de pagina.
OK dus daar gaan we.
Dus ik persoonlijk niet schelen voor die ene.
Ik ga naar deze ene hier dat soort paden af ​​te gebruiken.
Voel je vrij om te doen wat je wilt en te spelen rond met het.
Maar nogmaals, het punt was dat ik wilde dat je om te proberen iets externe dat je niet schrijven vinden en ik wil je laten zien dat het helemaal prima om dat te doen.
Dus ik ben gewoon het kopiëren van deze in.
Ik heb dit niet schrijven.
Noodzaak om zich te ontdoen van deze stijlen hier en zet deze in.
Dus alles wat ze doen is ziet het lijkt erop dat ze het instellen van een grens aan de HRO dus geen grens hoogte, die vervolgens wordt dit beeld De achtergrond die een gradiënt slechts één pixel en.
En dus dat is hoe ze dat gradient effect te krijgen.
Dus als we frissen er nu ga je.
We hebben dit mooie gradiënt effect hier en als we wilden.
Ik eigenlijk liever dit, dus ik ga gewoon door te gaan en houdt deze.
Over dit.
Ik zou de kleur te veranderen een beetje, zodat het een lichter grijs, maar laten we gewoon houden dat voor nu.
Maar we hebben nog steeds dit probleem, dat is ons onze volgende blog post begint te snel en we moeten wat ruimte er toe te voegen.
Dus alles wat we moeten doen is voeg een beetje een marge.
Dus dit is eigenlijk een mooi een mooi toeval dat we deze blogpost wrapper rond elk bericht omdat we een marge kan het gewoon toe te voegen aan de onderkant van elke post, zodat de ruimte hier zal toevoegen.
Dus alles wat we moeten doen is kiezen.
Laat ik je gewoon de class post.
Dat is een record.
Dus dan zijn we gewoon hier te gaan.
Het is net na de marge en laten we het doen 20 pixels en niet alleen marge.
Laten we het gewoon doen op de bodem, zodat alleen maart en bottom vernieuwen en dat op zoek is aardig in de buurt.
Dus de laatste klein probleem hier is dat we hebben een beetje meer ruimte hier dan we hier doen en dat komt omdat dit of dat we hebben toegevoegd is eigenlijk buiten de post klasse, dus het is niet te worden beïnvloed door die marge die we toegevoegd.
Dus als we dat deden we gewoon bewegen de A char.
Waar is dat.
Daar gaan we naar de bodem van de post en we zijn vers.
U kunt zien of we de afstand die we willen krijgen.
OK dus als we wilden experimenteren en krijgen exact dit zouden we gewoon terug naar die H.R. stijlen en probeer een aantal van de andere.
Maar wat ik echt wil opnieuw tonen is dat we andere stijlen kunnen nemen in.
We hebben niet echt precies weten hoe ze werken, hoewel het een goed idee om nieuwsgierig te zijn en om te proberen het uit.
Dus hopelijk je genoten hebt van het maken van dit project om mooie eenvoudige minimale blog en voor nu.
Uiteraard is het niet daadwerkelijk functioneert als een blog.
Er zijn geen opmerkingen die we kunnen niet in een nieuwe functie toe te voegen met een soort van interface.
We moeten eigenlijk bewerken het uit onszelf in de leeftijd hem, maar als we in javascript en wanneer in het bijzonder en we naar de back-end en we hebben een database en we hebben een server die in een kader genaamd Express we eigenlijk van plan om deze blog te nemen en zet hem in een echte blog waar we een post kunnen toevoegen met behulp van een formulier kunnen wij commentaar en kunnen we een aantal andere dingen te doen, zoals stemming.
Dus dat gaat echt spannend.
We gebruiken dit jou te evalueren het.
Het is vrij aardig op zoek naar relatief weinig regels.