1
00:00:00,270 --> 00:00:01,530
Welkom terug.

2
00:00:01,530 --> 00:00:08,580
Nu we de basisfunctionaliteit van onze To Do lijst app gedaan is het tijd voor ons te concentreren op waardoor het lijkt alsof dit.

3
00:00:08,880 --> 00:00:11,430
Dus we hebben zeker wel een manier om te gaan.

4
00:00:11,550 --> 00:00:14,220
En we gaan gewoon om dit een stuk aan te vallen op een moment.

5
00:00:14,280 --> 00:00:17,080
Ik zal proberen en doe dit in de meest logische volgorde mogelijk.

6
00:00:17,220 --> 00:00:28,740
We beginnen met een aantal van de grotere stukken, zoals de achtergrond kleuren en lettertypen ervoor te zorgen dat we de juiste marge en padding op deze grote container hier en dan zullen we ons richten op een aantal van de meer nuance dingen.

7
00:00:28,760 --> 00:00:30,460
OK laten we hier beginnen.

8
00:00:30,480 --> 00:00:33,200
Het eerste wat we doen Ik zal een volledig scherm te doen.

9
00:00:33,720 --> 00:00:35,670
Laten we beginnen met één druk deze naar beneden.

10
00:00:35,670 --> 00:00:37,120
Dit is onze container div.

11
00:00:37,440 --> 00:00:41,630
We zullen een marge toe te voegen aan de top, zodat we meer ruimte hier.

12
00:00:41,910 --> 00:00:47,180
Dus we terug naar onze C S S gaan en kan sluiten of javascript voor nu.

13
00:00:47,670 --> 00:00:52,520
Onze div heeft een idee van de verpakking en dan gaan we en selecteert u die hier die u al hebt gedaan.

14
00:00:52,860 --> 00:00:59,550
En in plaats van een marge van nul OTTO Well geven honderd pixels aan de boven- en onderkant.

15
00:00:59,820 --> 00:01:05,690
En vergeet niet dat we de x nodig als we nul we geen X nodig heeft, maar als we een nummer wat we doen.

16
00:01:05,880 --> 00:01:07,230
Laten we nu eens een kijkje nemen.

17
00:01:07,650 --> 00:01:10,100
OK dus nu zijn ze beginnen op dezelfde plaats.

18
00:01:10,200 --> 00:01:12,400
Ze hebben dezelfde marge daar.

19
00:01:12,420 --> 00:01:18,090
Het volgende wat we doen is het toevoegen van een achtergrondkleur op deze houder, die deze heeft.

20
00:01:18,090 --> 00:01:22,830
Het is een beetje moeilijk te zien, maar als ik iets verwijderen toont door in de rug.

21
00:01:22,950 --> 00:01:24,570
Het is deze kleur hier.

22
00:01:24,630 --> 00:01:25,700
Dus dat opnieuw.

23
00:01:26,080 --> 00:01:28,190
Dus we zullen doorgaan en toevoegen dat.

24
00:01:28,830 --> 00:01:34,680
Dus in plaats van de verpakking goed zeggen de achtergrond en de kleur.

25
00:01:34,680 --> 00:01:39,680
Ik lees net het uit is F 7 7 na 7.

26
00:01:39,960 --> 00:01:41,210
Gewoon zo.

27
00:01:41,850 --> 00:01:43,570
En laten we eens kijken hoe dat eruit ziet.

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

29
00:01:44,490 --> 00:01:50,430
Dus hebben we dezelfde grijze kleur die we hebben hier.

30
00:01:50,430 --> 00:01:52,790
Het is hetzelfde lichtgrijs.

31
00:01:52,830 --> 00:01:54,990
Het volgende wat we doen is het werk op de grens.

32
00:01:55,230 --> 00:01:57,460
En dit eigenlijk geen rand.

33
00:01:57,540 --> 00:02:00,840
Wat het wel hebben, is een zeer lichte doos schaduw.

