1
00:00:00,270 --> 00:00:01,530
Ben tornato.

2
00:00:01,530 --> 00:00:07,350
Ora che abbiamo la funzionalità di base della nostra app To Do List, è giunto il momento per noi di concentrarci

3
00:00:07,350 --> 00:00:08,580
su come farlo apparire così.

4
00:00:08,880 --> 00:00:11,430
Quindi abbiamo decisamente un modo per andare.

5
00:00:11,550 --> 00:00:14,220
E stiamo solo andando ad attaccare questo pezzo alla volta.

6
00:00:14,280 --> 00:00:17,080
Proverò a farlo nell'ordine più logico possibile.

7
00:00:17,220 --> 00:00:22,800
più grandi come i colori di sfondo e i caratteri, assicurandoci di avere il margine giusto e il riempimento

8
00:00:22,800 --> 00:00:27,210
su questo grande contenitore qui e poi ci concentreremo su alcune delle cose più sfumate.

9
00:00:27,210 --> 00:00:28,740
Inizieremo con alcuni dei pezzi

10
00:00:28,760 --> 00:00:30,460
OK, iniziamo qui.

11
00:00:30,480 --> 00:00:33,200
La prima cosa che faremo farò uno schermo intero.

12
00:00:33,720 --> 00:00:35,670
Iniziamo spingendo questo verso il basso.

13
00:00:35,670 --> 00:00:37,120
Questo è il nostro contenitore div.

14
00:00:37,440 --> 00:00:41,630
Aggiungeremo un margine verso l'alto in modo da avere più spazio qui.

15
00:00:41,910 --> 00:00:47,180
Quindi torneremo al nostro C S S e possiamo chiudere o javascript per ora.

16
00:00:47,670 --> 00:00:52,520
Il nostro div ha un'idea di contenitore e poi andremo a selezionare quello che hai già fatto.

17
00:00:52,860 --> 00:00:59,550
E piuttosto che un margine zero OTTO Beh, dai un centinaio di pixel in alto e in basso.

18
00:00:59,820 --> 00:01:05,690
E ricorda che abbiamo bisogno della x se abbiamo zero non abbiamo bisogno di X, ma se abbiamo un numero che facciamo.

19
00:01:05,880 --> 00:01:07,230
Diamo un'occhiata ora.

20
00:01:07,650 --> 00:01:10,100
OK, adesso stanno iniziando nello stesso posto.

21
00:01:10,200 --> 00:01:12,400
Hanno lo stesso margine lì.

22
00:01:12,420 --> 00:01:18,090
La prossima cosa che faremo sarà aggiungere un colore di sfondo a questo contenitore che questo ha.

23
00:01:18,090 --> 00:01:22,830
È un po 'difficile da vedere, ma quando elimino qualcosa viene visualizzato nella parte posteriore.

24
00:01:22,950 --> 00:01:24,570
È di questo colore proprio qui.

25
00:01:24,630 --> 00:01:25,700
Così di nuovo.

26
00:01:26,080 --> 00:01:28,190
Quindi andremo avanti e aggiungeremo questo.

27
00:01:28,830 --> 00:01:34,680
Quindi, invece del contenitore, diciamo bene lo sfondo e il colore.

28
00:01:34,680 --> 00:01:39,680
Lo leggerò fuori è F 7 7 dopo 7.

29
00:01:39,960 --> 00:01:41,210
Proprio così.

30
00:01:41,850 --> 00:01:43,570
E vediamo come sembra.

31
00:01:44,000 --> 00:01:44,400
OK.

32
00:01:44,490 --> 00:01:50,430
Quindi abbiamo lo stesso colore grigio che abbiamo qui.

33
00:01:50,430 --> 00:01:52,790
È lo stesso grigio chiaro.

34
00:01:52,830 --> 00:01:54,990
La prossima cosa che faremo è lavorare al confine.

35
00:01:55,230 --> 00:01:57,460
E questo in realtà non ha un confine.

36
00:01:57,540 --> 00:02:00,840
Quello che ha è una leggera ombra di scatola.

