1
00:00:00,270 --> 00:00:01,530
Witamy spowrotem.

2
00:00:01,530 --> 00:00:08,580
Teraz, gdy mamy podstawową funkcjonalność naszej lista rzeczy do zrobienia aplikacji wykonanej nadszedł czas dla nas, aby skupić się na co wygląda następująco.

3
00:00:08,880 --> 00:00:11,430
Więc na pewno mają dość sposobów, aby przejść.

4
00:00:11,550 --> 00:00:14,220
A my po prostu zaatakuje ten jeden kawałek na raz.

5
00:00:14,280 --> 00:00:17,080
Postaram się zrobić to w możliwie najbardziej logicznej kolejności.

6
00:00:17,220 --> 00:00:28,740
Zaczniemy od niektórych większych kawałków, takich jak kolory i czcionki tło upewniając się, że mamy do prawego marginesu i dopełnienie tego dużego pojemnika tu i wtedy będziemy koncentrować się na niektórych innych rzeczy Nuance.

7
00:00:28,760 --> 00:00:30,460
OK, zaczynajmy tutaj.

8
00:00:30,480 --> 00:00:33,200
Pierwszą rzeczą, którą zrobimy zrobię pełny ekran.

9
00:00:33,720 --> 00:00:35,670
Zacznijmy od tego po prostu przesuwając w dół.

10
00:00:35,670 --> 00:00:37,120
To jest nasz kontener div.

11
00:00:37,440 --> 00:00:41,630
Dodamy margines do góry tak, że mamy więcej miejsca tutaj.

12
00:00:41,910 --> 00:00:47,180
Więc wracamy do naszego C S i może zamknąć lub JavaScript do teraz.

13
00:00:47,670 --> 00:00:52,520
Nasz div ma pomysł pojemnika i potem pójdziemy i wybierz, które tutaj, które zostały już wykonane.

14
00:00:52,860 --> 00:00:59,550
I zamiast marginesem zerowym OTTO Well dać sto pikseli na górze i na dole.

15
00:00:59,820 --> 00:01:05,690
I pamiętaj, musimy X, jeśli mamy do zera nie musimy X, ale jeśli mamy wiele robimy.

16
00:01:05,880 --> 00:01:07,230
Rzućmy okiem teraz.

17
00:01:07,650 --> 00:01:10,100
OK, więc teraz oni zaczynają się w tym samym miejscu.

18
00:01:10,200 --> 00:01:12,400
Mają taką samą marżę tam.

19
00:01:12,420 --> 00:01:18,090
Następną rzeczą, którą zrobimy jest dodać kolor tła do tego kontenera, który ten ma.

20
00:01:18,090 --> 00:01:22,830
Jest to trochę trudne do zauważenia, ale kiedy coś usuwać pokazuje obrońców z tyłu.

21
00:01:22,950 --> 00:01:24,570
To ten kolor właśnie tutaj.

22
00:01:24,630 --> 00:01:25,700
Więc jeszcze raz.

23
00:01:26,080 --> 00:01:28,190
Więc będziemy iść dalej i dodać, że.

24
00:01:28,830 --> 00:01:34,680
Więc zamiast kontenera również powiedzieć, tło i kolor.

25
00:01:34,680 --> 00:01:39,680
Ja po prostu przeczytać ją to F 7 7 po 7 dniach.

26
00:01:39,960 --> 00:01:41,210
Właśnie tak.

27
00:01:41,850 --> 00:01:43,570
I zobaczmy, jak to wygląda.

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

29
00:01:44,490 --> 00:01:50,430
Więc mamy ten sam szary kolor, który mamy właśnie tutaj.

30
00:01:50,430 --> 00:01:52,790
To ten sam kolor jasnoszary.

31
00:01:52,830 --> 00:01:54,990
Następną rzeczą, którą zrobimy to praca na granicy.

32
00:01:55,230 --> 00:01:57,460
I to właściwie nie ma granicy.

33
00:01:57,540 --> 00:02:00,840
Co to ma to shadow box bardzo nieznaczne.

