1
00:00:04,260 --> 00:00:08,990
Wracając do tego samouczka, następnym krokiem jest rozpoczęcie pracy nad naszymi C-sami.

2
00:00:09,150 --> 00:00:13,420
Musimy więc utworzyć nowy plik CS S S i publiczne arkusze stylów i nazwać je.

3
00:00:13,590 --> 00:00:15,280
Ten sukces.

4
00:00:15,510 --> 00:00:20,860
Więc jeśli wrócimy tutaj, przejdź do naszego publicznego katalogu Otwórz arkusze stylów wygląda na to, że jest już

5
00:00:20,940 --> 00:00:24,930
otwarty i kliknij prawym przyciskiem myszy Utwórz nowy plik, a ja to zadzwonię.

6
00:00:24,930 --> 00:00:26,350
Blanding to tak.

7
00:00:27,430 --> 00:00:32,120
Teraz jeśli go otworzę, jest puste i gotowe do wypełnienia

8
00:00:32,130 --> 00:00:35,530
wszystkimi zasadami, które będą stylizować naszą stronę główną.

9
00:00:36,150 --> 00:00:41,450
Więc pierwszą rzeczą, którą chcemy zrobić, to nauka otwarta, którą Danciu mówi, co zrobiliśmy.

10
00:00:41,590 --> 00:00:44,750
I chcemy ustawić kolor tła ciała do zablokowania.

11
00:00:44,800 --> 00:00:46,120
Możesz wybrać dowolny kolor, który Ci się podoba.

12
00:00:46,120 --> 00:00:50,860
Po prostu myślę, że fajnie jest zejść na pierwszy obraz z czarnego tła, a następnie

13
00:00:50,860 --> 00:00:51,980
rozpocząć od tego punktu.

14
00:00:55,530 --> 00:01:00,300
Więc wkleiłem w tej zasadzie, co zrobiliśmy, jest zaznaczony tag ciała, a następnie ustawić kolor z

15
00:01:00,300 --> 00:01:01,230
powrotem na mieszanie.

16
00:01:01,270 --> 00:01:07,530
0 0 0, który jest taki sam jak czarny.

17
00:01:07,610 --> 00:01:13,010
Teraz potrzebuję pozycji z całego kontekstu i aby zobaczyć wszystkie pola kempingowe, które mamy, jest wybierany

18
00:01:13,010 --> 00:01:13,720
z identyfikatorem.

19
00:01:13,760 --> 00:01:19,290
Więc użyjemy selektora identyfikatorów i będzie to nagłówek Blandinga.

20
00:01:19,870 --> 00:01:24,630
Zrobiliśmy tutaj ten tekst i otrzymaliśmy indeks z 1.

21
00:01:24,640 --> 00:01:29,700
Więc jeśli nie wiesz o indeksie z, strona internetowa może być wyświetlana na trójwymiarowej płaszczyźnie.

22
00:01:29,860 --> 00:01:36,310
Mamy X i Y, które są w lewo i prawo w górę iw dół, a następnie Z, która jest do przodu i do tyłu w kosmos.

23
00:01:36,310 --> 00:01:40,120
Więc jeśli damy mu indeks z 1, to zbliża się do nas.

24
00:01:40,240 --> 00:01:45,860
A to, co nakłada się na jakąkolwiek inną treść, która ma indeks indeksu mniejszy niż jeden,

25
00:01:45,860 --> 00:01:50,980
abyśmy mogli używać indeksu z, który musimy zmienić z pozycji innej niż statyczna, jest

26
00:01:50,980 --> 00:01:54,380
domyślną wartością pozycji dla wszystkich jej elementów HTML .

27
00:01:54,580 --> 00:01:58,300
A jeśli użyjesz statycznego, to zignorujesz indeks z.

28
00:01:58,300 --> 00:02:01,080
Teraz chcemy wycentrować ten tekst i przycisk.

29
00:02:01,090 --> 00:02:05,440
Więc używam tutaj centrum wyrównywania tekstu, które pozwoli nam zorientować się w poziomie.

30
00:02:05,470 --> 00:02:09,730
Teraz, abyśmy mogli odjąć pionowo na stronie, tak naprawdę jest

31
00:02:09,730 --> 00:02:15,880
na to wiele różnych sposobów, ale odkryłem, że najłatwiej to zrobić, wystarczy użyć wysokości widoku.

32
00:02:15,910 --> 00:02:19,920
Więc to, co tutaj robimy, to ustawiamy dopełnienie do 40 wysokości widoku.