34
00:02:00,840 --> 00:02:02,870
Dus hebben we nog niet gezien box schaduw.

35
00:02:02,940 --> 00:02:09,820
Ik zal laten zien dat hier en ga in MT-NW en het is gewoon een manier van het toevoegen van een schaduw effect.

36
00:02:09,870 --> 00:02:19,750
Dus als ik naar beneden scrollen kun je hier ziet zijn een aantal verschillende box schaduwen en we gaan om een ​​zeer licht een te hebben, maar als je merkt rond dit is er echt een lichte schaduw.

37
00:02:20,220 --> 00:02:39,020
Dus de syntaxis en de schaduw die we gaan gebruiken zal zich te ontdoen van onze grens is doos dash schaduw 0 0 3 pixels en vervolgens een kleur en onze kleur het gaat alleen maar in principe zwart te zijn, maar het is R.G ..

38
00:02:39,180 --> 00:02:43,260
En dan gaan we het echt heel transparant te maken.

39
00:02:43,560 --> 00:02:45,380
Dus gewoon nauwelijks merkbaar.

40
00:02:45,400 --> 00:02:46,890
En als ik te vernieuwen.

41
00:02:46,890 --> 00:02:52,090
We hebben geen rand, maar nu is er een lichte schaduw rond dit element.

42
00:02:52,710 --> 00:02:53,170
OK.

43
00:02:53,250 --> 00:02:55,460
Dat is alles wat we zullen doen om de container voor nu.

44
00:02:55,770 --> 00:02:57,480
Laten we eens een aanval op de H-1.

45
00:02:57,480 --> 00:02:59,490
Dus deze rubriek hier.

46
00:02:59,580 --> 00:03:04,320
Dus dat is in onze tijd hem l slechts beschouwd als een H1.

47
00:03:04,320 --> 00:03:06,710
Het hoeft niet een ID of iets en dat is prima.

48
00:03:06,960 --> 00:03:12,120
Laten we naar de CSSA dossier en beginnen met het toevoegen van een achtergrondkleur.

49
00:03:12,390 --> 00:03:30,010
Dus we zullen elk een te selecteren en de achtergrond is een kleur die 2 9 8 0 9 zijn en ze zullen slaan en te vernieuwen en we hebben nu de juiste schaduw van blauw.

50
00:03:31,210 --> 00:03:38,890
Dus we ook het lettertype wijzigen kleur wit en snel te laten zien dat.

51
00:03:38,970 --> 00:03:39,450
Okee.

52
00:03:39,510 --> 00:03:42,890
Langzaam tippen dichterbij hier.

53
00:03:43,050 --> 00:03:51,160
Het volgende wat we doen is er geen marge en nu zullen we gewoon te ontdoen van deze ruimte die we hier hadden.

54
00:03:51,420 --> 00:03:53,220
Zoals je hier kunt zien is er geen marge.

55
00:03:53,220 --> 00:03:54,440
Dit is onze H-1.

56
00:03:54,510 --> 00:03:55,970
Er is padding hier.

57
00:03:56,340 --> 00:03:59,550
Zodat de tekst niet goed optrekken tegen de rand als het hier doet.

58
00:03:59,700 --> 00:04:03,330
Maar er is geen marge op de buitenkant van de blauwe doos.

59
00:04:03,360 --> 00:04:10,130
Dit is onze tekstinvoer en dat is ook toegenomen opvulling, maar er is geen marge rond dat ook niet.

60
00:04:10,200 --> 00:04:13,360
Dus we zullen beginnen met het toevoegen van een aantal padding rond onze To Do lijst.

61
00:04:13,370 --> 00:04:24,240
H-1 Dus hier gaan we 10 pixels aan de boven- en onderkant en 20 pixels naar links en rechts en slaan.

62
00:04:25,260 --> 00:04:27,150
Je kunt zien dat we steeds dichterbij.

63
00:04:27,480 --> 00:04:29,000
We moeten om de lettergrootte te wijzigen.