34
00:02:00,840 --> 00:02:02,870
Więc nie widzieliśmy jeszcze cień pudełko.

35
00:02:02,940 --> 00:02:09,820
Ja wykazać, że tu i przejść do MT-NW, a to jest po prostu sposobem na dodanie efektu cienia.

36
00:02:09,870 --> 00:02:19,750
Więc jeśli mogę przewinąć w dół można zobaczyć tutaj kilka różnych cienie box i będziemy mieć bardzo lekki jeden, ale jeśli zauważysz wokół to jest naprawdę lekki cień.

37
00:02:20,220 --> 00:02:39,020
Więc składnia i cień, który będziemy wykorzystywać będzie pozbyć się naszej granicy jest skrzynka rozdzielcza cień 0 0 3 pikseli, a następnie kolor i nasz kolor to będzie w zasadzie tylko czarne, ale to R.G ..

38
00:02:39,180 --> 00:02:43,260
A potem mamy zamiar zrobić to naprawdę bardzo przejrzyste.

39
00:02:43,560 --> 00:02:45,380
Więc ledwo zauważalne.

40
00:02:45,400 --> 00:02:46,890
A gdybym odświeżyć.

41
00:02:46,890 --> 00:02:52,090
Nie mamy granicę, ale teraz jest tam niewielki cień wokół tego elementu.

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

43
00:02:53,250 --> 00:02:55,460
To wszystko, co zrobimy z pojemnikiem na razie.

44
00:02:55,770 --> 00:02:57,480
Załóżmy zaatakować H-1.

45
00:02:57,480 --> 00:02:59,490
Więc ta pozycja się tutaj.

46
00:02:59,580 --> 00:03:04,320
Tak to jest w naszym wieku niego l prostu uważany za H1.

47
00:03:04,320 --> 00:03:06,710
To nie ma identyfikatora ani nic i to jest w porządku.

48
00:03:06,960 --> 00:03:12,120
Chodźmy do pliku CSSA i rozpocząć dodając w kolorze tła.

49
00:03:12,390 --> 00:03:30,010
Będziemy więc wybrać każdy z nich, a tłem jest kolor, który jest 2 9 8 0 wynosić 9 a oni zapisać i odświeżyć i teraz mamy prawidłowy odcień niebieskiego.

50
00:03:31,210 --> 00:03:38,890
Więc my też zmienić kolor czcionki na biały i szybko pokazać, że.

51
00:03:38,970 --> 00:03:39,450
W porządku.

52
00:03:39,510 --> 00:03:42,890
Powoli inching bliżej tutaj.

53
00:03:43,050 --> 00:03:51,160
Następną rzeczą, którą zrobimy, to dać mu żadnej swobody, a teraz musimy po prostu pozbyć się tego miejsca, które mieliśmy tutaj.

54
00:03:51,420 --> 00:03:53,220
Jak widać tutaj nie ma marginesu.

55
00:03:53,220 --> 00:03:54,440
To jest nasz H-1.

56
00:03:54,510 --> 00:03:55,970
Nie ma tu dopełnienia.

57
00:03:56,340 --> 00:03:59,550
Tak więc tekst nie idzie aż do krawędzi, jak to robi się tutaj.

58
00:03:59,700 --> 00:04:03,330
Ale nie ma marginesu na zewnątrz niebieskim polu.

59
00:04:03,360 --> 00:04:10,130
To jest nasza metoda wprowadzania tekstu, a także wzrosła wyściółka ale nie ma marginesu wokół, że obaj.

60
00:04:10,200 --> 00:04:13,360
Więc zaczniemy dodając trochę wyściółki wokół naszej listy zadań do wykonania.

61
00:04:13,370 --> 00:04:24,240
H-1 Więc tutaj mamy zamiar dodać 10 pikseli na górze i na dole i 20 pikseli w lewo i prawo i oszczędzać.

62
00:04:25,260 --> 00:04:27,150
Można zobaczyć, że jesteśmy coraz bliżej.

63
00:04:27,480 --> 00:04:29,000
Musimy zmienić rozmiar czcionki.

