1
00:00:00,270 --> 00:00:01,530
Bem vindo de volta.

2
00:00:01,530 --> 00:00:07,350
Agora que temos a funcionalidade básica do nosso aplicativo de lista de tarefas feito, é hora de nos concentrar

3
00:00:07,350 --> 00:00:08,580
em fazê-lo parecer isso.

4
00:00:08,880 --> 00:00:11,430
Portanto, definitivamente temos muitos caminhos para ir.

5
00:00:11,550 --> 00:00:14,220
E vamos atacar essa peça por vez.

6
00:00:14,280 --> 00:00:17,080
Vou tentar fazer isso na ordem mais lógica possível.

7
00:00:17,220 --> 00:00:22,800
maiores, como as cores de fundo e as fontes, assegurando que temos a margem direita e o preenchimento

8
00:00:22,800 --> 00:00:27,210
neste grande recipiente aqui e depois nos concentraremos em algumas das coisas mais nuances.

9
00:00:27,210 --> 00:00:28,740
Começaremos com algumas das peças

10
00:00:28,760 --> 00:00:30,460
OK, vamos começar aqui.

11
00:00:30,480 --> 00:00:33,200
A primeira coisa que faremos, farei uma tela cheia.

12
00:00:33,720 --> 00:00:35,670
Comecemos por apenas pressionar isso.

13
00:00:35,670 --> 00:00:37,120
Esta é a nossa div de recipientes.

14
00:00:37,440 --> 00:00:41,630
Vamos adicionar uma margem para o topo para que possamos ter mais espaço aqui.

15
00:00:41,910 --> 00:00:47,180
Então, vamos voltar para nossos C S S e podemos fechar ou javascript por enquanto.

16
00:00:47,670 --> 00:00:52,520
Nossa div tem uma idéia de container e então vamos selecionar e selecionar o que você já fez.

17
00:00:52,860 --> 00:00:59,550
E ao invés de uma margem de OTTO zero, dê uma centena de pixels na parte superior e inferior.

18
00:00:59,820 --> 00:01:05,690
E lembre-se de que precisamos do x se tivermos zero, não precisamos de X, mas se tivermos um número que fazemos.

19
00:01:05,880 --> 00:01:07,230
Vamos dar uma olhada agora.

20
00:01:07,650 --> 00:01:10,100
OK, então agora eles estão começando no mesmo lugar.

21
00:01:10,200 --> 00:01:12,400
Eles têm a mesma margem lá.

22
00:01:12,420 --> 00:01:18,090
A próxima coisa que faremos é adicionar uma cor de plano de fundo a esse recipiente que este possui.

23
00:01:18,090 --> 00:01:22,830
É um pouco difícil de ver, mas quando eu eliminar algo que mostra através das costas.

24
00:01:22,950 --> 00:01:24,570
É essa a cor aqui mesmo.

25
00:01:24,630 --> 00:01:25,700
Então, de novo.

26
00:01:26,080 --> 00:01:28,190
Então, vamos adiante e adicionamos isso.

27
00:01:28,830 --> 00:01:34,680
Então, em vez de contêiner, diga fundo e a cor.

28
00:01:34,680 --> 00:01:39,680
Eu vou apenas ler isso é F 7 7 depois de 7.

29
00:01:39,960 --> 00:01:41,210
Bem desse jeito.

30
00:01:41,850 --> 00:01:43,570
E vamos verificar como isso parece.

31
00:01:44,000 --> 00:01:44,400
ESTÁ BEM.

32
00:01:44,490 --> 00:01:50,430
Então temos a mesma cor cinza que temos aqui.

33
00:01:50,430 --> 00:01:52,790
É o mesmo cinza claro.

34
00:01:52,830 --> 00:01:54,990
A próxima coisa que faremos é trabalhar na fronteira.

35
00:01:55,230 --> 00:01:57,460
E isso realmente não tem uma borda.

36
00:01:57,540 --> 00:02:00,840
O que tem é uma sombra de caixa muito pequena.

