1
00:00:00,270 --> 00:00:01,530
Nous saluons le retour.

2
00:00:01,530 --> 00:00:08,580
Maintenant que nous avons la fonctionnalité de base de notre application To Do list, il est temps pour nous de nous concentrer sur le faire ressembler à cela.

3
00:00:08,880 --> 00:00:11,430
Donc nous avons vraiment beaucoup de chemin à parcourir.

4
00:00:11,550 --> 00:00:14,220
Et nous allons attaquer ce morceau à la fois.

5
00:00:14,280 --> 00:00:17,080
Je vais essayer de le faire dans l'ordre le plus logique possible.

6
00:00:17,220 --> 00:00:28,740
Nous allons commencer avec quelques-unes des plus grandes pièces comme les couleurs de fond et de polices en veillant à ce que nous avons la marge droite et rembourrage sur ce grand conteneur ici et puis nous allons nous concentrer sur certaines des choses plus nuance.

7
00:00:28,760 --> 00:00:30,460
OK commençons ici.

8
00:00:30,480 --> 00:00:33,200
La première chose que nous allons faire, je vais faire un plein écran.

9
00:00:33,720 --> 00:00:35,670
Commençons par baisser cette pression.

10
00:00:35,670 --> 00:00:37,120
Ceci est notre div conteneur.

11
00:00:37,440 --> 00:00:41,630
Nous allons ajouter une marge au sommet de sorte que nous avons plus d'espace ici.

12
00:00:41,910 --> 00:00:47,180
Donc, nous allons revenir à notre C S S et peut fermer ou javascript pour l'instant.

13
00:00:47,670 --> 00:00:52,520
Notre div a une idée de conteneur et puis nous allons aller et sélectionnez ici que vous avez déjà fait.

14
00:00:52,860 --> 00:00:59,550
Et plutôt que d'une marge de 0 OTTO Bon lui donner une centaine de pixels sur le dessus et le bas.

15
00:00:59,820 --> 00:01:05,690
Et n'oubliez pas que nous avons besoin du x si nous avons zéro, nous n'avons pas besoin de X, mais si nous avons un nombre que nous faisons.

16
00:01:05,880 --> 00:01:07,230
Jetons un coup d'oeil maintenant.

17
00:01:07,650 --> 00:01:10,100
OK maintenant ils commencent au même endroit.

18
00:01:10,200 --> 00:01:12,400
Ils ont la même marge.

19
00:01:12,420 --> 00:01:18,090
La prochaine chose que nous allons faire est d'ajouter une couleur de fond à ce conteneur que celui-ci a.

20
00:01:18,090 --> 00:01:22,830
C'est un peu difficile à voir, mais quand je supprime quelque chose, il apparaît à l'arrière.

21
00:01:22,950 --> 00:01:24,570
C'est cette couleur ici.

22
00:01:24,630 --> 00:01:25,700
Encore une fois.

23
00:01:26,080 --> 00:01:28,190
Nous allons donc poursuivre.

24
00:01:28,830 --> 00:01:34,680
Donc, au lieu de récipient bien dire arrière-plan et la couleur.

25
00:01:34,680 --> 00:01:39,680
Je vais juste le lire, c'est F 7 7 après 7.

26
00:01:39,960 --> 00:01:41,210
Juste comme ça.

27
00:01:41,850 --> 00:01:43,570
Et nous allons vérifier comment cela ressemble.

28
00:01:44,000 --> 00:01:44,400
D'ACCORD.

29
00:01:44,490 --> 00:01:50,430
Nous avons donc la même couleur grise que nous avons ici.

30
00:01:50,430 --> 00:01:52,790
C'est le même gris clair.

31
00:01:52,830 --> 00:01:54,990
La prochaine chose que nous allons faire est de travailler à la frontière.

32
00:01:55,230 --> 00:01:57,460
Et cela n'a pas de frontière.

33
00:01:57,540 --> 00:02:00,840
Ce qu'il a est une ombre de boîte très légère.

