Ben tornato.
Ora che abbiamo la funzionalità di base della nostra app To Do List, è giunto il momento per noi di concentrarci
su come farlo apparire così.
Quindi abbiamo decisamente un modo per andare.
E stiamo solo andando ad attaccare questo pezzo alla volta.
Proverò a farlo nell'ordine più logico possibile.
più grandi come i colori di sfondo e i caratteri, assicurandoci di avere il margine giusto e il riempimento
su questo grande contenitore qui e poi ci concentreremo su alcune delle cose più sfumate.
Inizieremo con alcuni dei pezzi
OK, iniziamo qui.
La prima cosa che faremo farò uno schermo intero.
Iniziamo spingendo questo verso il basso.
Questo è il nostro contenitore div.
Aggiungeremo un margine verso l'alto in modo da avere più spazio qui.
Quindi torneremo al nostro C S S e possiamo chiudere o javascript per ora.
Il nostro div ha un'idea di contenitore e poi andremo a selezionare quello che hai già fatto.
E piuttosto che un margine zero OTTO Beh, dai un centinaio di pixel in alto e in basso.
E ricorda che abbiamo bisogno della x se abbiamo zero non abbiamo bisogno di X, ma se abbiamo un numero che facciamo.
Diamo un'occhiata ora.
OK, adesso stanno iniziando nello stesso posto.
Hanno lo stesso margine lì.
La prossima cosa che faremo sarà aggiungere un colore di sfondo a questo contenitore che questo ha.
È un po 'difficile da vedere, ma quando elimino qualcosa viene visualizzato nella parte posteriore.
È di questo colore proprio qui.
Così di nuovo.
Quindi andremo avanti e aggiungeremo questo.
Quindi, invece del contenitore, diciamo bene lo sfondo e il colore.
Lo leggerò fuori è F 7 7 dopo 7.
Proprio così.
E vediamo come sembra.
OK.
Quindi abbiamo lo stesso colore grigio che abbiamo qui.
È lo stesso grigio chiaro.
La prossima cosa che faremo è lavorare al confine.
E questo in realtà non ha un confine.
Quello che ha è una leggera ombra di scatola.
Quindi non abbiamo ancora visto l'ombra della scatola.
Dimostrerò che qui ed entrerò in MT-NW ed è solo un modo di aggiungere un effetto ombra.
Quindi se scorro verso il basso puoi vedere qui alcune ombre di riquadri diverse e ne
avremo una molto leggera, ma se ti accorgi di questo, c'è una leggera ombra.
Quindi la sintassi e l'ombra che useremo eliminerà il nostro bordo è l'ombra del riquadro di casella 0 0 3 pixel
e quindi un colore e il nostro colore sarà fondamentalmente nero ma è R. G. E poi lo renderemo davvero davvero trasparente.
Quindi appena percettibile.
E se mi rinfresco.
Non abbiamo confini ora ma c'è una leggera ombra attorno a questo elemento.
OK.
Questo è tutto ciò che faremo al contenitore per ora.
Attacchiamo l'H-1.
Quindi questa voce qui.
Quindi è nella nostra epoca che ho appena considerato un H1.
Non ha un ID o altro e va bene.
Andiamo al file CSSA e iniziamo aggiungendo un colore di sfondo.
Quindi selezioneremo ciascuno e lo sfondo è un
colore che è 2 9 8 0 be 9 e verranno salvati e aggiornati e ora abbiamo la giusta tonalità di blu.
Quindi cambieremo anche il colore del carattere
in bianco e lo mostreremo rapidamente.
Tutto ok.
Avvicinandosi lentamente qui.
La prossima cosa che faremo è non dare alcun margine e ora ci libereremo di questo spazio che avevamo qui.
Come puoi vedere qui non c'è margine.
Questo è il nostro H-1.
C'è imbottitura qui.
Quindi il testo non va dritto contro il bordo come fa qui.
Ma non c'è margine all'esterno della scatola blu.
Questo è il nostro input di testo e che ha anche aumentato il padding, ma non c'è alcun margine attorno a questo.
Quindi inizieremo aggiungendo un po 'di padding attorno alla nostra lista delle cose da fare.
H-1 Quindi qui aggiungeremo 10
pixel in alto e in basso e 20 pixel a sinistra e a destra e salvare.
Puoi vedere che ci stiamo avvicinando.
Abbiamo bisogno di cambiare la dimensione del carattere.
Hai bisogno di cambiare il carattere.
Inoltre, lo faremo in maiuscolo e possiamo farlo ora.
Dovresti sapere che uno dei miei preferiti è la trasformazione del testo in maiuscolo.
Penso solo che sia carino.
Andiamo a vedere tutto in maiuscolo,
la dimensione del carattere deve essere di 24 pixel, quindi la dimensione del font 24 x e salvare OK l'ultima cosa che faremo è assicurarsi che sia un peso di font normale.
Quindi un H1 di default è in grassetto e non lo vogliamo.
Quindi faremo il modo Funt normale o potremmo scrivere anche il peso del font 400.
Eccoci.
di questi punti elenco.
Ora è solo questione di cambiare il font che tornerà alla prossima cosa che vuoi affrontare è sbarazzarsi
Puoi vedere se non abbiamo nessun punto elenco qui.
Questi punti elenco sono considerati lo stile predefinito del browser.
Quindi lo ignoreremo.
Selezioneremo l'UL in cui si trovano e diciamo none allo stile elenco.
E se torniamo indietro e aggiorniamo, ora non abbiamo punti elenco.
a zero e si aggiornerà qui e non solo per liberare lo spazio ai lati
del pozzo, ma abbiamo spazio qui bisogno di lavorare con ma questa è la bugia, non la stessa UL.
Un'altra cosa che ho intenzione di fare è onorarti, imposta il margine a zero e il padding
Quindi torneremo su quello.
Ora aggiungiamo il carattere corretto e il nome di questo font è rubato e fa parte dei caratteri di Google.
Quindi l'ho aperto qui e farò solo una ricerca per questo rubato.
E qui andiamo.
Aggiungi alla collezione quindi usa.
E vorremmo la via normale.
Aggiungeremo in grassetto e anche in media.
Ora andiamo avanti e copia questo link al nostro HMO e possiamo chiudere questa finestra.
Torna da dove ogni squadra esce e basta incollare
sopra e salvare, poi andremo dal nostro per valutare e aggiungeremo alcuni stili al corpo.
Tutto utilizza questo tipo di carattere, quindi aggiungeremo semplicemente la famiglia di caratteri in modo automatico.
Proprio così.
E se torniamo indietro ora e aggiorniamo il nostro H-1 è praticamente lì.
A parte questo pulsante che non abbiamo toccato tutti i caratteri lo
stesso del colore della spaziatura tutto ciò che è buono.
E i nostri alleati stanno arrivando.
Hanno il carattere giusto.
Abbiamo bisogno di lavorare su alcuni dei problemi di spaziatura e riempimento.
La prossima cosa che affronteremo sono i colori di sfondo sulle bugie.
Quindi ogni altra menzogna.
Passa da un bianco di colore bianco puro a questo colore grigio che abbiamo come sfondo del.
Quindi possiamo usare la SS per aggiungere stili ad ogni altro alleato.
Quindi facciamolo ora.
La prima cosa che faremo
è selezionare tutti gli alleati e dare loro uno sfondo di bianco in modo che possiamo farlo con F F F o bianco o R-GA 255 da 255 a 55 e poi faremo qualsiasi altra bugia.
E la sintassi per questo è una bugia e un bambino da finire.
E anche questo e ben definito uno schema l'uno dell'altro.
E se ne avessimo fatto tre e si direbbe ogni tre, ma vogliamo solo l'un l'altro.
E faremo dello sfondo il colore della
stessa f7 f7 f7 che abbiamo usato per lo sfondo del contenitore e l'aggiornamento.
Ora è difficile da vedere perché sono un po 'piccoli, ma ogni altra bugia è ora questo colore grigio.
Quindi aggiungine qualche altro e puoi vedere che si alternano perfettamente.
Ora affrontiamo il problema dell'altezza delle bugie e anche l'imbottitura.
La prima cosa da fare è dare loro
un'altezza di 40 pixel, quindi tutti gli alleati avranno un'altezza di 40 x e torneremo indietro.
OK, quindi occupano la giusta quantità di spazio.
Ora se li confrontiamo il font ha alcuni problemi.
E inoltre dobbiamo aggiungere un po 'di padding.
Successivamente cambieremo la proprietà dell'altezza della linea sulle bugie in modo che il nostro testo sia centrato verticalmente.
In questo momento la linea è fondamentalmente così alta.
Faremo in modo che occupi l'intero 40
pixel mostrandoti l'altezza della linea di 40 x e che non cambierà la dimensione del carattere, ma semplicemente modificherà la dimensione della linea.
Adesso ha 40 pixel.
Quindi la linea occupa l'intera area.
La prossima cosa minore è il colore che abbiamo del nero puro e il colore che ho usato non è esattamente nero.
È leggermente più leggero.
Quindi imposteremo il colore e ci sono sei sei sei di aggiornamento e poi andiamo avanti affrontiamo l'input.
Quindi abbiamo alcune cose che devi fare.
Il primo dei quali è assicurarsi che occupi la giusta quantità di spazio.
Quindi questo input è molto più grande e non è solo padding o margin la dimensione del font è più grande.
Abbiamo anche un nuovo colore di sfondo.
E c'è un confine quando clicchiamo.
Quindi lavoriamo su tutti questi e inizieremo semplicemente aggiungendo una dimensione del carattere più grande.
Quindi selezioneremo la dimensione del carattere di input e
imposteremo la dimensione del carattere su 18 pixel.
E mentre siamo qui faremo il colore di
sfondo e il colore di sfondo ed è lo stesso f 7 7 1/2 7.
Proprio così.
E rinfresciamo.
OK.
Ci stiamo avvicinando.
La prossima cosa che faremo è aggiungere una larghezza e la larghezza che daremo è 100 percento.
Quindi in questo momento sta andando solo in parte attraverso il container.
Se lo aggiorniamo ora va fino in fondo.
Ma abbiamo alcuni piccoli problemi.
La prima cosa di cui vogliamo occuparci è un po 'di imbottitura.
Quindi aggiungeremo 13 pixel di riempimento sui 13 pixel superiori sul lato a destra.
13 pixel in basso e 20 pixel a sinistra.
Quindi puoi vedere su questo.
Abbiamo cima e fondo sono 13.
E a sinistra ci sono 20 pixel.
Quindi, se fossi fresco, ora abbiamo un input più grande che occupa la giusta quantità di spazio.
Abbiamo un problema che è che l'input è troppo lungo.
Quando abbiamo detto che con dovrebbe essere al 100% che era
in realtà solo il contenuto e che non includeva il padding e non includeva il margine, il che significa
che il nostro input va oltre la fine del div e piuttosto che il messing con l'imbottitura.
Intendo mostrare un altro modo di cambiarlo che è una proprietà chiamata dimensionamento della scatola.
Quindi, con il dimensionamento dei blocchi si hanno alcune opzioni diverse, ma
sostanzialmente controlla come la scatola è dimensionata del modello di box.
E lo cambieremo alla casella di confine Dasch.
E quello che ho appena letto
dice che le proprietà width e height includono padding e border ma non il margine.
Quindi, se lo cambiamo in
una casella di confine che farò ora andiamo qui, basta aggiungere il box di ordinamento delle dimensioni della scatola e salvarlo prima di andare avanti.
Farò notare che questa è una di quelle proprietà che vogliamo avere i prefissi.
Quindi il Web Kit e Mozy sono Moz e il casino di Microsoft.
Non lo farò ora.
Sarà nel codice della soluzione.
Ma ci vuole solo molto tempo per digitare.
Quindi funzionerà proprio come è in Chrome, almeno lo aggiorno ora.
La nostra scatola include il riempimento nel bordo ma non include il margine.
Quindi finiamo con una vestibilità perfetta.
Poi darò un font al colore quando scriverò lì.
Quindi tutto ciò che dobbiamo fare.
di quel colore.
Prenderò solo lo stesso colore dell'H-1 e passerò ai nostri input e dirò semplicemente che è
E se ci aggiorniamo ora e iniziamo a scrivere, andiamo.
Ora concentriamoci sull'effetto.
Quando clicchiamo su ciò che è chiamato messa a fuoco nell'input, puoi vedere qui che abbiamo un bordo attorno ad esso.
Quindi dobbiamo lavorarci su.
In questo momento abbiamo l'effetto di messa a fuoco predefinito.
Quindi c'è un selettore per il fuoco dei due punti di input proprio come lo pseudo-selettore del passaggio del mouse.
Queste celle verranno eseguite solo quando ci siamo concentrati su un input.
Quindi renderò lo sfondo bianco quando ci concentreremo su di esso.
Ho anche intenzione di dargli un bordo di tre
pixel solido. Il colore blu con cui abbiamo lavorato e gli daremo un contorno
di non un contorno si riferisce a questo fastidioso highlight che otteniamo dal browser stesso.
Ora, se ci concentriamo
sull'input, otteniamo questo nuovo bordo blu e cambiamo anche il colore di sfondo, quindi diventa grigio ora è bianco.
Quindi questo è tutto ciò che dobbiamo fare per
l'input, anche se dovremmo andare e aggiungere il testo segnaposto che abbiamo qui.
Quindi andrò all'indice HTL e vicino all'ingresso o nell'input aggiungerò l'attributo placeholder.
E questo può essere quello che vuoi.
Lo farò solo abbinare.
Quindi è aggiungere nuovo da fare e aggiornare.
Eccoci.