37
00:02:00,840 --> 00:02:02,870
Então, ainda não vimos a sombra da caixa.

38
00:02:02,940 --> 00:02:09,820
Eu vou demonstrar isso aqui e entrar no MT-NW e é apenas uma maneira de adicionar um efeito de sombra.

39
00:02:09,870 --> 00:02:15,240
Então, se eu rolar para baixo, você pode ver aqui algumas sombras de caixa diferentes e vamos

40
00:02:15,240 --> 00:02:19,750
ter uma luz muito leve, mas se você perceber isso, há uma sombra muito pequena.

41
00:02:20,220 --> 00:02:28,380
Então, a sintaxe e a sombra que vamos usar irá livrar-se da nossa fronteira é sombra das tabelas da caixa 0 0 3

42
00:02:28,500 --> 00:02:39,020
pixels e, em seguida, uma cor e nossa cor será basicamente preto, mas é R. G. E então, vamos torná-lo realmente realmente transparente.

43
00:02:39,180 --> 00:02:43,260
Então, apenas perceptível.

44
00:02:43,560 --> 00:02:45,380
E se eu atualizar.

45
00:02:45,400 --> 00:02:46,890
Não temos fronteira agora, mas há uma pequena sombra em torno desse elemento.

46
00:02:46,890 --> 00:02:52,090
ESTÁ BEM.

47
00:02:52,710 --> 00:02:53,170
Isso é tudo o que faremos ao contêiner por enquanto.

48
00:02:53,250 --> 00:02:55,460
Vamos atacar o H-1.

49
00:02:55,770 --> 00:02:57,480
Então, este encabeçando aqui.

50
00:02:57,480 --> 00:02:59,490
Então, na nossa era, eu só considerei um H1.

51
00:02:59,580 --> 00:03:04,320
Não tem identificação ou nada e está tudo bem.

52
00:03:04,320 --> 00:03:06,710
Vamos ao arquivo CSSA e começamos adicionando uma cor de fundo.

53
00:03:06,960 --> 00:03:12,120
Então, vamos selecionar cada um e o plano de fundo

54
00:03:12,390 --> 00:03:25,950
é uma cor que é 2 9 8 0 seja 9 e eles vão economizar e atualizar e agora temos o tom de azul correto.

55
00:03:27,270 --> 00:03:30,010
Então, também mudamos a cor da fonte

56
00:03:31,210 --> 00:03:33,930
para o branco e rapidamente mostramos isso.

57
00:03:36,660 --> 00:03:38,890
Tudo bem.

58
00:03:38,970 --> 00:03:39,450
Lentamente, aproximando-se mais aqui.

59
00:03:39,510 --> 00:03:42,890
A próxima coisa que faremos é não dar nenhuma margem e agora vamos nos livrar desse espaço que tínhamos aqui.

60
00:03:43,050 --> 00:03:50,790
Como você pode ver aqui, não há margem.

61
00:03:51,420 --> 00:03:53,220
Este é o nosso H-1.

62
00:03:53,220 --> 00:03:54,440
Há preenchimento aqui.

63
00:03:54,510 --> 00:03:55,970
Então, o texto não está correto contra a borda, como acontece aqui.

64
00:03:56,340 --> 00:03:59,550
Mas não há margem na parte externa da caixa azul.

65
00:03:59,700 --> 00:04:03,330
Esta é a nossa entrada de texto e que também aumentou o preenchimento, mas também não há margem em torno disso.

66
00:04:03,360 --> 00:04:09,360
Então, vamos começar adicionando algum preenchimento em torno de nossa lista de tarefas.

67
00:04:10,200 --> 00:04:13,360
H-1 Então, aqui vamos adicionar 10

68
00:04:13,370 --> 00:04:22,740
pixels para a parte superior e inferior e 20 pixels para a esquerda e direita e salve.

69
00:04:22,740 --> 00:04:24,240
Você pode ver que estamos nos aproximando.

70
00:04:25,260 --> 00:04:27,150
Precisamos alterar o tamanho da fonte.

71
00:04:27,480 --> 00:04:29,000
Precisa mudar a fonte.