34
00:02:00,840 --> 00:02:02,870
Donc nous n'avons pas encore vu l'ombre de la boîte.

35
00:02:02,940 --> 00:02:09,820
Je vais démontrer que ici et aller dans MT-NW et c'est juste une façon d'ajouter un effet d'ombre.

36
00:02:09,870 --> 00:02:19,750
Donc, si je défile vers le bas vous pouvez voir ici sont des ombres boîte différente et nous allons avoir un très léger, mais si vous remarquez autour de cela il ya une ombre vraiment léger.

37
00:02:20,220 --> 00:02:39,020
Donc, la syntaxe et l'ombre que nous allons utiliser se débarrasser de notre frontière est l'ombre boîte de 0 0 3 pixels et puis une couleur et notre couleur, il va être simplement noir, mais il est R.G ..

38
00:02:39,180 --> 00:02:43,260
Et puis nous allons le rendre vraiment vraiment transparent.

39
00:02:43,560 --> 00:02:45,380
Alors à peine perceptible.

40
00:02:45,400 --> 00:02:46,890
Et si je rafraîchis.

41
00:02:46,890 --> 00:02:52,090
Nous n'avons pas de frontière maintenant, mais il ya une légère ombre autour de cet élément.

42
00:02:52,710 --> 00:02:53,170
D'ACCORD.

43
00:02:53,250 --> 00:02:55,460
C'est tout ce que nous allons faire pour le conteneur pour l'instant.

44
00:02:55,770 --> 00:02:57,480
Attaquons le H-1.

45
00:02:57,480 --> 00:02:59,490
Donc, cette rubrique ici.

46
00:02:59,580 --> 00:03:04,320
Donc c'est à notre âge lui, je viens de considérer un H1.

47
00:03:04,320 --> 00:03:06,710
Il n'a pas d'identité ou quoi que ce soit et c'est très bien.

48
00:03:06,960 --> 00:03:12,120
Passons au fichier CSSA et commençons par ajouter une couleur de fond.

49
00:03:12,390 --> 00:03:30,010
Donc, nous allons sélectionner chacun et le fond est une couleur qui est 2 9 8 0 être 9 et ils vont enregistrer et actualiser et nous avons maintenant la bonne nuance de bleu.

50
00:03:31,210 --> 00:03:38,890
Donc, nous allons également changer la couleur de la police en blanc et vous montrer rapidement que.

51
00:03:38,970 --> 00:03:39,450
D'accord.

52
00:03:39,510 --> 00:03:42,890
Lentement se rapprochant ici.

53
00:03:43,050 --> 00:03:51,160
La prochaine chose que nous ferons, c'est de ne lui donner aucune marge et maintenant nous allons simplement nous débarrasser de cet espace que nous avions ici.

54
00:03:51,420 --> 00:03:53,220
Comme vous pouvez le voir ici, il n'y a pas de marge.

55
00:03:53,220 --> 00:03:54,440
C'est notre H-1.

56
00:03:54,510 --> 00:03:55,970
Il ya le rembourrage ici.

57
00:03:56,340 --> 00:03:59,550
Donc le texte ne va pas tout droit contre le bord comme il le fait ici.

58
00:03:59,700 --> 00:04:03,330
Mais il n'y a pas de marge à l'extérieur de la boîte bleue.

59
00:04:03,360 --> 00:04:10,130
C'est notre saisie de texte et qui a également augmenté le rembourrage, mais il n'y a pas de marge autour de cela non plus.

60
00:04:10,200 --> 00:04:13,360
Nous allons commencer par ajouter un peu de remplissage autour de notre liste de tâches.

61
00:04:13,370 --> 00:04:24,240
H-1 Alors ici, nous allons ajouter 10 pixels au sommet et au bas et 20 pixels à gauche et à droite et enregistrer.

62
00:04:25,260 --> 00:04:27,150
Vous pouvez voir que nous nous rapprochons.

63
00:04:27,480 --> 00:04:29,000
Nous devons changer la taille de police.