37
00:02:00,840 --> 00:02:02,870
Quindi non abbiamo ancora visto l'ombra della scatola.

38
00:02:02,940 --> 00:02:09,820
Dimostrerò che qui ed entrerò in MT-NW ed è solo un modo di aggiungere un effetto ombra.

39
00:02:09,870 --> 00:02:15,240
Quindi se scorro verso il basso puoi vedere qui alcune ombre di riquadri diverse e ne

40
00:02:15,240 --> 00:02:19,750
avremo una molto leggera, ma se ti accorgi di questo, c'è una leggera ombra.

41
00:02:20,220 --> 00:02:28,380
Quindi la sintassi e l'ombra che useremo eliminerà il nostro bordo è l'ombra del riquadro di casella 0 0 3 pixel

42
00:02:28,500 --> 00:02:39,020
e quindi un colore e il nostro colore sarà fondamentalmente nero ma è R. G. E poi lo renderemo davvero davvero trasparente.

43
00:02:39,180 --> 00:02:43,260
Quindi appena percettibile.

44
00:02:43,560 --> 00:02:45,380
E se mi rinfresco.

45
00:02:45,400 --> 00:02:46,890
Non abbiamo confini ora ma c'è una leggera ombra attorno a questo elemento.

46
00:02:46,890 --> 00:02:52,090
OK.

47
00:02:52,710 --> 00:02:53,170
Questo è tutto ciò che faremo al contenitore per ora.

48
00:02:53,250 --> 00:02:55,460
Attacchiamo l'H-1.

49
00:02:55,770 --> 00:02:57,480
Quindi questa voce qui.

50
00:02:57,480 --> 00:02:59,490
Quindi è nella nostra epoca che ho appena considerato un H1.

51
00:02:59,580 --> 00:03:04,320
Non ha un ID o altro e va bene.

52
00:03:04,320 --> 00:03:06,710
Andiamo al file CSSA e iniziamo aggiungendo un colore di sfondo.

53
00:03:06,960 --> 00:03:12,120
Quindi selezioneremo ciascuno e lo sfondo è un

54
00:03:12,390 --> 00:03:25,950
colore che è 2 9 8 0 be 9 e verranno salvati e aggiornati e ora abbiamo la giusta tonalità di blu.

55
00:03:27,270 --> 00:03:30,010
Quindi cambieremo anche il colore del carattere

56
00:03:31,210 --> 00:03:33,930
in bianco e lo mostreremo rapidamente.

57
00:03:36,660 --> 00:03:38,890
Tutto ok.

58
00:03:38,970 --> 00:03:39,450
Avvicinandosi lentamente qui.

59
00:03:39,510 --> 00:03:42,890
La prossima cosa che faremo è non dare alcun margine e ora ci libereremo di questo spazio che avevamo qui.

60
00:03:43,050 --> 00:03:50,790
Come puoi vedere qui non c'è margine.

61
00:03:51,420 --> 00:03:53,220
Questo è il nostro H-1.

62
00:03:53,220 --> 00:03:54,440
C'è imbottitura qui.

63
00:03:54,510 --> 00:03:55,970
Quindi il testo non va dritto contro il bordo come fa qui.

64
00:03:56,340 --> 00:03:59,550
Ma non c'è margine all'esterno della scatola blu.

65
00:03:59,700 --> 00:04:03,330
Questo è il nostro input di testo e che ha anche aumentato il padding, ma non c'è alcun margine attorno a questo.

66
00:04:03,360 --> 00:04:09,360
Quindi inizieremo aggiungendo un po 'di padding attorno alla nostra lista delle cose da fare.

67
00:04:10,200 --> 00:04:13,360
H-1 Quindi qui aggiungeremo 10

68
00:04:13,370 --> 00:04:22,740
pixel in alto e in basso e 20 pixel a sinistra e a destra e salvare.

69
00:04:22,740 --> 00:04:24,240
Puoi vedere che ci stiamo avvicinando.

70
00:04:25,260 --> 00:04:27,150
Abbiamo bisogno di cambiare la dimensione del carattere.

