OK quindi andiamo avanti e creare questo blog da zero.
Quindi sentiti libero di seguire qui.
Ho intenzione di passare dalla creazione di un nuovo file fino alla fine di questo blog qui.
Quindi la prima cosa che vorremmo fare.
Continuerò a mantenere aperta la soluzione solo per poterla fare riferimento e accertarmi di avere colori corretti
e dimensioni dei caratteri.
è ottenere i nostri file impostati in modo da avere due file su un blog che HMO e non
ha nulla al suo interno, tranne il blog del titolo ed è collegato a un foglio di stile chiamato Blog Dotsie SS Quello è vuoto .
Ma la prima cosa che vogliamo davvero
Quindi questo è solo tu che conosci i due file di cui avremo bisogno.
E ora andiamo avanti e riempiteli.
Quindi dobbiamo decidere quando fare qualcosa del genere.
Da dove iniziamo
E penso che la soluzione migliore sia iniziare con alcuni di questi markup nella nostra epoca G-mail e disegnare alcuni di essi,
ma non dobbiamo ottenere tutto ciò che è la parola perfetta prima ancora che si realizzino le cose.
Quindi vorrei iniziare mettendo un paragrafo o due e una di queste intestazioni nel nostro corpo.
E per fare questo questo è il testo di Lorem Ipsum ad eccezione del bacon ipsum che è solo aggiungere bacon ipsum dot com.
Clicca su dammi pancetta e copia semplicemente uno dei paragrafi.
Userò solo quello che ho qui, ma le parole non sono così importanti purché siano parole lì.
Quindi se vuoi usare bacon ipsum vai avanti.
Ma se non lo fai, se ti opponi al bacon puoi scegliere qualsiasi altro ipsum o semplicemente inventare le tue parole
o mettere il tuo post sul tuo blog.
Sarebbe l'ideale.
dei titoli qui e una nota potrebbe aver senso renderli entrambi un H1.
E poi inserirò anche solo uno
Ma generalmente la regola è che vuoi avere un H-1 sulla pagina che dovrebbe essere la cosa più grande
della tua pagina.
Quindi, poiché abbiamo più di ciascuno sono più titoli qui più titoli di articoli.
Ho intenzione di andare con H-2 ma alla fine della giornata non ha importanza perché stiamo andando a stile tutto
ciò che stiamo andando a cambiare la dimensione del carattere che stiamo andando a cambiare il il
colore e tutte le cose che sarebbero state impostate rendendolo un H1 contro natura a quelle differenze saranno comunque eliminate.
dirò solo che questo è il mio primo articolo, non il titolo più creativo, ma salvarlo.
Quindi andrò con H-2 e
E vediamo solo l'anteprima per iniziare.
Quindi aprilo.
OK.
Quindi c'è il nostro blog finora.
Quindi abbiamo un sacco di decisioni da prendere.
Il primo posto che potrei iniziare è ottenere che questo corpo abbia questo confine.
Quindi ho fornito i colori nell'ultimo video.
Sto solo andando a copiare questo colore qui e ho intenzione di dare il corpo dell'acqua, quindi
selezionerò il corpo e quindi tutto ciò che dobbiamo fare è dire confine ed è di 20 pixel in tinta unita questo colore grigio.
E diamo un'occhiata.
OK.
Quindi non sembra proprio il modo in cui vorremmo che guardasse, ma è lì che abbiamo il confine.
Facciamo a grandezza naturale in modo che possiamo davvero confrontare.
Quindi un'altra cosa che noterete è che il nostro confine è un problema che va
avanti fino a quando l'intero corpo occupa l'intera pagina.
Contro qui il corpo occupa solo una parte della pagina.
E poi c'è spazio su entrambi i lati.
Poi c'è anche la spaziatura all'interno che non abbiamo perché le nostre parole nel nostro testo vanno
dritte contro il confine.
Iniziamo risolvendo il problema e risolvendolo.
Certo che hai bisogno di imbottitura.
Quindi questo è un riempimento di 20 pixel su tutti i lati.
Puoi vedere che c'è del padding in basso, a sinistra e a destra.
Quindi nel corpo assegneremo il riempimento di 20 pixel su tutti e quattro i lati e otteniamo questo OK.
Quindi questo è un po 'più vicino.
La prossima cosa su cui dovremmo lavorare è ottenere la larghezza corretta e non
è solo questione di ottenere la larghezza delle dimensioni corrette quando è a schermo intero, ma anche quando si restringe vedrete che rimane
di 700 pixel rimane a 700 pixel per un po 'e poi si restringe, si restringe e si ridimensiona.
Quindi vogliamo essere sicuri che possiamo farlo accadere.
Quindi useremo un po 'di trucco.
E poi l'altra cosa che vuoi fare è assicurarti che sia centrato proprio adesso.
Beh, non possiamo davvero dirlo.
Ma non è centrato sarà sul lato sinistro.
Quindi andiamo avanti e aggiungere prima l'interno.
Quindi diciamo con 700 pixel e risparmia e questo è quello di cui stavo parlando a sinistra e vogliamo centrare nel mezzo
e per farlo possiamo usare l'auto o il trucco automatico del margine di cui
avevo parlato nella casella modello video.
Quindi stabiliremo un margine e useremo solo la scorciatoia.
Quindi faremo zero pixel in alto e in basso e quindi Otto a sinistra ea destra.
Ricorda quando facciamo solo due qui anziché quattro.
Questo è alto e basso e questo è a destra ea sinistra.
In tal modo, la centriamo automaticamente per noi, ma poi noterai dandogli un valore zero in alto e in basso
ora è proprio in alto.
E questo qui non lo è.
Abbiamo un po 'di spazio.
Ci sono 20 pixel proprio lì.
Quindi questa è una soluzione semplice.
Solo la stessa linea cambia di nuovo a 20 P x.
Abbiamo bisogno della x
Non l'abbiamo fatto perché quando è zero puoi lasciarlo a zero.
Ma quando c'è un numero abbiamo bisogno del prossimo.
OK, quindi sembra abbastanza vicino.
L'unica cosa è che, mentre riduciamo, vogliamo che rimanga 700 pixel finché non può più dire 700 pixel.
E vogliamo che si riduca ed è abbastanza facile farlo che in realtà
tutto ciò che vogliamo fare è cambiarlo in larghezza massima e poi assegnarlo con una percentuale.
E ciò che dice è renderlo 80 percento quando è necessario.
Ma al massimo farlo 700 pixel.
Quindi ti mostrerò come appare quando aggiorni.
Nulla cambia perché viene aggiunto a un massimo di settecento pixel, quindi controlla se l'80 percento sarebbe più di
700 pixel, cosa che sarebbe in questo caso.
Quindi rimane a 700 rimane ancora a 700 fino a qui proprio dove inizia a ridursi.
Ecco dove l'80 percento ora è inferiore a 700 pixel.
OK.
Quindi ora abbiamo il nostro corpo di base istituito.
La prossima cosa che mi piacerebbe fare qui è far andare la nostra puttana.
Quindi, di nuovo, se andiamo alle note che ho dall'ultimo video, il font è chiamato Source sense pro.
Quindi andiamo avanti e andare su Google phos e cercare la fonte invia Pro.
Quindi l'ho aperto qui, ma ancora una volta sono solo i caratteri di Google con la barra delle lettere
e basta fare una ricerca per una fonte che manda pro proprio qui, aggiungi alla raccolta.
E ora abbiamo una scelta che i pesi dei font vogliamo.
detto questo nel video originale, ma questo è solo il normale carattere del font del peso 400.
E in realtà non ti ho
E questo è un peso più pesante.
È piegato.
Quindi vogliamo entrambi.
Così normale in grassetto 400 700 e basta.
Andiamo qui e copia questo link.
Ora possiamo sbarazzarci dei caratteri Google e andremo al nostro HMO e incolleremo il link.
E ora abbiamo la possibilità di usare il senso della fonte.
Quindi assegniamolo a entrambi i paragrafi e ai due anni e vogliamo anche che sia in queste date.
Quindi quello che potremmo fare è selezionare il paragrafo e dire font fonte source sense pro e potremmo fare la
stessa cosa per H-1.
Ma questo non è un buon uso del nostro successo.
Il nostro codice sarà un po 'ripetitivo ogni elemento su cui vogliamo usarlo.
Dovremmo andare e aggiungere questo in
Quindi ciò che facciamo è semplicemente applicarlo al corpo.
E giocando nel corpo ogni cosa al suo interno la erediterà.
Quindi, fonte della famiglia di font e pro e salva l'aggiornamento e ci andiamo sempre con H-1 o H-2 e
abbiamo un paragrafo.
Quindi sembra abbastanza buono finora.