64
00:04:29,070 --> 00:04:30,350
Besoin de changer la police.

65
00:04:30,420 --> 00:04:34,900
Nous allons aussi majusculer tout cela et nous pouvons le faire maintenant.

66
00:04:34,980 --> 00:04:40,010
Vous devez savoir que l'un de mes favoris est le texte transformer en majuscules.

67
00:04:40,320 --> 00:04:42,480
Je pense juste que c'est assez cool.

68
00:04:42,480 --> 00:04:56,840
Là, nous allons nous obtenons tous les majuscules la taille de la police doit être de 24 pixels de sorte que la taille de la police 24 x et enregistrer OK la dernière chose que nous allons faire est de s'assurer que c'est un poids de la police normale.

69
00:04:57,020 --> 00:05:00,970
Donc, un H1 par défaut est en gras et nous ne voulons pas.

70
00:05:01,290 --> 00:05:09,310
Donc nous allons faire Funt manière normale ou nous pourrions aussi écrire le poids de la police 400.

71
00:05:09,320 --> 00:05:10,290
Voilà.

72
00:05:10,350 --> 00:05:17,510
Maintenant, il est juste une question de changer la police qui va revenir à la prochaine chose que vous voulez aborder est de se débarrasser de ces points de balle.

73
00:05:17,510 --> 00:05:20,240
Vous pouvez voir si nous n'avons pas de puces ici.

74
00:05:20,250 --> 00:05:23,430
Ces points de balle sont considérés comme le style de navigateur par défaut.

75
00:05:23,510 --> 00:05:25,360
Donc, nous allons passer outre.

76
00:05:25,400 --> 00:05:32,270
Nous allons sélectionner l'UL qu'ils sont à l'intérieur et dire style de liste aucun.

77
00:05:32,370 --> 00:05:37,790
Et si nous revenons en arrière et rafraîchir, nous n'avons pas de points de balle.

78
00:05:37,800 --> 00:05:56,240
Une autre chose que je vais faire est de vous honorer bien fixé la marge à zéro et le rembourrage à zéro et il va rafraîchir ici et non seulement se débarrasser de l'espace sur les côtés du puits, nous avons de l'espace ici que nous Besoin de travailler avec mais c'est le mensonge pas l'UL elle-même.

79
00:05:56,250 --> 00:05:58,440
Nous reviendrons là-dessus.

80
00:05:58,440 --> 00:06:04,760
Maintenant, nous allons ajouter dans la bonne police et le nom de cette police est rubato et il fait partie des polices de Google.

81
00:06:04,880 --> 00:06:09,400
Donc, je l'ai ouvert ici et je vais juste faire une recherche pour lui rubato.

82
00:06:09,620 --> 00:06:10,720
Et c'est reparti.

83
00:06:10,770 --> 00:06:14,230
Ajouter à la collection puis utiliser.

84
00:06:14,510 --> 00:06:16,490
Et nous allons vouloir normalement.

85
00:06:16,800 --> 00:06:20,660
Nous allons ajouter en gras et aussi moyen.

86
00:06:20,660 --> 00:06:25,620
Maintenant, allons de l'avant et copier ce lien à notre HMO et nous pouvons fermer cette fenêtre.

87
00:06:25,980 --> 00:06:37,520
Revenez à l'endroit où chaque équipe ici et juste en haut collez que dans et sauver alors nous irons à notre pour voir évaluer et nous allons ajouter quelques styles au corps.

88
00:06:37,740 --> 00:06:44,780
Tout utilise cette police de sorte que nous allons simplement ajouter dans la famille de polices de robotique.

89
00:06:45,530 --> 00:06:46,680
Juste comme ça.

90
00:06:47,390 --> 00:06:53,650
Et si nous revenons maintenant et rafraîchir notre H-1 est à peu près là.

91
00:06:53,660 --> 00:06:59,960
Mis à part ce bouton que nous n'avons pas touché à toutes les polices la même la couleur de l'espacement tout ce qui est bon.

92
00:06:59,970 --> 00:07:01,970
Et nos alliés arrivent.