64
00:04:29,070 --> 00:04:30,350
Noodzaak om het lettertype te wijzigen.

65
00:04:30,420 --> 00:04:34,900
Ook zullen we dat allemaal hoofdletters en we kunnen dat doen door nu.

66
00:04:34,980 --> 00:04:40,010
U moet weten een van mijn favorieten is de tekst te transformeren hoofdletters.

67
00:04:40,320 --> 00:04:42,480
Ik denk dat het wel cool.

68
00:04:42,480 --> 00:04:56,840
Daar gaan we krijgen we in hoofdletters de lettergrootte moet worden 24 pixels zodat lettergrootte 24 x en op te slaan OK het laatste wat we zullen doen is ervoor zorgen dat het een normaal lettertype gewicht.

69
00:04:57,020 --> 00:05:00,970
Dus een H1 standaard is eigenlijk vet en we willen dat niet.

70
00:05:01,290 --> 00:05:09,310
Dus we Funt manier te doen normaal of we kunnen ook schrijven tekengewicht 400.

71
00:05:09,320 --> 00:05:10,290
Daar gaan we.

72
00:05:10,350 --> 00:05:17,510
Nu is het gewoon een kwestie van het veranderen van het lettertype dat zal terugkomen naar het volgende wat je wilt aan te pakken is het wegwerken van deze bullet points.

73
00:05:17,510 --> 00:05:20,240
U kunt zien of we geen bullet points hier niet hebben.

74
00:05:20,250 --> 00:05:23,430
Die bullet points worden beschouwd als de standaard browser-stijl.

75
00:05:23,510 --> 00:05:25,360
Dus we zullen negeren dat.

76
00:05:25,400 --> 00:05:32,270
We gaan naar de UB te kiezen dat ze de binnenkant van en zeg lijststijl geen.

77
00:05:32,370 --> 00:05:37,790
En als we terug te gaan en te vernieuwen we nu hebben geen bullet points.

78
00:05:37,800 --> 00:05:56,240
Een ander ding dat ik ga doen is eer je goed stel de marge nul te zijn en de opvulling op nul en het zal hier verfrissen en niet alleen te ontdoen van de ruimte aan de zijkanten van de put hebben we de ruimte hier dat we moeten werken met, maar dat is de leugen niet de UB zelf.

79
00:05:56,250 --> 00:05:58,440
Dus we terug naar die komen.

80
00:05:58,440 --> 00:06:04,760
Laten we nu eens toe te voegen in het juiste lettertype en de naam van dit lettertype is rubato en het is onderdeel van Google lettertypen.

81
00:06:04,880 --> 00:06:09,400
Dus ik heb die open hier en ik zal gewoon een zoekopdracht voor te rubato.

82
00:06:09,620 --> 00:06:10,720
En hier gaan we.

83
00:06:10,770 --> 00:06:14,230
Voeg toe aan collectie dan moet gebruiken.

84
00:06:14,510 --> 00:06:16,490
En we gaan normale manier willen.

85
00:06:16,800 --> 00:06:20,660
We zullen voegen in het vet en ook medium.

86
00:06:20,660 --> 00:06:25,620
Laten we nu eens gaan en kopieer deze link naar onze HMO en kunnen we dit venster te sluiten.

87
00:06:25,980 --> 00:06:37,520
Ga terug naar waar elk team hier en gewoon top pasta die in en sla dan gaan we naar ons om te zien evalueren en we zullen een aantal stijlen toe te voegen aan het lichaam.

88
00:06:37,740 --> 00:06:44,780
Alles maakt gebruik van dit lettertype, dus we zullen gewoon toe te voegen in fontfamilie robot.

89
00:06:45,530 --> 00:06:46,680
Gewoon zo.

90
00:06:47,390 --> 00:06:53,650
En als we nu terug te gaan en te vernieuwen onze H-1 is veel er mooi.