64
00:04:29,070 --> 00:04:30,350
Trzeba zmienić czcionkę.

65
00:04:30,420 --> 00:04:34,900
My także będą wielkie litery to wszystko i możemy to zrobić teraz.

66
00:04:34,980 --> 00:04:40,010
Powinieneś wiedzieć, jeden z moich ulubionych jest przekształcenie tekstu wielkimi literami.

67
00:04:40,320 --> 00:04:42,480
Po prostu myślę, że to całkiem fajne.

68
00:04:42,480 --> 00:04:56,840
Nie pójdziemy mamy wielkie litery rozmiar czcionki musi być 24 pikseli rozmiar czcionki 24 x tak i zapisać OK ostatnią rzeczą, którą możemy zrobić, to upewnić się, że jest to normalna waga czcionki.

69
00:04:57,020 --> 00:05:00,970
Tak więc H1 domyślnie jest rzeczywiście pogrubione, a my tego nie chcemy.

70
00:05:01,290 --> 00:05:09,310
Więc zrobimy funt sposób normalny lub możemy również napisać wagę czcionki 400.

71
00:05:09,320 --> 00:05:10,290
No to jedziemy.

72
00:05:10,350 --> 00:05:17,510
Teraz to tylko kwestia zmiany czcionki, która wróci do następnej rzeczy, które chcesz zająć jest pozbycie się tych punktach.

73
00:05:17,510 --> 00:05:20,240
Można sprawdzić, czy nie mamy żadnych wypunktowania tutaj.

74
00:05:20,250 --> 00:05:23,430
Te wypunktowania są uważane domyślny styl przeglądarki.

75
00:05:23,510 --> 00:05:25,360
Więc będziemy przesłonić tego.

76
00:05:25,400 --> 00:05:32,270
Mamy zamiar wybrać UL że są wewnątrz i powiedzieć lista styl żadnego.

77
00:05:32,370 --> 00:05:37,790
A jeśli wrócimy i odświeżyć obecnie nie ma żadnych wypunktowania.

78
00:05:37,800 --> 00:05:56,240
Inną rzeczą, mam zamiar zrobić, to cześć Ci dobrze ustawić margines wynosi zero, a wyściółka wynosi zero i będzie odświeżyć tutaj, a nie po prostu pozbyć przestrzeni po bokach przestrzeni dobrze mamy tutaj, że my trzeba pracować, ale że to nie kłamstwo sama ul.

79
00:05:56,250 --> 00:05:58,440
Więc wracamy do tego.

80
00:05:58,440 --> 00:06:04,760
Teraz dodajmy w odpowiedniej czcionki oraz nazwę tej czcionki jest rubato i to jest część czcionek Google.

81
00:06:04,880 --> 00:06:09,400
Więc muszę, że otwarte tutaj, a ja po prostu zrobić go szukać rubato.

82
00:06:09,620 --> 00:06:10,720
I jedziemy.

83
00:06:10,770 --> 00:06:14,230
Dodaj do kolekcji, a następnie użyć.

84
00:06:14,510 --> 00:06:16,490
I będziemy chcieli normalny sposób.

85
00:06:16,800 --> 00:06:20,660
Dodamy pogrubioną, a także medium.

86
00:06:20,660 --> 00:06:25,620
Teraz śmiało i skopiować ten link do naszej HMO i możemy zamknąć to okno.

87
00:06:25,980 --> 00:06:37,520
Wróć do miejsca, gdzie każdy zespół tutaj i po prostu się najwyższym pasty że i zapisywanie potem pojedziemy do naszego, aby zobaczyć oceny i dodamy kilka stylów do ciała.

88
00:06:37,740 --> 00:06:44,780
Wszystko wykorzystuje tę czcionkę więc musimy po prostu dodać rodziny fontów robota.

89
00:06:45,530 --> 00:06:46,680
Właśnie tak.

90
00:06:47,390 --> 00:06:53,650
A jeśli chcemy wrócić teraz i odświeżyć naszą H-1 jest dość dużo tam.

