Ora cambiamo il colore del testo dell'H-1 e l'età 3 in questo momento è
che il colore di avvio di default scuro andrà qui e potremmo fare il colore bianco H-1 e il colore bianco H-3 e aggiornare.
E otteniamo il testo bianco proprio così.
Ma possiamo anche fare è combinare questi due perché sono identici e fanno H-1 virgola H-3 e
questo renderà entrambi quelli bianchi.
Ogni volta che abbiamo una virgola, seleziona solo gruppi diversi.
Quindi tutti i gemelli di tutte le età e sembra esattamente lo stesso.
Ma possiamo anche semplificarlo di più e assegnare tutto al corpo per essere di colore bianco.
E si potrebbe pensare che ci sarebbe un problema potrebbe cambiare o pulsante potrebbe cambiare o barra di navigazione, ma
ricorda che quelli sono più specifici.
Abbiamo classi di Bootstrap che lo fanno rispetto a queste sono semplicemente H-1 e H-3 non hanno
classi o ID e sono più facili da ignorare con i propri stili impostando il colore
del corpo sul bianco della H1 e l'età tre ereditò quel colore e anche tutto il resto lo fece.
E 'stato appena superato.
Quindi se ispezioniamo diciamo questo pulsante e diamo un'occhiata.
Quando lo selezioniamo e vedete che il colore è impostato su questo colore, è 3 3 3 secondo la classe Pulsante predefinito.
Ma se continuiamo a scorrere verso il basso, vedrai che il corpo proprio qui imposta il colore al bianco e
sembra proprio che venga cancellato.
Tutto ok.
Quindi, di nuovo, ha detto che entrambi erano bianchi.
Ora lavoriamo sulla dimensione del carattere.
Quindi sono H-1.
Vogliamo che venga piegato, al momento non lo è.
gli daremo un peso del font di 700 che è il modo in cui usiamo l'aggiornamento grassetto .
Quindi questo deve essere audace e voglio che sia 5 cm che è cinque
volte più grande di ricordare dell'elemento genitore, quindi selezioneremo ognuno di essi e
Puoi vederlo in grassetto.
Ora rendiamola anche più grande, quindi dimensione carattere 5 E-M.
Adesso torna e eccoci.
Quindi sembra più vicino.
Ora questo rapporto tra H1 e H-3 sembra esattamente lo stesso.
Non abbiamo bisogno di fare nulla per l'H-3, ora dobbiamo fare in modo che l'immagine si comporti come vogliamo noi.
E per far questo ti mostrerò qualcosa che non abbiamo mai visto prima.
Sposterò il buio sul lato destro e se ispezionerò l'elemento invecchiato o il corpo vedranno
che entrambi si fermano prima della fine della pagina.
Quindi, proprio qui.
Questa è la fine del mio documento.
Così quando dico alla mia immagine di coprire il corpo e ho detto che è la dimensione dello sfondo per coprire e la
posizione dello sfondo per essere centrata, prende in considerazione la dimensione del corpo e quando il corpo finisce proprio qui si comporta
in modo diverso.
Quello che faremo per risolvere questo problema è dare all'elemento HTL un'altezza del 100 percento che significa
occupare il 100 percento del contenitore che è solo l'intera finestra del documento.
Altezza maschile al 100% e torneremo indietro.
Facciamo ora a schermo intero e aggiorna.
E la nostra immagine funziona nel modo in cui ci aspettiamo e io mi ritiro.
E questo sembra buono anche a me.
Ora abbiamo due cose principali su cui concentrarsi.
Il primo è il H. R. È troppo largo perché noi dovremmo essere molto più piccoli.
E poi voglio anche concentrarmi sul carattere qui.
Bene, inizia a scegliere l'artwork e tutto ciò che vogliamo fare è dargli un valore di 400 pixel.
Quindi nelle nostre Cs selezioneremo h fatelo in fondo con 400 pixel.
Eccoci.
Un'altra cosa che farò è
un po 'subdolo che potresti non aver notato visto che ho intenzione di entrare e dargli una Forder in cima.
Un pixel solido.
Quindi hanno un colore qui che è f 8 8 8.
E poi anche un bordo inferiore che è un pixel solido e questo sarà un colore trasparente.
Zero zero zero punto zero due.
Quindi questo non gli darà l'effetto di un'ombra.
Quindi fai attenzione.
È davvero difficile da vedere.
Non so nemmeno se catturerò il
cast dello schermo, ma quello che abbiamo è un bordo e poi proprio sotto il bordo una
linea grigio chiaro che fa sembrare che ci sia una leggera ombra che si mostra un po 'meglio sul colori più chiari.
OK.
Quindi
non puoi vederlo abbastanza se credimi o puoi eliminare l'immagine di sfondo e sarà più facile vederla anche lì.
Quindi concentriamoci sulle icone per le quali ho usato il divertimento fantastico.
Quindi l'ho aperto.
Divertimento.
Eccezionale.
Lo so.
E avremo anche il CD qui.
Se fai clic su Inizia, c'è una CDN che potresti copiare lì.
Mettilo nella nostra applicazione e
anche solo salvalo e poi daremo un'occhiata alle icone reali.
E il primo che sappiamo che abbiamo usato è un PA.
E per fare tutto ciò di cui abbiamo bisogno sono ECO di alta classe F A F A dash PA.
Così l'ho messo dentro il bottone.
Quindi se andiamo al pulsante giusto prima di iniziare l'ho aggiunto.
Ora, se torniamo indietro e aggiorniamo, possiamo vedere se abbiamo un piccolo pulsante lì
e abbiamo una stampa palmare, quindi qui abbiamo due icone per iscriverti e accedere.
E quei due ricordo quello che sono.
Lo farò qui accanto per iscriverti dopo aver scritto sappiamo di voler aggiungere un'altra icona.
Tranne che questa classe temporale non è F-8 PA ma F. UN. dash dash utente Plus che ci dà quell'icona con il segno più e il login è
la stessa cosa senza il vantaggio.
Quindi un utente dash e abbiamo queste due icone.
C'è un'altra cosa che ho fatto che potresti non aver notato quale è l'ombra del testo.
Quindi c'è un'ombra intorno a tutto il testo qui e lo vedo lì può vederlo qui.
È intorno all'H-1 e all'H-3 e l'ombra tecnica è qualcosa che possiamo impostare con l'ombra del trattino di testo SS.
E c'è un sacco di pezzi in esso.
Quindi puoi vedere qui siamo seduti con l'offset X l'offset y.
Quindi, quanto lontano dalle parole dovrebbe andare l'ombra.
Quindi stiamo anche impostando il raggio di quelle sfocature Quindi, in pratica, quanto dovrebbe essere spessa.
E poi il colore e l'ombra che sto usando sono un po 'complicati.
Ci sono molti pezzi quindi andrò e scriverò un pezzo alla volta nel file CSSA.
Quindi all'interno del content div aggiungerà il dash del testo e poi il primo farà.
Zero pixel 4 pixel 3 pixel e renderò davvero ovvio
iniziare rendendolo rosso e se aggiorno c'è l'ombra che stiamo aggiungendo prima.
Ora vai e aggiungi il secondo con
una virgola e il rientro un po 'e poi vogliamo 0 pixel 8 pixel 13 pixel e poi su arancione qui e dare un'occhiata a quello.
è arancione brillante e poi c'è una terza ombra che è 0 pixel che ricordano
questo primo numero è l'offset X e quindi l'offset y 18 pixel e poi 23
pixel è il raggio e noi rendi questo giallo e possiamo vedere che abbiamo l'ombra del titolo rosso brillante.
Potete vedere che abbiamo questo più sfocato sotto
E poi quello arancione che è un po 'più lontano.
E poi quello giallo che è molto più sfocato e molto più ampio.
Quindi vogliamo cambiare quei colori.
Non vogliamo lavorare con questo.
Quindi i colori sono un po 'meno eccitanti.
Il primo.
Zero zero zero zero 0. 4.
Il prossimo è molto simile invece di 0. 4 0. 1.
E poi un altro è anche 0. 1.
Quindi usando R. G. B-A stiamo solo impostando diverse sfumature di grigio.
E noi andiamo.
Molto meno eccitante, ma spero che tu possa ancora vederlo qui.
È molto più sottile ma aggiunge un po 'di profondità alla pagina.
Grande.
Quindi questo è tutto ciò che dobbiamo fare.
Lasciami tornare e avvolgere solo alcune cose.
Il punto principale che voglio sottolineare qui è che possiamo
utilizzare il bootstrap e fare affidamento su di esso, ma non stiamo facendo affidamento su tutti i suoi stili.
Quindi sì, abbiamo mantenuto la barra di navigazione
la stessa anche se nell'ultimo video ti ho mostrato come puoi cambiare il colore della barra di navigazione ma abbiamo cambiato i caratteri che abbiamo aggiunto alle immagini di sfondo.
Quindi usiamo solo il bootstrap come base sottostante e quindi
aggiungiamo tutti gli stili in cima e non ci sono voluti molto.
Ma penso che abbiamo creato qualcosa che sembra relativamente rispettabile con solo poche righe di codice.
E siamo onesti, la metà di tutto il grasso questo testo Shadowline proprio lì.
Eccezionale.
Quindi abbiamo reso il sito relativamente buono.
Abbiamo finito con il bootstrap per ora.
Passeremo quindi a Javascript nella prossima unità che è davvero eccitante.
Ci allontaneremo dalla creazione di siti e cose che
sembrano belle per un po 'solo per poterci concentrare esclusivamente su Javascript.
cose che non sono solo belle.
Ma poi riporteremo tutto insieme e realizzeremo dei bellissimi siti che fanno
Quindi questo sta arrivando presto si spera che il bootstrap abbia goduto di questa unità.
E come sempre ti consiglio di scaricare il codice se hai qualche domanda.
È nella descrizione di questo video.
Bene, vedrò la prossima unità