72
00:04:29,070 --> 00:04:30,350
Nós também vamos colocar em maiúscula tudo isso e podemos fazer isso até agora.

73
00:04:30,420 --> 00:04:34,900
Você deve saber que um dos meus favoritos é o texto transformar maiúsculas.

74
00:04:34,980 --> 00:04:40,010
Eu apenas acho que é muito legal.

75
00:04:40,320 --> 00:04:42,480
Lá vamos nós, todos os maiúsculas, o

76
00:04:42,480 --> 00:04:53,910
tamanho da fonte precisa ser de 24 pixels, portanto, o tamanho da fonte 24 x e economize OK, a última coisa que faremos é ter certeza de que é um peso de fonte normal.

77
00:04:53,900 --> 00:04:56,840
Portanto, um H1 por padrão é realmente em negrito e não queremos isso.

78
00:04:57,020 --> 00:05:00,970
Então, faremos o Funt normal ou também poderemos escrever o peso da fonte 400.

79
00:05:01,290 --> 00:05:09,310
Aqui vamos nós.

80
00:05:09,320 --> 00:05:10,290
livrar desses pontos de bala.

81
00:05:10,350 --> 00:05:14,960
Agora é apenas uma questão de mudar a fonte que vai voltar para a próxima coisa que você deseja resolver é se

82
00:05:15,380 --> 00:05:17,510
Você pode ver se não temos pontos de bala aqui.

83
00:05:17,510 --> 00:05:20,240
Esses pontos de bala são considerados o estilo padrão do navegador.

84
00:05:20,250 --> 00:05:23,430
Então, vamos substituir isso.

85
00:05:23,510 --> 00:05:25,360
Nós vamos selecionar o UL que eles estão dentro e dizer estilo de lista nenhum.

86
00:05:25,400 --> 00:05:32,270
E se voltarmos e atualizando, agora não temos pontos de bala.

87
00:05:32,370 --> 00:05:37,790
preenchimento seja zero e que irá atualizar aqui e não apenas se livrar do espaço nos

88
00:05:37,800 --> 00:05:44,270
lados do poço, temos espaço aqui que nós Preciso trabalhar, mas essa é a mentira, não a própria UL.

89
00:05:45,240 --> 00:05:51,350
Outra coisa que eu vou fazer é homenagear você bem, que a margem seja zero e que o

90
00:05:51,360 --> 00:05:56,240
Então vamos voltar para isso.

91
00:05:56,250 --> 00:05:58,440
Agora vamos adicionar a fonte correta e o nome dessa fonte é rubato e faz parte das fontes do Google.

92
00:05:58,440 --> 00:06:04,400
Então eu tenho isso aberto aqui e eu vou apenas fazer uma busca por ele.

93
00:06:04,880 --> 00:06:09,400
E aqui vamos nós.

94
00:06:09,620 --> 00:06:10,720
Adicione à coleção, em seguida, use.

95
00:06:10,770 --> 00:06:14,230
E vamos querer uma maneira normal.

96
00:06:14,510 --> 00:06:16,490
Vamos adicionar em negrito e também médio.

97
00:06:16,800 --> 00:06:20,660
Agora vamos em frente e copie este link para o nosso HMO e podemos fechar esta janela.

98
00:06:20,660 --> 00:06:25,620
Volte para onde cada equipe aqui e apenas coloque em cima

99
00:06:25,980 --> 00:06:33,650
e guarde, então iremos ao nosso para ver avaliar e vamos adicionar alguns estilos ao corpo.

100
00:06:33,650 --> 00:06:37,520
Tudo usa essa fonte para que possamos adicionar a família de fontes de forma robótica.

101
00:06:37,740 --> 00:06:44,780
Bem desse jeito.

102
00:06:45,530 --> 00:06:46,680
E se voltarmos agora e atualizar nosso H-1 é praticamente lá.

103
00:06:47,390 --> 00:06:53,650
Além deste botão que não tocamos em todas as fontes, a mesma