33
00:02:20,230 --> 00:02:24,690
Powodem, dla którego nie gram w wieku 50 lat, jest fakt, że faktycznie zmniejszyłoby to zawartość.

34
00:02:24,700 --> 00:02:26,490
Wygląda, jakby był wyśrodkowany.

35
00:02:27,010 --> 00:02:33,380
Tak więc zapisujemy tę zasadę, aby wrócić tutaj i odświeżyć i widać, że tło jest czarne

36
00:02:33,930 --> 00:02:35,220
i na dole.

37
00:02:35,290 --> 00:02:35,560
Tak.

38
00:02:35,580 --> 00:02:40,020
Nie można umieścić tekstu na stronie, jeśli chcemy, abyśmy mogli odświeżyć się tutaj.

39
00:02:40,150 --> 00:02:42,710
Zobacz trochę lepiej.

40
00:02:42,720 --> 00:02:47,630
W tej chwili tekst Witaj w twoim obozie jest ledwo widoczny, więc zmienimy to tutaj za sekundę.

41
00:02:49,800 --> 00:02:57,030
Wygląda na to, że po prostu weźmiemy główkę lądowania lub Slichter dodamy do niej selektor H1, a

42
00:02:57,030 --> 00:02:58,960
zmieniamy kolor na 1.

43
00:02:59,700 --> 00:03:07,200
Dodajmy, że tutaj pójdę i powiem, że odświeżysz stronę i teraz jest o wiele łatwiej zobaczyć ten tekst.

44
00:03:07,270 --> 00:03:11,170
A kiedy dostaniemy tam tło, łatwiej będzie je zobaczyć.

45
00:03:13,730 --> 00:03:17,080
Następną rzeczą, którą chcemy zrobić, jest stylizacja listy nieuporządkowanych.

46
00:03:17,360 --> 00:03:21,370
A ponieważ wiesz, że lista ma klasę pokazu slajdów, bardzo łatwo jest ją przesuwać.

47
00:03:21,650 --> 00:03:25,040
Więc wezmę tę zasadę, a my ją tutaj podłączymy.

48
00:03:25,580 --> 00:03:32,330
Wybraliśmy więc osobę bez honoru z jej klasą i ustawiamy pozycję na wysokości do

49
00:03:32,390 --> 00:03:38,060
100 procent, więc zajmiemy całą stronę, a następnie przesuniemy ją w górnym

50
00:03:38,060 --> 00:03:41,360
lewym rogu strony, używając najwyższych pozycji zero.

51
00:03:41,690 --> 00:03:44,890
A potem, jeśli widzisz, mamy indeks z zera ustawiony na zero.

52
00:03:45,000 --> 00:03:49,940
Zapewni to, że obrazy tła znajdują się za pozostałymi treściami, tak jak zapraszamy do TWOJEGO tekstu

53
00:03:49,970 --> 00:03:52,130
tekstowego w naszym widoku lub na kempingach.

54
00:03:53,910 --> 00:03:55,070
Ustaw nasz styl listy.

55
00:03:55,080 --> 00:03:58,240
I na tej wojnie poruszaj punktami kuli w ten sposób.

56
00:03:58,240 --> 00:04:00,340
Nie widzimy ich z pozycji na liście.

57
00:04:00,340 --> 00:04:03,170
I na koniec chcemy się upewnić, że nie ma marginesu ani dopełnienia.

58
00:04:03,340 --> 00:04:05,180
Więc ustawiamy oba na zero.

59
00:04:05,620 --> 00:04:08,530
Teraz oszczędzamy, wracamy tutaj i byliśmy świezi.

60
00:04:08,770 --> 00:04:12,480
Widzimy, że punkty, które znajdowały się po lewej stronie, zniknęły.

61
00:04:16,660 --> 00:04:19,670
Teraz musimy odpowiednio ustawić poszczególne elementy listy.

62
00:04:19,780 --> 00:04:26,460
Więc wyciągniemy tę zasadę tutaj, skopiujmy to na Intourist SS wklej ją poniżej nieukorzenionej listy,

63
00:04:26,470 --> 00:04:32,670
a tu mamy te same kropki pokazów slajdów selektora klasy dla listy zaszczytów, a

64
00:04:33,040 --> 00:04:38,950
potem mówimy to aby ponownie wybrać każdy element listy na liście, ustawiamy szerokość i

65
00:04:38,950 --> 00:04:40,570
wysokość na 100 procent.

66
00:04:40,600 --> 00:04:47,470
Tym razem ustawiamy absolutną górną i lewą lub zerową ponownie wielkość tła ustawioną na pokrycie.