71
00:04:27,480 --> 00:04:29,000
Hai bisogno di cambiare il carattere.

72
00:04:29,070 --> 00:04:30,350
Inoltre, lo faremo in maiuscolo e possiamo farlo ora.

73
00:04:30,420 --> 00:04:34,900
Dovresti sapere che uno dei miei preferiti è la trasformazione del testo in maiuscolo.

74
00:04:34,980 --> 00:04:40,010
Penso solo che sia carino.

75
00:04:40,320 --> 00:04:42,480
Andiamo a vedere tutto in maiuscolo,

76
00:04:42,480 --> 00:04:53,910
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.

77
00:04:53,900 --> 00:04:56,840
Quindi un H1 di default è in grassetto e non lo vogliamo.

78
00:04:57,020 --> 00:05:00,970
Quindi faremo il modo Funt normale o potremmo scrivere anche il peso del font 400.

79
00:05:01,290 --> 00:05:09,310
Eccoci.

80
00:05:09,320 --> 00:05:10,290
di questi punti elenco.

81
00:05:10,350 --> 00:05:14,960
Ora è solo questione di cambiare il font che tornerà alla prossima cosa che vuoi affrontare è sbarazzarsi

82
00:05:15,380 --> 00:05:17,510
Puoi vedere se non abbiamo nessun punto elenco qui.

83
00:05:17,510 --> 00:05:20,240
Questi punti elenco sono considerati lo stile predefinito del browser.

84
00:05:20,250 --> 00:05:23,430
Quindi lo ignoreremo.

85
00:05:23,510 --> 00:05:25,360
Selezioneremo l'UL in cui si trovano e diciamo none allo stile elenco.

86
00:05:25,400 --> 00:05:32,270
E se torniamo indietro e aggiorniamo, ora non abbiamo punti elenco.

87
00:05:32,370 --> 00:05:37,790
a zero e si aggiornerà qui e non solo per liberare lo spazio ai lati

88
00:05:37,800 --> 00:05:44,270
del pozzo, ma abbiamo spazio qui bisogno di lavorare con ma questa è la bugia, non la stessa UL.

89
00:05:45,240 --> 00:05:51,350
Un'altra cosa che ho intenzione di fare è onorarti, imposta il margine a zero e il padding

90
00:05:51,360 --> 00:05:56,240
Quindi torneremo su quello.

91
00:05:56,250 --> 00:05:58,440
Ora aggiungiamo il carattere corretto e il nome di questo font è rubato e fa parte dei caratteri di Google.

92
00:05:58,440 --> 00:06:04,400
Quindi l'ho aperto qui e farò solo una ricerca per questo rubato.

93
00:06:04,880 --> 00:06:09,400
E qui andiamo.

94
00:06:09,620 --> 00:06:10,720
Aggiungi alla collezione quindi usa.

95
00:06:10,770 --> 00:06:14,230
E vorremmo la via normale.

96
00:06:14,510 --> 00:06:16,490
Aggiungeremo in grassetto e anche in media.

97
00:06:16,800 --> 00:06:20,660
Ora andiamo avanti e copia questo link al nostro HMO e possiamo chiudere questa finestra.

98
00:06:20,660 --> 00:06:25,620
Torna da dove ogni squadra esce e basta incollare

99
00:06:25,980 --> 00:06:33,650
sopra e salvare, poi andremo dal nostro per valutare e aggiungeremo alcuni stili al corpo.

100
00:06:33,650 --> 00:06:37,520
Tutto utilizza questo tipo di carattere, quindi aggiungeremo semplicemente la famiglia di caratteri in modo automatico.

101
00:06:37,740 --> 00:06:44,780
Proprio così.

102
00:06:45,530 --> 00:06:46,680
E se torniamo indietro ora e aggiorniamo il nostro H-1 è praticamente lì.

103
00:06:47,390 --> 00:06:53,650
A parte questo pulsante che non abbiamo toccato tutti i caratteri lo

104
00:06:53,660 --> 00:06:58,810
stesso del colore della spaziatura tutto ciò che è buono.