104
00:06:53,660 --> 00:06:58,810
cor do espaçamento é tudo o que é bom.

105
00:06:58,860 --> 00:06:59,960
E nossos aliados estão chegando lá.

106
00:06:59,970 --> 00:07:01,970
Eles têm a fonte correta.

107
00:07:01,980 --> 00:07:03,060
Precisamos trabalhar em alguns dos problemas de espaçamento e preenchimento.

108
00:07:03,140 --> 00:07:06,680
A próxima coisa que abordaremos são as cores de fundo sobre as mentiras.

109
00:07:06,690 --> 00:07:10,660
Então, todas as outras mentiras.

110
00:07:11,250 --> 00:07:12,750
Vai de uma cor branca branca pura para esta cor cinza que temos como um fundo do.

111
00:07:12,930 --> 00:07:19,280
Então, podemos usar o SS para adicionar estilos a todos os outros aliados.

112
00:07:19,470 --> 00:07:24,340
Então vamos fazer isso agora.

113
00:07:24,380 --> 00:07:25,450
A primeira coisa que faremos

114
00:07:25,500 --> 00:07:32,610
é selecionar todos os aliados e dar-lhes um plano de fundo de branco para que possamos fazer isso com F F F ou branco ou R-GA 255 255 a 55 e então faremos todas as outras mentiras.

115
00:07:32,610 --> 00:07:43,520
E a sintaxe para isso é uma mentira e uma criança para terminar.

116
00:07:43,740 --> 00:07:50,080
E isso também e bem definido um padrão de todos os outros.

117
00:07:50,360 --> 00:07:53,970
E se fizéssemos três e diria cada terço, mas nós só queremos todos os outros.

118
00:07:54,140 --> 00:07:58,670
E nós faremos a cor do fundo

119
00:07:59,000 --> 00:08:08,310
o mesmo f7 f7 f7 que usamos para o fundo do contêiner e atualizamos.

120
00:08:08,390 --> 00:08:08,880
Agora é difícil de ver porque eles são um pouco pequenos, mas todas as outras mentiras agora são essa cor cinza.

121
00:08:08,880 --> 00:08:16,500
Então adicione mais alguns e veja que eles alternam perfeitos.

122
00:08:16,700 --> 00:08:21,030
Agora vamos abordar a questão do auge das mentiras e também do preenchimento.

123
00:08:21,020 --> 00:08:25,370
A primeira coisa a fazer é dar-lhes uma

124
00:08:25,760 --> 00:08:35,240
altura de 40 pixels para que todos os aliados tenham uma altura de 40 x e voltem a atualizar.

125
00:08:35,660 --> 00:08:36,540
OK, então eles ocupam a quantidade certa de espaço.

126
00:08:36,950 --> 00:08:39,000
Agora, se os comparamos, a fonte tem alguns problemas.

127
00:08:39,000 --> 00:08:42,620
E também precisamos adicionar algum preenchimento.

128
00:08:42,620 --> 00:08:44,600
Em seguida, vamos mudar a propriedade da altura da linha nas mentiras para que nosso texto seja centrado verticalmente.

129
00:08:44,970 --> 00:08:51,050
Agora, a linha é basicamente alta.

130
00:08:51,570 --> 00:08:55,050
Nós vamos fazer com que ele atinja os

131
00:08:55,080 --> 00:09:05,550
40 pixels inteiros, mostre altura da linha 40 x e isso não altere o tamanho da fonte, ele apenas muda o tamanho da linha.

132
00:09:05,540 --> 00:09:09,510
Agora são 40 pixels.

133
00:09:09,540 --> 00:09:10,880
Então, a linha ocupa toda essa área.

134
00:09:10,880 --> 00:09:13,850
A próxima coisa menor é a cor que temos de preto e a cor que usei não é exatamente preta.

135
00:09:14,150 --> 00:09:21,020
É um pouco mais leve.

136
00:09:21,060 --> 00:09:22,820
Então, vamos configurar a cor e é seis seis seis atualizar e, em seguida, vamos em seguida vamos abordar a entrada.