91
00:06:53,660 --> 00:06:59,960
Oprócz tego przycisku, które nie zostały dotknięte przez cały czcionek taki sam kolor odstępy wszystko, co jest dobre.

92
00:06:59,970 --> 00:07:01,970
A nasi sojusznicy dostają tam.

93
00:07:01,980 --> 00:07:03,060
Mają odpowiednią czcionkę.

94
00:07:03,140 --> 00:07:06,680
Musimy pracować na niektóre kwestie dystansowych i dopełnienia.

95
00:07:06,690 --> 00:07:10,660
Następną rzeczą, którą będziemy rozwiązania są kolory tła na kłamstwach.

96
00:07:11,250 --> 00:07:12,750
Więc każda inna kłamstwo.

97
00:07:12,930 --> 00:07:19,280
To idzie z białym kolorze czystej bieli do tego szarego koloru, który mamy jako tło The.

98
00:07:19,470 --> 00:07:24,340
Więc możemy użyć SS dodać style do każdego innego sojusznika.

99
00:07:24,380 --> 00:07:25,450
Więc zróbmy to teraz.

100
00:07:25,500 --> 00:07:43,520
Pierwszą rzeczą, jaką możemy zrobić, to wybrać wszystkie sojuszników i dać im tle białego, dzięki czemu możemy zrobić z F F F lub białe lub R-GA 255 255 do 55, a potem zrobimy co drugi kłamstwo.

101
00:07:43,740 --> 00:07:50,080
I składnia, że ​​to kłamstwo i dziecko do końca.

102
00:07:50,360 --> 00:07:53,970
I tak też i dobrze zdefiniowany wzorzec każdy inny.

103
00:07:54,140 --> 00:07:58,670
A jeśli zrobiliśmy trzy i byłoby powiedzieć, co trzeci, ale chcemy tylko co drugi.

104
00:07:59,000 --> 00:08:08,880
I zrobimy kolor tła taki sam F7 F7 F7, że używany jako tło pojemnika i odświeżyć.

105
00:08:08,880 --> 00:08:16,500
Teraz trudno zobaczyć, bo są trochę małe, ale każdy inny kłamstwem jest to kolor szary.

106
00:08:16,700 --> 00:08:21,030
Więc dodać trochę więcej i widać, że na przemian doskonały.

107
00:08:21,020 --> 00:08:25,370
Teraz porusza kwestii wysokości kłamstw, a także wypełnienia.

108
00:08:25,760 --> 00:08:36,540
Pierwszą rzeczą do zrobienia jest dać im wysokość 40 pikseli więc wszyscy sojusznicy 40 x wysokość i wrócimy odświeżenia.

109
00:08:36,950 --> 00:08:39,000
OK więc podjąć odpowiednią ilość miejsca.

110
00:08:39,000 --> 00:08:42,620
Teraz, jeśli je porównać czcionka ma jakieś problemy.

111
00:08:42,620 --> 00:08:44,600
A także musimy dodać trochę wyściółkę.

112
00:08:44,970 --> 00:08:51,570
Dalej idą do zmiany właściwości height linia na kłamstwach tak, że nasz tekst jest wyśrodkowany w pionie.

113
00:08:51,570 --> 00:08:55,050
Teraz linia jest w zasadzie ten wysoki.

114
00:08:55,080 --> 00:09:09,510
Mamy zamiar zrobić to trwać całe 40 pikseli pokazać wyrównać wysokość 40 X i że nie będzie zmieniać rozmiar czcionki po prostu zmienia rozmiar linii.

115
00:09:09,540 --> 00:09:10,880
Teraz 40 pikseli.

116
00:09:10,880 --> 00:09:13,850
Więc linia zajmuje cały ten obszar.

117
00:09:14,150 --> 00:09:21,020
Kolejne drobne rzeczy jest kolor mamy czysta czerń i kolor Kiedyś nie jest dokładnie czarny.

118
00:09:21,060 --> 00:09:22,820
To nieco lżejsze.