105
00:06:58,860 --> 00:06:59,960
E i nostri alleati stanno arrivando.

106
00:06:59,970 --> 00:07:01,970
Hanno il carattere giusto.

107
00:07:01,980 --> 00:07:03,060
Abbiamo bisogno di lavorare su alcuni dei problemi di spaziatura e riempimento.

108
00:07:03,140 --> 00:07:06,680
La prossima cosa che affronteremo sono i colori di sfondo sulle bugie.

109
00:07:06,690 --> 00:07:10,660
Quindi ogni altra menzogna.

110
00:07:11,250 --> 00:07:12,750
Passa da un bianco di colore bianco puro a questo colore grigio che abbiamo come sfondo del.

111
00:07:12,930 --> 00:07:19,280
Quindi possiamo usare la SS per aggiungere stili ad ogni altro alleato.

112
00:07:19,470 --> 00:07:24,340
Quindi facciamolo ora.

113
00:07:24,380 --> 00:07:25,450
La prima cosa che faremo

114
00:07:25,500 --> 00:07:32,610
è 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.

115
00:07:32,610 --> 00:07:43,520
E la sintassi per questo è una bugia e un bambino da finire.

116
00:07:43,740 --> 00:07:50,080
E anche questo e ben definito uno schema l'uno dell'altro.

117
00:07:50,360 --> 00:07:53,970
E se ne avessimo fatto tre e si direbbe ogni tre, ma vogliamo solo l'un l'altro.

118
00:07:54,140 --> 00:07:58,670
E faremo dello sfondo il colore della

119
00:07:59,000 --> 00:08:08,310
stessa f7 f7 f7 che abbiamo usato per lo sfondo del contenitore e l'aggiornamento.

120
00:08:08,390 --> 00:08:08,880
Ora è difficile da vedere perché sono un po 'piccoli, ma ogni altra bugia è ora questo colore grigio.

121
00:08:08,880 --> 00:08:16,500
Quindi aggiungine qualche altro e puoi vedere che si alternano perfettamente.

122
00:08:16,700 --> 00:08:21,030
Ora affrontiamo il problema dell'altezza delle bugie e anche l'imbottitura.

123
00:08:21,020 --> 00:08:25,370
La prima cosa da fare è dare loro

124
00:08:25,760 --> 00:08:35,240
un'altezza di 40 pixel, quindi tutti gli alleati avranno un'altezza di 40 x e torneremo indietro.

125
00:08:35,660 --> 00:08:36,540
OK, quindi occupano la giusta quantità di spazio.

126
00:08:36,950 --> 00:08:39,000
Ora se li confrontiamo il font ha alcuni problemi.

127
00:08:39,000 --> 00:08:42,620
E inoltre dobbiamo aggiungere un po 'di padding.

128
00:08:42,620 --> 00:08:44,600
Successivamente cambieremo la proprietà dell'altezza della linea sulle bugie in modo che il nostro testo sia centrato verticalmente.

129
00:08:44,970 --> 00:08:51,050
In questo momento la linea è fondamentalmente così alta.

130
00:08:51,570 --> 00:08:55,050
Faremo in modo che occupi l'intero 40

131
00:08:55,080 --> 00:09:05,550
pixel mostrandoti l'altezza della linea di 40 x e che non cambierà la dimensione del carattere, ma semplicemente modificherà la dimensione della linea.

132
00:09:05,540 --> 00:09:09,510
Adesso ha 40 pixel.

133
00:09:09,540 --> 00:09:10,880
Quindi la linea occupa l'intera area.

134
00:09:10,880 --> 00:09:13,850
La prossima cosa minore è il colore che abbiamo del nero puro e il colore che ho usato non è esattamente nero.

135
00:09:14,150 --> 00:09:21,020
È leggermente più leggero.

136
00:09:21,060 --> 00:09:22,820
Quindi imposteremo il colore e ci sono sei sei sei di aggiornamento e poi andiamo avanti affrontiamo l'input.

137
00:09:23,070 --> 00:09:33,530
Quindi abbiamo alcune cose che devi fare.