93
00:07:01,980 --> 00:07:03,060
Ils ont la bonne police.

94
00:07:03,140 --> 00:07:06,680
Nous devons travailler sur certains des problèmes d'espacement et de rembourrage.

95
00:07:06,690 --> 00:07:10,660
La prochaine chose que nous allons aborder sont les couleurs de fond sur les mensonges.

96
00:07:11,250 --> 00:07:12,750
Donc tous les autres mensonges.

97
00:07:12,930 --> 00:07:19,280
Il passe d 'une couleur blanche de blanc pur à cette couleur grise que nous avons comme un arrière - plan de la.

98
00:07:19,470 --> 00:07:24,340
Nous pouvons donc utiliser les SS pour ajouter des styles à tous les autres alliés.

99
00:07:24,380 --> 00:07:25,450
Alors, faisons-le maintenant.

100
00:07:25,500 --> 00:07:43,520
La première chose que nous allons faire est de sélectionner tous les alliés et de leur donner un arrière-plan de blanc afin que nous puissions le faire avec F F F ou blanc ou R-GA 255 255 à 55 et puis nous ferons tous les autres mensonges.

101
00:07:43,740 --> 00:07:50,080
Et la syntaxe pour cela est un mensonge et l'enfant à la fin.

102
00:07:50,360 --> 00:07:53,970
Et que trop et bien défini un modèle de tous les autres.

103
00:07:54,140 --> 00:07:58,670
Et si on en faisait trois et on en dirait tous les trois, mais on voulait tous les autres.

104
00:07:59,000 --> 00:08:08,880
Et nous allons rendre la couleur de fond la même f7 f7 f7 que nous avons utilisé pour l'arrière-plan du conteneur et de rafraîchir.

105
00:08:08,880 --> 00:08:16,500
Maintenant, il est difficile de voir parce qu'ils sont un peu petit, mais tous les autres mensonge est maintenant cette couleur grise.

106
00:08:16,700 --> 00:08:21,030
Alors ajoutez en quelques plus et vous pouvez voir qu'ils alternent parfait.

107
00:08:21,020 --> 00:08:25,370
Maintenant, nous allons aborder la question de la hauteur des mensonges et aussi le rembourrage.

108
00:08:25,760 --> 00:08:36,540
La première chose à faire est de leur donner une hauteur de 40 pixels de sorte que tous alliés hauteur 40 x et nous allons revenir rafraîchir.

109
00:08:36,950 --> 00:08:39,000
OK pour qu'ils prennent la bonne quantité d'espace.

110
00:08:39,000 --> 00:08:42,620
Maintenant, si nous les comparons, la police a quelques problèmes.

111
00:08:42,620 --> 00:08:44,600
Et aussi nous devons ajouter un peu de rembourrage.

112
00:08:44,970 --> 00:08:51,570
Ensuite, nous allons changer la propriété hauteur ligne sur les mensonges de sorte que notre texte est centré verticalement.

113
00:08:51,570 --> 00:08:55,050
À l'heure actuelle, la ligne est essentiellement cette hauteur.

114
00:08:55,080 --> 00:09:09,510
Nous allons faire prendre les 40 pixels entiers vous montrer la hauteur de ligne 40 x et qui ne changera pas la taille de la police, il suffit de modifier la taille de la ligne.

115
00:09:09,540 --> 00:09:10,880
C'est maintenant 40 pixels.

116
00:09:10,880 --> 00:09:13,850
La ligne occupe donc toute cette zone.

117
00:09:14,150 --> 00:09:21,020
La prochaine chose mineure est la couleur que nous avons de noir pur et la couleur que j'ai utilisé n'est pas exactement noir.

118
00:09:21,060 --> 00:09:22,820
Il est légèrement plus léger.

119
00:09:23,070 --> 00:09:33,530
Donc, nous allons définir la couleur et il est six six six rafraîchir et puis nous allons ensuite nous allons aborder l'entrée.