67
00:04:47,470 --> 00:04:53,100
I to właśnie pozwoli obrazom zająć całą przestrzeń strony.

68
00:04:53,110 --> 00:04:56,240
Ustawiliśmy również naszą pozycję zwrotną na 50 procent 50 procent.

69
00:04:56,430 --> 00:04:59,660
A to idealnie wyśrodkowuje obrazy na stronie.

70
00:04:59,660 --> 00:05:02,720
Następnie na koniec ustawiamy tło, aby się nie powtórzyło.

71
00:05:03,010 --> 00:05:06,870
To miejsce, w którym obraz nie jest powtarzany w pionie lub w poziomie.

72
00:05:07,060 --> 00:05:13,330
Ustawiamy naszą nieprzezroczystość na zero, ponieważ chcemy, aby nasze obrazy zaczęły zanikać, a następnie użyjemy

73
00:05:13,330 --> 00:05:17,650
animacji, którą tutaj utworzymy, aby powoli zamieniać je w nieprzezroczystość jednego.

74
00:05:17,770 --> 00:05:22,930
Ustawiliśmy ponownie indeks z na zero, aby upewnić się, że obrazy tła znajdują

75
00:05:23,020 --> 00:05:24,790
się za tekstem i przyciskiem.

76
00:05:25,150 --> 00:05:29,540
Ostatnia właściwość, którą tu mamy nazywa się animacją i to jest coś, czego nie widzieliśmy wcześniej.

77
00:05:29,590 --> 00:05:33,430
Pozwoli nam to na rzeczywiste zanikanie obrazów.

78
00:05:33,490 --> 00:05:38,920
Tak więc nazwa animacji jest animacją obrazu i jest to dowolność, którą możesz nazwać, jak

79
00:05:38,920 --> 00:05:44,430
chcesz, pod warunkiem, że dopasuje się do animacji, którą zamierzamy tutaj utworzyć w minutę, a następnie

80
00:05:44,430 --> 00:05:46,950
powiemy animacji, by działała przez 50 sekund.

81
00:05:47,130 --> 00:05:51,780
Upewniamy się, że jest liniowy, a liniowy - pokazuje, że animacja ma tę

82
00:05:51,780 --> 00:05:54,120
samą prędkość od początku do końca.

83
00:05:54,150 --> 00:05:57,370
I na koniec mówimy animacji, żeby w nieskończoność pętała.

84
00:05:57,480 --> 00:05:59,410
W ten sposób nasz pokaz slajdów nigdy się nie skończy.

85
00:06:01,160 --> 00:06:05,810
Możemy to powiedzieć, ale jeśli wyświetlimy podgląd, nic jeszcze nie zostanie pokazane, ponieważ nie mamy

86
00:06:05,810 --> 00:06:06,430
skonfigurowanej animacji.

87
00:06:06,530 --> 00:06:10,130
Nie mamy również żadnych zdjęć ustawionych na poszczególne elementy listy.

88
00:06:10,130 --> 00:06:11,580
Więc chodźmy teraz i rób to teraz.

89
00:06:15,890 --> 00:06:20,900
Tak więc skopiujemy wszystkie elementy listy pokazów slajdów do selektorów podrzędnych i to jest

90
00:06:20,900 --> 00:06:24,390
to, co spowoduje dodanie obrazów tła do rzeczywistych elementów listy.

91
00:06:30,790 --> 00:06:37,690
Teraz widzimy, że istnieje pięć elementów listy, zaczynając od dziecka, przechodząc przez wszystkie

92
00:06:37,690 --> 00:06:38,470
pięć.

93
00:06:38,520 --> 00:06:44,050
Każdemu z nich nadajemy obraz tła, a jeśli chcesz, możesz połączyć się z tymi lokalnymi

94
00:06:44,050 --> 00:06:48,030
lub możesz umieścić obrazy w swoim publicznym katalogu wewnątrz katalogu obrazów.

95
00:06:48,070 --> 00:06:53,020
Poszedłem do przodu i po prostu przesłałem je za pomocą obrazu lub jest to bezpłatna usługa przesyłania w Internecie.

96
00:06:53,200 --> 00:06:58,780
To naprawdę nie jest przeznaczone do przechowywania zdjęć do wykorzystania na swojej stronie internetowej, ale jest to szybka naprawa pod ręką

97
00:06:58,780 --> 00:06:59,390
go używać.

98
00:06:59,770 --> 00:07:02,740
Animacja pierwszego obrazu w tle rozpocznie się natychmiast.

99
00:07:02,830 --> 00:07:05,030
Nie musimy więc opóźniać animacji.