91
00:06:53,660 --> 00:06:59,960
Afgezien van deze knop die we niet hebben aangeraakt op alle fonts de zelfde kleur van de afstand dat alles is goed.

92
00:06:59,970 --> 00:07:01,970
En onze bondgenoten daar krijgt.

93
00:07:01,980 --> 00:07:03,060
Zij hebben het juiste lettertype.

94
00:07:03,140 --> 00:07:06,680
We moeten werken op een aantal van de afstand en opvulling problemen.

95
00:07:06,690 --> 00:07:10,660
Het volgende dat we zullen aanpakken zijn de achtergrondkleuren op de leugens.

96
00:07:11,250 --> 00:07:12,750
Dus elke andere leugen.

97
00:07:12,930 --> 00:07:19,280
Het gaat van een witte kleur zuiver wit om deze grijze kleur die we hebben als achtergrond van de het.

98
00:07:19,470 --> 00:07:24,340
Dus we kunnen de SS gebruiken om stijlen toe te voegen aan elk ander bondgenoot.

99
00:07:24,380 --> 00:07:25,450
Dus laten we dat nu doen.

100
00:07:25,500 --> 00:07:43,520
Het eerste wat we doen is het selecteren van alle bondgenoten en geef ze een achtergrond van witte, zodat we kunnen doen met F F F of wit of R-GA 255 255-55 en dan zullen we elke andere leugen te doen.

101
00:07:43,740 --> 00:07:50,080
En de syntax want dat is een leugen en kind te eindigen.

102
00:07:50,360 --> 00:07:53,970
En dat ook en goed gedefinieerd een patroon van ieder ander.

103
00:07:54,140 --> 00:07:58,670
En als we de drie en het zou zeggen dat elke derde, maar we willen gewoon elke andere.

104
00:07:59,000 --> 00:08:08,880
En we zullen de achtergrondkleur maken dezelfde f7 f7 f7 die we hebben gebruikt voor de container achtergrond en te vernieuwen.

105
00:08:08,880 --> 00:08:16,500
Nu is het moeilijk te zien omdat ze een beetje klein, maar elke andere leugen is nu deze grijze kleur.

106
00:08:16,700 --> 00:08:21,030
Dus voeg in een paar meer en je kunt zien dat ze afwisselen perfect.

107
00:08:21,020 --> 00:08:25,370
Laten we nu de kwestie van de hoogte van de leugens en ook de padding aan te pakken.

108
00:08:25,760 --> 00:08:36,540
Het eerste wat je moet doen is hen een hoogte van 40 pixels, zodat alle bondgenoten hoogte 40 x en we zullen terug te gaan vernieuwen.

109
00:08:36,950 --> 00:08:39,000
OK dus ze nemen de juiste hoeveelheid ruimte.

110
00:08:39,000 --> 00:08:42,620
Nu als we ze vergeleken het lettertype heeft een aantal problemen.

111
00:08:42,620 --> 00:08:44,600
En ook moeten we een aantal padding toe te voegen.

112
00:08:44,970 --> 00:08:51,570
Volgende gaan de regelhoogte woning op de leugens veranderen zodat onze tekst verticaal is gecentreerd.

113
00:08:51,570 --> 00:08:55,050
Op dit moment is de lijn is in principe is deze hoog.

114
00:08:55,080 --> 00:09:09,510
We gaan om het te laten nemen van de gehele 40 pixels tonen je line-hoogte 40 x en dat zal de grootte van het lettertype het gewoon verandert de grootte van de lijn niet wijzigen.

115
00:09:09,540 --> 00:09:10,880
Het is nu 40 pixels.

116
00:09:10,880 --> 00:09:13,850
Dus de lijn neemt dit hele gebied.

117
00:09:14,150 --> 00:09:21,020
Het volgende klein minpunt is de kleur die we hebben puur zwart en de kleur die ik heb gebruikt is niet echt zwart.

118
00:09:21,060 --> 00:09:22,820
Het is iets lichter.