138
00:09:33,540 --> 00:09:35,260
Il primo dei quali è assicurarsi che occupi la giusta quantità di spazio.

139
00:09:35,490 --> 00:09:39,660
Quindi questo input è molto più grande e non è solo padding o margin la dimensione del font è più grande.

140
00:09:39,770 --> 00:09:45,740
Abbiamo anche un nuovo colore di sfondo.

141
00:09:45,750 --> 00:09:47,420
E c'è un confine quando clicchiamo.

142
00:09:47,750 --> 00:09:49,700
Quindi lavoriamo su tutti questi e inizieremo semplicemente aggiungendo una dimensione del carattere più grande.

143
00:09:49,740 --> 00:09:54,610
Quindi selezioneremo la dimensione del carattere di input e

144
00:09:54,840 --> 00:09:59,370
imposteremo la dimensione del carattere su 18 pixel.

145
00:10:02,270 --> 00:10:05,420
E mentre siamo qui faremo il colore di

146
00:10:05,960 --> 00:10:11,570
sfondo e il colore di sfondo ed è lo stesso f 7 7 1/2 7.

147
00:10:11,610 --> 00:10:14,570
Proprio così.

148
00:10:14,730 --> 00:10:16,350
E rinfresciamo.

149
00:10:16,760 --> 00:10:18,040
OK.

150
00:10:18,770 --> 00:10:19,510
Ci stiamo avvicinando.

151
00:10:19,700 --> 00:10:21,180
La prossima cosa che faremo è aggiungere una larghezza e la larghezza che daremo è 100 percento.

152
00:10:21,170 --> 00:10:29,880
Quindi in questo momento sta andando solo in parte attraverso il container.

153
00:10:29,880 --> 00:10:33,590
Se lo aggiorniamo ora va fino in fondo.

154
00:10:33,600 --> 00:10:36,820
Ma abbiamo alcuni piccoli problemi.

155
00:10:37,050 --> 00:10:39,200
La prima cosa di cui vogliamo occuparci è un po 'di imbottitura.

156
00:10:39,210 --> 00:10:42,970
Quindi aggiungeremo 13 pixel di riempimento sui 13 pixel superiori sul lato a destra.

157
00:10:43,400 --> 00:10:50,320
13 pixel in basso e 20 pixel a sinistra.

158
00:10:50,370 --> 00:10:54,960
Quindi puoi vedere su questo.

159
00:10:54,950 --> 00:10:56,250
Abbiamo cima e fondo sono 13.

160
00:10:56,550 --> 00:10:58,770
E a sinistra ci sono 20 pixel.

161
00:10:59,000 --> 00:11:01,550
Quindi, se fossi fresco, ora abbiamo un input più grande che occupa la giusta quantità di spazio.

162
00:11:01,590 --> 00:11:07,430
Abbiamo un problema che è che l'input è troppo lungo.

163
00:11:07,590 --> 00:11:11,670
Quando abbiamo detto che con dovrebbe essere al 100% che era

164
00:11:11,790 --> 00:11:18,540
in realtà solo il contenuto e che non includeva il padding e non includeva il margine, il che significa

165
00:11:18,540 --> 00:11:24,460
che il nostro input va oltre la fine del div e piuttosto che il messing con l'imbottitura.

166
00:11:24,450 --> 00:11:27,710
Intendo mostrare un altro modo di cambiarlo che è una proprietà chiamata dimensionamento della scatola.

167
00:11:27,770 --> 00:11:33,820
Quindi, con il dimensionamento dei blocchi si hanno alcune opzioni diverse, ma

168
00:11:33,840 --> 00:11:39,420
sostanzialmente controlla come la scatola è dimensionata del modello di box.

169
00:11:39,760 --> 00:11:41,400
E lo cambieremo alla casella di confine Dasch.

170
00:11:41,390 --> 00:11:44,100
E quello che ho appena letto

171
00:11:44,270 --> 00:11:50,570
dice che le proprietà width e height includono padding e border ma non il margine.

172
00:11:50,750 --> 00:11:52,740
Quindi, se lo cambiamo in