100
00:07:05,110 --> 00:07:09,570
Chcemy, aby każdy obraz pojawiał się po 10 sekundach poprzedniego obrazu.

101
00:07:09,580 --> 00:07:15,290
Dlatego ustawię opóźnienie animacji następnej na 10 sekund, a następnie zwiększamy o 10 dla każdego kolejnego obrazu.

102
00:07:15,430 --> 00:07:20,590
Tak więc 20 sekund dla trzeciego 30 dla czwartego i 40 dla piątego, który przenosi nas aż

103
00:07:20,590 --> 00:07:24,320
do 50 sekund, a następnie zacząć od początku na Obrazie numer jeden.

104
00:07:25,150 --> 00:07:30,460
Znowu możemy więc powiedzieć lądowanie w pliku CSSA, ale nic nie zobaczymy, ponieważ wszystkie elementy

105
00:07:30,460 --> 00:07:35,600
są ustawione na zero i nie mamy animacji skonfigurowanej tak, aby zanikać je w jednym.

106
00:07:35,620 --> 00:07:41,330
Więc idź dalej i zrób to teraz.

107
00:07:41,420 --> 00:07:48,400
Zamierzam skopiować regułę animacji obrazu klatki kluczowej z samouczka i wkleić ją tutaj.

108
00:07:54,240 --> 00:08:01,590
To, co robimy, polega na wybraniu selektora ramki i nadaniu animacji nazwy animacji obrazu.

109
00:08:01,590 --> 00:08:07,490
I to pasuje do wcześniejszej wartości, jaką mieliśmy dla właściwości animacji w naszym

110
00:08:07,500 --> 00:08:09,900
pokazie slajdów, była zasada suwaka.

111
00:08:09,900 --> 00:08:16,150
Mamy więc na miejscu to, co zrobimy, to wskazanie, co chcemy osiągnąć w różnych klatkach

112
00:08:16,200 --> 00:08:17,700
kluczowych w ramach animacji.

113
00:08:17,820 --> 00:08:23,520
Tak więc animacja przechodzi od zera procentowego aż do 100 procent, ale jesteśmy zainteresowani jedynie od

114
00:08:23,520 --> 00:08:24,800
zera do 30 procent.

115
00:08:25,110 --> 00:08:31,230
Co się dzieje tutaj, zaczynamy naszą animację od zera dla nieprzezroczystości, a następnie aż do

116
00:08:31,230 --> 00:08:32,220
10 procent.

117
00:08:32,370 --> 00:08:34,260
Pozwoliliśmy temu zejść w kosmos.

118
00:08:34,290 --> 00:08:41,580
Kiedy zostawiamy nieprzezroczystość na jednym przez całą drogę przez 20 procent, a następnie stwierdzamy, że z powrotem do

119
00:08:41,580 --> 00:08:43,110
zera na 30 procent.

120
00:08:43,110 --> 00:08:50,040
Zauważysz również, że mamy ustawioną funkcję czasu animacji właściwości, aby ułatwić sobie od 0 do 10,

121
00:08:50,040 --> 00:08:53,100
a następnie ma ona tendencję do łagodzenia.

122
00:08:53,160 --> 00:08:58,030
To daje nam bardziej płynne przejście, gdy będziemy mieć Faden od 0 do 1.

123
00:08:58,920 --> 00:09:02,200
Być może zastanawiasz się, skąd wzięliśmy te wartości procentowe.

124
00:09:02,400 --> 00:09:08,840
Dlatego przygotowałem wykres animacji, który pomoże ci lepiej zobrazować to, co się tutaj dzieje.

125
00:09:09,840 --> 00:09:16,020
W zasadzie mamy obraz, który będzie animował od zera sekund do 10 sekund, a następnie drugi obraz będzie

126
00:09:16,020 --> 00:09:17,880
wynosił od 10 do 20.

127
00:09:17,880 --> 00:09:25,510
Trzeci od 20 do 30, a następnie od 30 do 40, a następnie od 40 do 50 tworzących pięć obrazów po 10 sekundach na sztukę.

128
00:09:25,740 --> 00:09:32,340
Tak więc od zera na sekundę do 10 sekund mamy pięciosekundową ramkę, a następnie obraz

129
00:09:32,340 --> 00:09:40,000
pozostaje wyblakły przy nieprzezroczystości jednego, a następnie z 10 sekund do 15 sekund zanika w następnym obrazie.

130
00:09:40,260 --> 00:09:47,330
Więc może to być reprezentowane przez niebieski, który zanika na czerwono, który jest sollen, a następnie zanika, co jest pomarańczowe.