119
00:09:23,070 --> 00:09:33,530
Dus we kleur in te stellen en het is zes zes zes refresh en dan gaan we komende laten we pakken de input.

120
00:09:33,540 --> 00:09:35,260
Dus we hebben een paar dingen die je moet doen.

121
00:09:35,490 --> 00:09:39,660
De eerste daarvan is ervoor zorgen dat het comité de juiste hoeveelheid ruimte.

122
00:09:39,770 --> 00:09:45,740
Dus deze ingang is veel groter en het is niet alleen padding of marge de lettergrootte groter is.

123
00:09:45,750 --> 00:09:47,420
We hebben een nieuwe kleur als achtergrond ook.

124
00:09:47,750 --> 00:09:49,700
En er is een grens toen we klikken.

125
00:09:49,740 --> 00:09:54,610
Dus laten we werken aan al deze en we beginnen door gewoon toe te voegen in een groter lettertype.

126
00:09:54,840 --> 00:10:05,420
Dus we ingang lettergrootte en we zullen lettergrootte te zijn 18 pixels ingesteld.

127
00:10:05,960 --> 00:10:14,570
En terwijl we hier zullen we de achtergrondkleur, evenals de achtergrondkleur te doen en het is hetzelfde f 7 7 1/2 7.

128
00:10:14,730 --> 00:10:16,350
Gewoon zo.

129
00:10:16,760 --> 00:10:18,040
En laten we vernieuwen.

130
00:10:18,770 --> 00:10:19,510
OK.

131
00:10:19,700 --> 00:10:21,180
We komen dichterbij.

132
00:10:21,170 --> 00:10:29,880
Het volgende wat we doen is het toevoegen van een breedte en de breedte die we gaan geven is 100 procent.

133
00:10:29,880 --> 00:10:33,590
Dus nu is het alleen maar een deel van de weg over de container.

134
00:10:33,600 --> 00:10:36,820
Als we vernieuwen het gaat nu helemaal over.

135
00:10:37,050 --> 00:10:39,200
Maar we hebben een paar kleine problemen.

136
00:10:39,210 --> 00:10:42,970
Eerste ding dat we willen zorgen voor enige opvulling in daar.

137
00:10:43,400 --> 00:10:50,320
Dus we gaan padding aan de kant toe te voegen 13 pixels op de top 13 pixels aan de rechterkant.

138
00:10:50,370 --> 00:10:54,960
13 pixels op de bodem en 20 pixels aan de linkerzijde.

139
00:10:54,950 --> 00:10:56,250
Zodat u kunt zien op deze.

140
00:10:56,550 --> 00:10:58,770
We hebben boven en onder zijn 13.

141
00:10:59,000 --> 00:11:01,550
En aan de linkerkant is er er 20 pixels.

142
00:11:01,590 --> 00:11:07,430
Dus als ik waren vers We hebben nu een grotere input die in beslag neemt de juiste hoeveelheid ruimte.

143
00:11:07,590 --> 00:11:11,670
Wij doen een probleem en dat is dat de input is nu te lang te hebben.

144
00:11:11,790 --> 00:11:27,710
Toen we zeiden dat met 100 procent moet zijn dat met was eigenlijk alleen de inhoud en het duurde niet de vulling en het niet onder de marge, wat betekent dat onze inbreng gaat naar lang voorbij het einde van de div en in plaats van messing met de vulling.

145
00:11:27,770 --> 00:11:33,820
Ik bedoel om een ​​andere manier te veranderen dat is een eigenschap genaamd Box sizing te laten zien.

146
00:11:33,840 --> 00:11:41,400
Dus met blok dimensionering heb je een paar verschillende opties, maar het in principe bepaalt hoe de doos heeft afmetingen van de box model.

147
00:11:41,390 --> 00:11:44,100
En we gaan om het te veranderen om Dasch box grens.

148
00:11:44,270 --> 00:11:52,740
En wat dit doet zal ik lees net het zegt de breedte en hoogte eigenschappen zijn onder andere de opvulling en de grens, maar niet de marge.