137
00:09:23,070 --> 00:09:33,530
Então temos algumas coisas que você precisa fazer.

138
00:09:33,540 --> 00:09:35,260
O primeiro deles é garantir que ele ocupe a quantidade certa de espaço.

139
00:09:35,490 --> 00:09:39,660
Então, essa entrada é muito maior e não é apenas preenchimento ou margem o tamanho da fonte é maior.

140
00:09:39,770 --> 00:09:45,740
Temos também uma nova cor de fundo.

141
00:09:45,750 --> 00:09:47,420
E há uma borda quando clicamos.

142
00:09:47,750 --> 00:09:49,700
Então, vamos trabalhar em todos esses e começaremos simplesmente adicionando um tamanho de fonte maior.

143
00:09:49,740 --> 00:09:54,610
Então, selecionaremos o tamanho da fonte de entrada e

144
00:09:54,840 --> 00:09:59,370
definiremos o tamanho da fonte para 18 pixels.

145
00:10:02,270 --> 00:10:05,420
E enquanto estivermos aqui, faremos a cor do plano

146
00:10:05,960 --> 00:10:11,570
de fundo, bem como a cor de fundo e é o mesmo 7 7 1/2 7.

147
00:10:11,610 --> 00:10:14,570
Bem desse jeito.

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

149
00:10:16,760 --> 00:10:18,040
ESTÁ BEM.

150
00:10:18,770 --> 00:10:19,510
Estamos nos aproximando.

151
00:10:19,700 --> 00:10:21,180
A próxima coisa que faremos é adicionar uma largura e a largura que vamos dar é 100 por cento.

152
00:10:21,170 --> 00:10:29,880
Então, agora, apenas faz parte do caminho do recipiente.

153
00:10:29,880 --> 00:10:33,590
Se atualizarmos, agora vai todo o caminho.

154
00:10:33,600 --> 00:10:36,820
Mas temos alguns pequenos problemas.

155
00:10:37,050 --> 00:10:39,200
A primeira coisa que queremos cuidar é algum preenchimento lá.

156
00:10:39,210 --> 00:10:42,970
Então, vamos adicionar o preenchimento de 13 pixels nos 13 pixels superiores do lado à direita.

157
00:10:43,400 --> 00:10:50,320
13 pixels na parte inferior e 20 pixels à esquerda.

158
00:10:50,370 --> 00:10:54,960
Então você pode ver isso.

159
00:10:54,950 --> 00:10:56,250
Nós temos top e bottom são 13.

160
00:10:56,550 --> 00:10:58,770
E à esquerda há 20 pixels.

161
00:10:59,000 --> 00:11:01,550
Então, se eu estivesse fresco. Agora temos uma entrada maior que ocupa a quantidade certa de espaço.

162
00:11:01,590 --> 00:11:07,430
Nós temos um problema que é que a entrada agora é muito longa.

163
00:11:07,590 --> 00:11:11,670
Quando dissemos que com deveria ser 100 por cento que com era,

164
00:11:11,790 --> 00:11:18,540
na verdade, apenas o conteúdo e não incluiu o preenchimento e não incluiu a margem, o que significa que a

165
00:11:18,540 --> 00:11:24,460
nossa contribuição passa muito além do final da div e ao invés de mexer com o preenchimento.

166
00:11:24,450 --> 00:11:27,710
Quero mostrar uma outra maneira de mudá-lo, que é uma propriedade chamada Dimensionamento da caixa.

167
00:11:27,770 --> 00:11:33,820
Então, com dimensionamento de bloco você tem algumas opções diferentes, mas

168
00:11:33,840 --> 00:11:39,420
basicamente controla como a caixa é dimensionada no modelo de caixa.

169
00:11:39,760 --> 00:11:41,400
E vamos mudá-lo para a caixa Dasch de borda.

170
00:11:41,390 --> 00:11:44,100
E o que isso eu vou apenas lê

171
00:11:44,270 --> 00:11:50,570
diz que as propriedades de largura e altura incluem o preenchimento e a borda, mas não a margem.