119
00:09:23,070 --> 00:09:33,530
Będziemy więc ustawić kolor i to jest sześć sześć sześć odświeżania, a potem iść dalej niech rozwiązać wejście.

120
00:09:33,540 --> 00:09:35,260
Więc mamy kilka rzeczy, które trzeba zrobić.

121
00:09:35,490 --> 00:09:39,660
Pierwszym z nich jest upewnić się, że ma się odpowiednią ilość miejsca.

122
00:09:39,770 --> 00:09:45,740
Więc to wejście jest znacznie większy i to nie tylko wypełnienie lub marża rozmiar czcionki jest większy.

123
00:09:45,750 --> 00:09:47,420
Mamy nowy kolor tła, jak również.

124
00:09:47,750 --> 00:09:49,700
I nie ma granicy, kiedy kliknij.

125
00:09:49,740 --> 00:09:54,610
Warto więc działać na wszystkich tych, i zaczniemy po prostu dodając w większym rozmiarze czcionki.

126
00:09:54,840 --> 00:10:05,420
Będziemy więc wybrać wejście rozmiaru czcionki, a my ustawić rozmiar czcionki, aby mieć więcej niż 18 pikseli.

127
00:10:05,960 --> 00:10:14,570
I choć jesteśmy tu zrobimy kolor tła oraz kolor tła i to samo f 7 7 1/2 7.

128
00:10:14,730 --> 00:10:16,350
Właśnie tak.

129
00:10:16,760 --> 00:10:18,040
I niech odświeżyć.

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

131
00:10:19,700 --> 00:10:21,180
Jesteśmy coraz bliżej.

132
00:10:21,170 --> 00:10:29,880
Następną rzeczą, którą zrobimy to dodać szerokość i szerokość, że mamy zamiar dać to 100 proc.

133
00:10:29,880 --> 00:10:33,590
Więc teraz to będzie tylko część drogi po drugiej stronie zbiornika.

134
00:10:33,600 --> 00:10:36,820
Jeśli odświeżyć teraz przechodzi przez całą drogę po drugiej.

135
00:10:37,050 --> 00:10:39,200
Ale mamy kilka małych problemów.

136
00:10:39,210 --> 00:10:42,970
Pierwszą rzeczą, którą chcemy zadbać o pewne dopełnienie tam.

137
00:10:43,400 --> 00:10:50,320
Więc mamy zamiar dodać wyściółkę 13 pikseli na szczycie 13 pikseli z boku po prawej stronie.

138
00:10:50,370 --> 00:10:54,960
13 pikseli na dole i 20 pikseli w lewo.

139
00:10:54,950 --> 00:10:56,250
Więc widać na tym.

140
00:10:56,550 --> 00:10:58,770
Mamy górna i dolna są 13.

141
00:10:59,000 --> 00:11:01,550
A po lewej stronie jest 20 pikseli.

142
00:11:01,590 --> 00:11:07,430
Więc jeśli były świeże Mamy teraz większy wkład, które odbywają się odpowiednią ilość miejsca.

143
00:11:07,590 --> 00:11:11,670
Mamy problem, który jest, że wejście jest już zbyt długo.

144
00:11:11,790 --> 00:11:27,710
Kiedy powiedzieliśmy, że przy powinna wynosić 100 procent, że w rzeczywistości była tylko zawartość i nie zawierają dopełnienie i nie zawierają marży, co oznacza, że ​​nasze wejście idzie dawno końcem div i zamiast bawić z wyściółką.

145
00:11:27,770 --> 00:11:33,820
Chodzi mi o to, aby pokazać inny sposób zmieniając go co jest właściwość o nazwie rozmiaru okna.

146
00:11:33,840 --> 00:11:41,400
Więc z bloku zaklejania masz kilka różnych opcji, ale to w zasadzie kontroluje jak okno ma wymiary modelu skrzynki.

147
00:11:41,390 --> 00:11:44,100
I mamy zamiar zmienić go Dasch pole do granicy.

148
00:11:44,270 --> 00:11:52,740
A co to robi ja po prostu czytać mówi właściwości width i height zawierają dopełnienie i obramowanie, ale nie margines.