149
00:11:52,800 --> 00:12:05,170
Dus als we het te veranderen aan de grens doos die ik doe nu gaan we hier toe te voegen doos sizing orde doos en sla het op voordat ik verder gaan.

150
00:12:05,310 --> 00:12:10,250
Ik zal erop wijzen dat dit een van die eigenschappen die we willen de voorvoegsels hebben.

151
00:12:10,250 --> 00:12:15,170
Dus de Web Kit en Mozy zijn Moz en de puinhoop van Microsoft.

152
00:12:15,540 --> 00:12:16,850
Ik ben niet van plan dat nu te doen.

153
00:12:16,910 --> 00:12:18,250
Het zal in de oplossing code.

154
00:12:18,410 --> 00:12:20,330
Maar het duurt slechts een lange tijd om te typen op.

155
00:12:20,660 --> 00:12:25,940
Dus het zal werken gewoon hoe het is in Chrome tenminste ik nu vernieuwen.

156
00:12:26,040 --> 00:12:32,180
Ons vak is inclusief de opvulling in de border, maar het omvat niet de marge.

157
00:12:32,180 --> 00:12:34,820
Dus we eindigen met een perfecte pasvorm.

158
00:12:34,880 --> 00:12:39,220
Volgende ga ik het lettertype een kleur te geven wanneer ik typ daar.

159
00:12:39,620 --> 00:12:41,130
Dus alles wat we moeten doen.

160
00:12:41,330 --> 00:12:49,920
Ik ga gewoon door met de zelfde kleur van de H-1 en ga naar onze inbreng en gewoon zeggen kleur het is die kleur.

161
00:12:49,910 --> 00:12:54,400
En als we nu verversen en beginnen we te typen daar gaan we.

162
00:12:54,410 --> 00:12:56,290
Laten we nu focussen op het effect.

163
00:12:56,580 --> 00:13:03,860
Toen we op die wordt genoemd richt in de ingang die u hier kunt zien we een rand er omheen.

164
00:13:03,920 --> 00:13:05,060
Dus moeten we aan werken.

165
00:13:05,120 --> 00:13:08,050
Op dit moment hebben we de standaard focus effect.

166
00:13:08,120 --> 00:13:17,590
Dus er is een selector voor die ingang colon aandacht net als de hover pseudo selector.

167
00:13:17,650 --> 00:13:21,510
Deze cellen zullen alleen worden uitgevoerd als we hebben gericht op een ingang.

168
00:13:21,920 --> 00:13:27,310
Dus ik ga naar de achtergrond wit te maken wanneer we ons richten op het.

169
00:13:27,570 --> 00:13:47,180
Ik ben ook van plan om het een grens van drie pixels stevige De blauwe kleur die we hebben gewerkt met geven en we zullen geven een overzicht van het niet een overzicht verwijst naar dit vervelende hoogtepunt dat we krijgen van de browser zelf.

170
00:13:47,180 --> 00:13:56,610
Nu, als we ons richten op de input krijgen we deze nieuwe blauwe rand en we hebben ook de achtergrondkleur veranderen, dus het is grijs nu is het wit.

171
00:13:57,570 --> 00:14:02,850
Dus dat is alles wat we moeten doen voor het invoeren maar we moeten gaan en voeg de placeholder tekst die we hier hebben.

172
00:14:03,030 --> 00:14:10,620
Dus ik ga naar de index HTL en naast de ingang of in de input zal de placeholder attribuut toe te voegen.

173
00:14:10,910 --> 00:14:12,270
En dit kan zijn wat je wilt.

174
00:14:12,470 --> 00:14:13,460
Ik zal gewoon maken het match.

175
00:14:13,490 --> 00:14:18,800
Dus is het toevoegen van nieuwe te doen en te vernieuwen.

176
00:14:18,840 --> 00:14:19,490
Daar gaan we.