120
00:09:33,540 --> 00:09:35,260
Nous avons donc quelques choses à faire.

121
00:09:35,490 --> 00:09:39,660
Le premier est de s'assurer qu'il prend la bonne quantité d'espace.

122
00:09:39,770 --> 00:09:45,740
Donc, cette entrée est beaucoup plus grande et ce n'est pas seulement le rembourrage ou la marge de la taille de la police est plus grande.

123
00:09:45,750 --> 00:09:47,420
Nous avons une nouvelle couleur de fond aussi bien.

124
00:09:47,750 --> 00:09:49,700
Et il ya une frontière quand nous cliquons.

125
00:09:49,740 --> 00:09:54,610
Alors travaillons sur tous ceux et nous allons commencer par simplement ajouter une taille de police plus grande.

126
00:09:54,840 --> 00:10:05,420
Nous allons donc sélectionner la taille de police d'entrée et nous allons définir la taille de la police à 18 pixels.

127
00:10:05,960 --> 00:10:14,570
Et pendant que nous sommes ici nous allons faire la couleur de fond ainsi que la couleur de fond et il est le même f 7 7 1/2 7.

128
00:10:14,730 --> 00:10:16,350
Juste comme ça.

129
00:10:16,760 --> 00:10:18,040
Et nous allons rafraîchir.

130
00:10:18,770 --> 00:10:19,510
D'ACCORD.

131
00:10:19,700 --> 00:10:21,180
Nous nous rapprochons.

132
00:10:21,170 --> 00:10:29,880
La prochaine chose que nous allons faire est d'ajouter une largeur et la largeur que nous allons lui donner est de 100 pour cent.

133
00:10:29,880 --> 00:10:33,590
Donc, en ce moment, il ne fait qu'une partie du chemin à travers le conteneur.

134
00:10:33,600 --> 00:10:36,820
Si nous rafraîchissons il va maintenant tout le chemin.

135
00:10:37,050 --> 00:10:39,200
Mais nous avons quelques petits problèmes.

136
00:10:39,210 --> 00:10:42,970
La première chose que nous voulons prendre en charge est un peu de rembourrage là-dedans.

137
00:10:43,400 --> 00:10:50,320
Donc, nous allons ajouter un rembourrage de 13 pixels sur les 13 premiers pixels sur le côté à droite.

138
00:10:50,370 --> 00:10:54,960
13 pixels sur le bas et 20 pixels sur la gauche.

139
00:10:54,950 --> 00:10:56,250
Donc vous pouvez voir sur celui-ci.

140
00:10:56,550 --> 00:10:58,770
Nous avons le haut et le bas sont 13.

141
00:10:59,000 --> 00:11:01,550
Et à gauche il y a 20 pixels.

142
00:11:01,590 --> 00:11:07,430
Donc, si j'étais frais Nous avons maintenant une plus grande entrée qui prend la bonne quantité d'espace.

143
00:11:07,590 --> 00:11:11,670
Nous avons un problème, c'est que l'entrée est trop longue.

144
00:11:11,790 --> 00:11:27,710
Quand nous avons dit que avec devrait être de 100 pour cent que avec était en fait juste le contenu et il n'a pas inclus le rembourrage et il n'a pas inclus la marge, ce qui signifie que notre entrée va à long passé la fin de la div et plutôt que de messing Avec le rembourrage.

145
00:11:27,770 --> 00:11:33,820
Je veux montrer une autre façon de le changer qui est une propriété appelée encadrer la taille.

146
00:11:33,840 --> 00:11:41,400
Donc, avec le bloc de dimensionnement, vous avez quelques options différentes, mais il contrôle essentiellement la façon dont la boîte est de taille du modèle de boîte.

147
00:11:41,390 --> 00:11:44,100
Et nous allons le changer à la boîte frontière Dasch.

148
00:11:44,270 --> 00:11:52,740
Et ce que je vais juste lire, il dit la largeur et la hauteur des propriétés comprennent le rembourrage et la bordure, mais pas la marge.