149
00:11:52,800 --> 00:12:05,170
Jeśli więc go zmienić na polu granicznym, które zrobię teraz wchodzimy tu tylko dodać pola rozmiaru okna zleceń i zapisać go, zanim przejdę.

150
00:12:05,310 --> 00:12:10,250
Ja wskażę jest to jedna z tych właściwości, które chcemy mieć prefiksów.

151
00:12:10,250 --> 00:12:15,170
Więc Kit w sieci Web i Mozy są Moz i bałagan w firmie Microsoft.

152
00:12:15,540 --> 00:12:16,850
Nie zamierzam tego robić teraz.

153
00:12:16,910 --> 00:12:18,250
Będzie to kod roztworu.

154
00:12:18,410 --> 00:12:20,330
Ale to zajmuje dużo czasu, aby wpisać się.

155
00:12:20,660 --> 00:12:25,940
Więc to będzie działać tak jak to jest w Chrome przynajmniej ja odświeżyć ją teraz.

156
00:12:26,040 --> 00:12:32,180
Nasza skrzynka jest w tym dopełnienie w granicy, ale nie obejmuje to margines.

157
00:12:32,180 --> 00:12:34,820
Tak więc skończyć z idealnego dopasowania.

158
00:12:34,880 --> 00:12:39,220
Dalej mam zamiar dać czcionki kolor kiedy wpisać tam.

159
00:12:39,620 --> 00:12:41,130
Więc wszystko co musimy zrobić.

160
00:12:41,330 --> 00:12:49,920
Zamierzam po prostu wziąć ten sam kolor z H-1 i zejść do naszego wejścia i po prostu powiedzieć, że kolor to kolor.

161
00:12:49,910 --> 00:12:54,400
A jeśli odświeżyć i teraz możemy zacząć wpisywać tam idziemy.

162
00:12:54,410 --> 00:12:56,290
Teraz skupmy się na efekcie.

163
00:12:56,580 --> 00:13:03,860
Gdy klikniemy który nazywa koncentrując się na wejściu można zobaczyć tutaj mamy obramowanie wokół niego.

164
00:13:03,920 --> 00:13:05,060
Więc musimy pracować nad tym.

165
00:13:05,120 --> 00:13:08,050
Teraz mamy domyślny efekt ostrości.

166
00:13:08,120 --> 00:13:17,590
Więc nie jest to selektor, które koncentrują okrężnicy wejście tak jak selektora unosić pseudo.

167
00:13:17,650 --> 00:13:21,510
Komórki te będą działać tylko wtedy, gdy skupiliśmy się na wejściu.

168
00:13:21,920 --> 00:13:27,310
Więc mam zamiar sprawić, że tło białe, gdy skupiamy się na nim.

169
00:13:27,570 --> 00:13:47,180
Mam zamiar dać mu granicy trzech pikseli stałych koloru niebieskiego Pracujemy zi damy mu zarysu konturu nie odnosi się do tego irytującego podkreślić, że otrzymujemy od samej przeglądarce.

170
00:13:47,180 --> 00:13:56,610
Teraz, jeśli skupimy się na wejściu mamy tę nową niebieską ramkę i my także zmienić kolor tła, więc jest to szara teraz jest biały.

171
00:13:57,570 --> 00:14:02,850
Więc to wszystko, co musimy zrobić dla wejścia choć powinniśmy iść i dodać tekst zastępczy, że mamy tutaj.

172
00:14:03,030 --> 00:14:10,620
Więc pójdę do HTL indeksu, a następnie do wejścia lub wejście doda atrybut zastępczy.

173
00:14:10,910 --> 00:14:12,270
I to może być cokolwiek chcesz.

174
00:14:12,470 --> 00:14:13,460
Ja po prostu sprawiają, że pasują do siebie.

175
00:14:13,490 --> 00:14:18,800
Więc to dodanie nowego do zrobienia i odświeżyć.

176
00:14:18,840 --> 00:14:19,490
No to jedziemy.