172
00:11:50,750 --> 00:11:52,740
Então, se mudarmos para a

173
00:11:52,800 --> 00:12:02,760
caixa de borda que eu vou fazer agora, vamos entrar aqui, apenas adicione a caixa de caixa de dimensionamento da caixa e salve-a antes de seguir em frente.

174
00:12:02,750 --> 00:12:05,170
Vou ressaltar que esta é uma dessas propriedades que queremos ter os prefixos.

175
00:12:05,310 --> 00:12:10,250
Assim, o Web Kit e Mozy são Moz e a bagunça da Microsoft.

176
00:12:10,250 --> 00:12:15,170
Não vou fazer isso agora.

177
00:12:15,540 --> 00:12:16,850
Será no código da solução.

178
00:12:16,910 --> 00:12:18,250
Mas demora muito para digitar.

179
00:12:18,410 --> 00:12:20,330
Então, ele funcionará exatamente como está no Chrome, pelo menos eu atualizo agora.

180
00:12:20,660 --> 00:12:25,940
Nossa caixa inclui o preenchimento na borda, mas não inclui a margem.

181
00:12:26,040 --> 00:12:32,180
Então, acabamos com um ajuste perfeito.

182
00:12:32,180 --> 00:12:34,820
Em seguida, vou dar uma cor à fonte quando eu entro lá.

183
00:12:34,880 --> 00:12:39,220
Então, tudo o que precisamos fazer.

184
00:12:39,620 --> 00:12:41,130
cor, é essa cor.

185
00:12:41,330 --> 00:12:48,740
Eu vou apenas tirar a mesma cor do H-1 e ir para a nossa entrada e apenas dizer

186
00:12:48,750 --> 00:12:49,920
E se atualizarmos agora e começamos a digitar lá, nós vamos.

187
00:12:49,910 --> 00:12:54,400
Agora vamos nos concentrar no efeito.

188
00:12:54,410 --> 00:12:56,290
Quando clicamos sobre o que se chama focagem na entrada, você pode ver aqui, nós conseguimos uma borda em torno dela.

189
00:12:56,580 --> 00:13:03,860
Então precisamos trabalhar nisso.

190
00:13:03,920 --> 00:13:05,060
Agora, temos o efeito de foco padrão.

191
00:13:05,120 --> 00:13:08,050
Então, há um seletor para esse foco de cócplone de entrada, assim como o pseudocutor do hover.

192
00:13:08,120 --> 00:13:17,590
Essas células serão executadas somente quando nos concentramos em uma entrada.

193
00:13:17,650 --> 00:13:21,510
Então vou fazer o fundo branco quando nos concentramos nisso.

194
00:13:21,920 --> 00:13:27,310
Eu também vou dar uma borda de três

195
00:13:27,570 --> 00:13:35,960
pixels de sólida. A cor azul com a qual trabalhamos e daremos um

196
00:13:36,570 --> 00:13:45,830
esboço de não um esboço refere-se a esse resplendor irritante que obtemos do próprio navegador.

197
00:13:45,840 --> 00:13:47,180
Agora, se nos concentrarmos

198
00:13:47,180 --> 00:13:53,670
na entrada, obtemos esta nova borda azul e também mudamos a cor de fundo, por isso é cinza agora é branco.

199
00:13:53,660 --> 00:13:56,610
Então, é tudo o que precisamos fazer para a

200
00:13:57,570 --> 00:14:01,850
entrada, embora devamos ir e adicionar o texto do espaço reservado que temos aqui.

201
00:14:01,860 --> 00:14:02,850
Então eu irei para o índice HTL e ao lado da entrada ou na entrada adicionarei o atributo do espaço reservado.

202
00:14:03,030 --> 00:14:10,410
E isso pode ser o que quiser.

203
00:14:10,910 --> 00:14:12,270
Eu apenas vou fazer coincidir.

204
00:14:12,470 --> 00:14:13,460
Então, é adicionar novo para fazer e atualizar.

205
00:14:13,490 --> 00:14:18,800
Aqui vamos nós.

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