149
00:11:52,800 --> 00:12:05,170
Donc, si nous le changeons en boîte de bordure que je vais faire maintenant, nous allons dans ici juste ajouter la boîte boîte de dimensionnement de boîte et l'enregistrer avant que je continue.

150
00:12:05,310 --> 00:12:10,250
Je vais souligner que c'est une de ces propriétés que nous voulons avoir les préfixes.

151
00:12:10,250 --> 00:12:15,170
Ainsi, le kit Web et Mozy sont Moz et le désordre de Microsoft.

152
00:12:15,540 --> 00:12:16,850
Je ne vais pas le faire maintenant.

153
00:12:16,910 --> 00:12:18,250
Il sera dans le code de la solution.

154
00:12:18,410 --> 00:12:20,330
Mais il suffit de beaucoup de temps pour taper.

155
00:12:20,660 --> 00:12:25,940
Ainsi il fonctionnera juste comment il est dans le chrome au moins je l'actualise maintenant.

156
00:12:26,040 --> 00:12:32,180
Notre boîte inclut le rembourrage dans la frontière mais elle n'inclut pas la marge.

157
00:12:32,180 --> 00:12:34,820
Nous nous retrouvons ainsi avec un ajustement parfait.

158
00:12:34,880 --> 00:12:39,220
Ensuite, je vais donner la police d'une couleur quand je tape là-dedans.

159
00:12:39,620 --> 00:12:41,130
Donc, tout ce que nous devons faire.

160
00:12:41,330 --> 00:12:49,920
Je vais juste prendre la même couleur de la H-1 et descendre à notre entrée et de dire que la couleur c'est cette couleur.

161
00:12:49,910 --> 00:12:54,400
Et si nous rafraîchissons maintenant et nous commençons à taper là-bas nous allons.

162
00:12:54,410 --> 00:12:56,290
Maintenant, nous allons nous concentrer sur l'effet.

163
00:12:56,580 --> 00:13:03,860
Lorsque nous cliquons sur ce que l'on appelle la mise au point dans l'entrée, vous pouvez voir ici que nous obtenons une bordure autour d'elle.

164
00:13:03,920 --> 00:13:05,060
Nous devons donc travailler à ce sujet.

165
00:13:05,120 --> 00:13:08,050
Actuellement, nous avons l'effet de mise au point par défaut.

166
00:13:08,120 --> 00:13:17,590
Il y a donc un sélecteur pour ce point d'entrée comme le pseudo-sélecteur.

167
00:13:17,650 --> 00:13:21,510
Ces cellules ne s'exécutent que lorsque nous nous sommes concentrés sur une entrée.

168
00:13:21,920 --> 00:13:27,310
Donc, je vais faire le fond blanc quand on se concentre sur elle.

169
00:13:27,570 --> 00:13:47,180
Je vais aussi lui donner une bordure de trois pixels solides La couleur bleue avec laquelle nous avons travaillé et nous allons lui donner un aperçu de pas un contour fait référence à ce point fort ennuyeux que nous obtenons à partir du navigateur lui-même.

170
00:13:47,180 --> 00:13:56,610
Maintenant si nous nous concentrons sur l'entrée nous obtenons cette nouvelle frontière bleue et nous changeons également la couleur de fond ainsi elle est grise maintenant elle est blanche.

171
00:13:57,570 --> 00:14:02,850
Donc, c'est tout ce que nous devons faire pour l'entrée, même si nous devrions aller et ajouter le texte réservé que nous avons ici.

172
00:14:03,030 --> 00:14:10,620
Donc je vais aller à l'index HTL et à côté de l'entrée ou dans l'entrée ajoutera l'attribut d'espace réservé.

173
00:14:10,910 --> 00:14:12,270
Et cela peut être ce que vous voulez.

174
00:14:12,470 --> 00:14:13,460
Je vais juste faire match.

175
00:14:13,490 --> 00:14:18,800
Donc, c'est ajouter de nouveaux à faire et à rafraîchir.

176
00:14:18,840 --> 00:14:19,490
Voilà.