131
00:09:47,700 --> 00:09:54,810
Pierwszy obraz zaczyna się od 0 do 10 procent, a ten zanika od zera sekund do

132
00:09:54,810 --> 00:09:59,250
pięciu sekund i pozostaje stały od 10 do 20 procent.

133
00:09:59,250 --> 00:10:03,330
Widzimy, że mamy od 10 do 20 procent pasty o konsystencji pasty.

134
00:10:03,570 --> 00:10:08,920
A następnie od 20 do 30 procent, faktycznie zanika z jednego z powrotem do zera.

135
00:10:09,270 --> 00:10:16,200
Kiedy to się dzieje, następny obraz animacji, który rozpoczął się już po 10 sekundach, będzie wynosił od

136
00:10:16,290 --> 00:10:18,870
zera do jednego od 10 do 15.

137
00:10:18,870 --> 00:10:22,070
A to się nakłada, tworząc ten efekt przenikania.

138
00:10:22,290 --> 00:10:27,510
Więc pozostaje on stały przez pięć sekund, a następnie mamy kolejne nakładanie się, gdy

139
00:10:27,510 --> 00:10:34,990
zanika, a następny obraz zanika i ten sam wzór powtarza się, aż dojdziemy do 50 sekund, co jest końcem naszej animacji.

140
00:10:35,040 --> 00:10:36,630
Ten obraz jest solidny.

141
00:10:36,840 --> 00:10:42,200
A potem wracamy do początku, gdzie oryginalny obraz jest wyblakły, gdy piąty

142
00:10:42,210 --> 00:10:47,300
obraz zanika, a potem zaczyna się od nowa i nieskończenie pętle.

143
00:10:47,340 --> 00:10:51,910
Więc chodźmy i uratujcie nasze USA i otwórzmy kamerę internetową.

144
00:10:52,020 --> 00:10:56,380
Upewnij się, że Twoje serwery działają i odświeżają się, a my widzimy animację na żywo.

145
00:11:02,590 --> 00:11:07,530
Ten obraz jest widoczny przez pięć sekund, a teraz zanika, gdy następny obraz zanika.

146
00:11:07,630 --> 00:11:09,450
To jest pięciosekundowa zmiana.

147
00:11:09,550 --> 00:11:13,870
Dostajemy jeszcze pięć sekund tego zdjęcia, a następnie przejdziemy do następnego.

148
00:11:16,550 --> 00:11:22,070
Ostatnią rzeczą, którą chcesz zrobić, jest upewnienie się, że nasz suwak tła działa we wszystkich przeglądarkach.

149
00:11:22,190 --> 00:11:29,420
Wracając do tutoriala tutaj i na samym dole, mam tutaj tę zasadę lub ją skopiuj.

150
00:11:29,420 --> 00:11:31,380
Przywróć swój sukces.

151
00:11:31,440 --> 00:11:38,540
Wklej to na samym dole i widzisz, że mam ten przecinek, który mówi, że starsze

152
00:11:38,540 --> 00:11:45,680
przeglądarki obsługują animacje bez CSSA Klowns został dodany przez moderatora, a my już mieliśmy dysk

153
00:11:45,680 --> 00:11:54,600
CD z aktualizacjami i tutaj, jeśli chcesz wiedzieć, jak znalazłem, że po prostu wyglądam do modernizatora CDR i wybrałem pierwszy.

154
00:11:55,760 --> 00:12:02,420
Kończę kopiowanie wersji pliku, a następnie dodaję ją do tagu skryptu w głowie i

155
00:12:02,420 --> 00:12:08,270
ustawiam skrypt na synchronizację, która sprawia, że ​​javascript wieje jednocześnie wraz z

156
00:12:08,270 --> 00:12:10,510
innymi zasobami na stronie.

157
00:12:11,420 --> 00:12:16,330
Więc jeśli wrócimy do CSSA, widzimy, że mają po prostu pojemność 1.

158
00:12:16,340 --> 00:12:21,500
Tak więc dzieje się tak, że przeglądarki, które nie obsługują integracji systemów, będą

159
00:12:21,500 --> 00:12:25,250
miały tylko jeden slajd, który będzie tłem dla tego obrazu.

160
00:12:27,070 --> 00:12:30,390
To wszystko w przypadku pełnoekranowego suwaka obrazu tła.

161
00:12:30,550 --> 00:12:33,640
Jeśli masz jakieś pytania, tak jak teraz, zobaczę następne wideo.

162
00:12:33,640 --> 00:12:34,000
Dzięki.