173
00:11:52,800 --> 00:12:02,760
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.

174
00:12:02,750 --> 00:12:05,170
Farò notare che questa è una di quelle proprietà che vogliamo avere i prefissi.

175
00:12:05,310 --> 00:12:10,250
Quindi il Web Kit e Mozy sono Moz e il casino di Microsoft.

176
00:12:10,250 --> 00:12:15,170
Non lo farò ora.

177
00:12:15,540 --> 00:12:16,850
Sarà nel codice della soluzione.

178
00:12:16,910 --> 00:12:18,250
Ma ci vuole solo molto tempo per digitare.

179
00:12:18,410 --> 00:12:20,330
Quindi funzionerà proprio come è in Chrome, almeno lo aggiorno ora.

180
00:12:20,660 --> 00:12:25,940
La nostra scatola include il riempimento nel bordo ma non include il margine.

181
00:12:26,040 --> 00:12:32,180
Quindi finiamo con una vestibilità perfetta.

182
00:12:32,180 --> 00:12:34,820
Poi darò un font al colore quando scriverò lì.

183
00:12:34,880 --> 00:12:39,220
Quindi tutto ciò che dobbiamo fare.

184
00:12:39,620 --> 00:12:41,130
di quel colore.

185
00:12:41,330 --> 00:12:48,740
Prenderò solo lo stesso colore dell'H-1 e passerò ai nostri input e dirò semplicemente che è

186
00:12:48,750 --> 00:12:49,920
E se ci aggiorniamo ora e iniziamo a scrivere, andiamo.

187
00:12:49,910 --> 00:12:54,400
Ora concentriamoci sull'effetto.

188
00:12:54,410 --> 00:12:56,290
Quando clicchiamo su ciò che è chiamato messa a fuoco nell'input, puoi vedere qui che abbiamo un bordo attorno ad esso.

189
00:12:56,580 --> 00:13:03,860
Quindi dobbiamo lavorarci su.

190
00:13:03,920 --> 00:13:05,060
In questo momento abbiamo l'effetto di messa a fuoco predefinito.

191
00:13:05,120 --> 00:13:08,050
Quindi c'è un selettore per il fuoco dei due punti di input proprio come lo pseudo-selettore del passaggio del mouse.

192
00:13:08,120 --> 00:13:17,590
Queste celle verranno eseguite solo quando ci siamo concentrati su un input.

193
00:13:17,650 --> 00:13:21,510
Quindi renderò lo sfondo bianco quando ci concentreremo su di esso.

194
00:13:21,920 --> 00:13:27,310
Ho anche intenzione di dargli un bordo di tre

195
00:13:27,570 --> 00:13:35,960
pixel solido. Il colore blu con cui abbiamo lavorato e gli daremo un contorno

196
00:13:36,570 --> 00:13:45,830
di non un contorno si riferisce a questo fastidioso highlight che otteniamo dal browser stesso.

197
00:13:45,840 --> 00:13:47,180
Ora, se ci concentriamo

198
00:13:47,180 --> 00:13:53,670
sull'input, otteniamo questo nuovo bordo blu e cambiamo anche il colore di sfondo, quindi diventa grigio ora è bianco.

199
00:13:53,660 --> 00:13:56,610
Quindi questo è tutto ciò che dobbiamo fare per

200
00:13:57,570 --> 00:14:01,850
l'input, anche se dovremmo andare e aggiungere il testo segnaposto che abbiamo qui.

201
00:14:01,860 --> 00:14:02,850
Quindi andrò all'indice HTL e vicino all'ingresso o nell'input aggiungerò l'attributo placeholder.

202
00:14:03,030 --> 00:14:10,410
E questo può essere quello che vuoi.

203
00:14:10,910 --> 00:14:12,270
Lo farò solo abbinare.

204
00:14:12,470 --> 00:14:13,460
Quindi è aggiungere nuovo da fare e aggiornare.

205
00:14:13,490 --> 00:14:18,800
Eccoci.

206
00:14:18,840 --> 00:14:19,490