Wracając do tego samouczka, następnym krokiem jest rozpoczęcie pracy nad naszymi C-sami.
Musimy więc utworzyć nowy plik CS S S i publiczne arkusze stylów i nazwać je.
Ten sukces.
Więc jeśli wrócimy tutaj, przejdź do naszego publicznego katalogu Otwórz arkusze stylów wygląda na to, że jest już
otwarty i kliknij prawym przyciskiem myszy Utwórz nowy plik, a ja to zadzwonię.
Blanding to tak.
Teraz jeśli go otworzę, jest puste i gotowe do wypełnienia
wszystkimi zasadami, które będą stylizować naszą stronę główną.
Więc pierwszą rzeczą, którą chcemy zrobić, to nauka otwarta, którą Danciu mówi, co zrobiliśmy.
I chcemy ustawić kolor tła ciała do zablokowania.
Możesz wybrać dowolny kolor, który Ci się podoba.
Po prostu myślę, że fajnie jest zejść na pierwszy obraz z czarnego tła, a następnie
rozpocząć od tego punktu.
Więc wkleiłem w tej zasadzie, co zrobiliśmy, jest zaznaczony tag ciała, a następnie ustawić kolor z
powrotem na mieszanie.
0 0 0, który jest taki sam jak czarny.
Teraz potrzebuję pozycji z całego kontekstu i aby zobaczyć wszystkie pola kempingowe, które mamy, jest wybierany
z identyfikatorem.
Więc użyjemy selektora identyfikatorów i będzie to nagłówek Blandinga.
Zrobiliśmy tutaj ten tekst i otrzymaliśmy indeks z 1.
Więc jeśli nie wiesz o indeksie z, strona internetowa może być wyświetlana na trójwymiarowej płaszczyźnie.
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.
Więc jeśli damy mu indeks z 1, to zbliża się do nas.
A to, co nakłada się na jakąkolwiek inną treść, która ma indeks indeksu mniejszy niż jeden,
abyśmy mogli używać indeksu z, który musimy zmienić z pozycji innej niż statyczna, jest
domyślną wartością pozycji dla wszystkich jej elementów HTML .
A jeśli użyjesz statycznego, to zignorujesz indeks z.
Teraz chcemy wycentrować ten tekst i przycisk.
Więc używam tutaj centrum wyrównywania tekstu, które pozwoli nam zorientować się w poziomie.
Teraz, abyśmy mogli odjąć pionowo na stronie, tak naprawdę jest
na to wiele różnych sposobów, ale odkryłem, że najłatwiej to zrobić, wystarczy użyć wysokości widoku.
Więc to, co tutaj robimy, to ustawiamy dopełnienie do 40 wysokości widoku.
Powodem, dla którego nie gram w wieku 50 lat, jest fakt, że faktycznie zmniejszyłoby to zawartość.
Wygląda, jakby był wyśrodkowany.
Tak więc zapisujemy tę zasadę, aby wrócić tutaj i odświeżyć i widać, że tło jest czarne
i na dole.
Tak.
Nie można umieścić tekstu na stronie, jeśli chcemy, abyśmy mogli odświeżyć się tutaj.
Zobacz trochę lepiej.
W tej chwili tekst Witaj w twoim obozie jest ledwo widoczny, więc zmienimy to tutaj za sekundę.
Wygląda na to, że po prostu weźmiemy główkę lądowania lub Slichter dodamy do niej selektor H1, a
zmieniamy kolor na 1.
Dodajmy, że tutaj pójdę i powiem, że odświeżysz stronę i teraz jest o wiele łatwiej zobaczyć ten tekst.
A kiedy dostaniemy tam tło, łatwiej będzie je zobaczyć.
Następną rzeczą, którą chcemy zrobić, jest stylizacja listy nieuporządkowanych.
A ponieważ wiesz, że lista ma klasę pokazu slajdów, bardzo łatwo jest ją przesuwać.
Więc wezmę tę zasadę, a my ją tutaj podłączymy.
Wybraliśmy więc osobę bez honoru z jej klasą i ustawiamy pozycję na wysokości do
100 procent, więc zajmiemy całą stronę, a następnie przesuniemy ją w górnym
lewym rogu strony, używając najwyższych pozycji zero.
A potem, jeśli widzisz, mamy indeks z zera ustawiony na zero.
Zapewni to, że obrazy tła znajdują się za pozostałymi treściami, tak jak zapraszamy do TWOJEGO tekstu
tekstowego w naszym widoku lub na kempingach.
Ustaw nasz styl listy.
I na tej wojnie poruszaj punktami kuli w ten sposób.
Nie widzimy ich z pozycji na liście.
I na koniec chcemy się upewnić, że nie ma marginesu ani dopełnienia.
Więc ustawiamy oba na zero.
Teraz oszczędzamy, wracamy tutaj i byliśmy świezi.
Widzimy, że punkty, które znajdowały się po lewej stronie, zniknęły.
Teraz musimy odpowiednio ustawić poszczególne elementy listy.
Więc wyciągniemy tę zasadę tutaj, skopiujmy to na Intourist SS wklej ją poniżej nieukorzenionej listy,
a tu mamy te same kropki pokazów slajdów selektora klasy dla listy zaszczytów, a
potem mówimy to aby ponownie wybrać każdy element listy na liście, ustawiamy szerokość i
wysokość na 100 procent.
Tym razem ustawiamy absolutną górną i lewą lub zerową ponownie wielkość tła ustawioną na pokrycie.
I to właśnie pozwoli obrazom zająć całą przestrzeń strony.
Ustawiliśmy również naszą pozycję zwrotną na 50 procent 50 procent.
A to idealnie wyśrodkowuje obrazy na stronie.
Następnie na koniec ustawiamy tło, aby się nie powtórzyło.
To miejsce, w którym obraz nie jest powtarzany w pionie lub w poziomie.
Ustawiamy naszą nieprzezroczystość na zero, ponieważ chcemy, aby nasze obrazy zaczęły zanikać, a następnie użyjemy
animacji, którą tutaj utworzymy, aby powoli zamieniać je w nieprzezroczystość jednego.
Ustawiliśmy ponownie indeks z na zero, aby upewnić się, że obrazy tła znajdują
się za tekstem i przyciskiem.
Ostatnia właściwość, którą tu mamy nazywa się animacją i to jest coś, czego nie widzieliśmy wcześniej.
Pozwoli nam to na rzeczywiste zanikanie obrazów.
Tak więc nazwa animacji jest animacją obrazu i jest to dowolność, którą możesz nazwać, jak
chcesz, pod warunkiem, że dopasuje się do animacji, którą zamierzamy tutaj utworzyć w minutę, a następnie
powiemy animacji, by działała przez 50 sekund.
Upewniamy się, że jest liniowy, a liniowy - pokazuje, że animacja ma tę
samą prędkość od początku do końca.
I na koniec mówimy animacji, żeby w nieskończoność pętała.
W ten sposób nasz pokaz slajdów nigdy się nie skończy.
Możemy to powiedzieć, ale jeśli wyświetlimy podgląd, nic jeszcze nie zostanie pokazane, ponieważ nie mamy
skonfigurowanej animacji.
Nie mamy również żadnych zdjęć ustawionych na poszczególne elementy listy.
Więc chodźmy teraz i rób to teraz.
Tak więc skopiujemy wszystkie elementy listy pokazów slajdów do selektorów podrzędnych i to jest
to, co spowoduje dodanie obrazów tła do rzeczywistych elementów listy.
Teraz widzimy, że istnieje pięć elementów listy, zaczynając od dziecka, przechodząc przez wszystkie
pięć.
Każdemu z nich nadajemy obraz tła, a jeśli chcesz, możesz połączyć się z tymi lokalnymi
lub możesz umieścić obrazy w swoim publicznym katalogu wewnątrz katalogu obrazów.
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.
To naprawdę nie jest przeznaczone do przechowywania zdjęć do wykorzystania na swojej stronie internetowej, ale jest to szybka naprawa pod ręką
go używać.
Animacja pierwszego obrazu w tle rozpocznie się natychmiast.
Nie musimy więc opóźniać animacji.
Chcemy, aby każdy obraz pojawiał się po 10 sekundach poprzedniego obrazu.
Dlatego ustawię opóźnienie animacji następnej na 10 sekund, a następnie zwiększamy o 10 dla każdego kolejnego obrazu.
Tak więc 20 sekund dla trzeciego 30 dla czwartego i 40 dla piątego, który przenosi nas aż
do 50 sekund, a następnie zacząć od początku na Obrazie numer jeden.
Znowu możemy więc powiedzieć lądowanie w pliku CSSA, ale nic nie zobaczymy, ponieważ wszystkie elementy
są ustawione na zero i nie mamy animacji skonfigurowanej tak, aby zanikać je w jednym.
Więc idź dalej i zrób to teraz.
Zamierzam skopiować regułę animacji obrazu klatki kluczowej z samouczka i wkleić ją tutaj.
To, co robimy, polega na wybraniu selektora ramki i nadaniu animacji nazwy animacji obrazu.
I to pasuje do wcześniejszej wartości, jaką mieliśmy dla właściwości animacji w naszym
pokazie slajdów, była zasada suwaka.
Mamy więc na miejscu to, co zrobimy, to wskazanie, co chcemy osiągnąć w różnych klatkach
kluczowych w ramach animacji.
Tak więc animacja przechodzi od zera procentowego aż do 100 procent, ale jesteśmy zainteresowani jedynie od
zera do 30 procent.
Co się dzieje tutaj, zaczynamy naszą animację od zera dla nieprzezroczystości, a następnie aż do
10 procent.
Pozwoliliśmy temu zejść w kosmos.
Kiedy zostawiamy nieprzezroczystość na jednym przez całą drogę przez 20 procent, a następnie stwierdzamy, że z powrotem do
zera na 30 procent.
Zauważysz również, że mamy ustawioną funkcję czasu animacji właściwości, aby ułatwić sobie od 0 do 10,
a następnie ma ona tendencję do łagodzenia.
To daje nam bardziej płynne przejście, gdy będziemy mieć Faden od 0 do 1.
Być może zastanawiasz się, skąd wzięliśmy te wartości procentowe.
Dlatego przygotowałem wykres animacji, który pomoże ci lepiej zobrazować to, co się tutaj dzieje.
W zasadzie mamy obraz, który będzie animował od zera sekund do 10 sekund, a następnie drugi obraz będzie
wynosił od 10 do 20.
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ę.
Tak więc od zera na sekundę do 10 sekund mamy pięciosekundową ramkę, a następnie obraz
pozostaje wyblakły przy nieprzezroczystości jednego, a następnie z 10 sekund do 15 sekund zanika w następnym obrazie.
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.
Pierwszy obraz zaczyna się od 0 do 10 procent, a ten zanika od zera sekund do
pięciu sekund i pozostaje stały od 10 do 20 procent.
Widzimy, że mamy od 10 do 20 procent pasty o konsystencji pasty.
A następnie od 20 do 30 procent, faktycznie zanika z jednego z powrotem do zera.
Kiedy to się dzieje, następny obraz animacji, który rozpoczął się już po 10 sekundach, będzie wynosił od
zera do jednego od 10 do 15.
A to się nakłada, tworząc ten efekt przenikania.
Więc pozostaje on stały przez pięć sekund, a następnie mamy kolejne nakładanie się, gdy
zanika, a następny obraz zanika i ten sam wzór powtarza się, aż dojdziemy do 50 sekund, co jest końcem naszej animacji.
Ten obraz jest solidny.
A potem wracamy do początku, gdzie oryginalny obraz jest wyblakły, gdy piąty
obraz zanika, a potem zaczyna się od nowa i nieskończenie pętle.
Więc chodźmy i uratujcie nasze USA i otwórzmy kamerę internetową.
Upewnij się, że Twoje serwery działają i odświeżają się, a my widzimy animację na żywo.
Ten obraz jest widoczny przez pięć sekund, a teraz zanika, gdy następny obraz zanika.
To jest pięciosekundowa zmiana.
Dostajemy jeszcze pięć sekund tego zdjęcia, a następnie przejdziemy do następnego.
Ostatnią rzeczą, którą chcesz zrobić, jest upewnienie się, że nasz suwak tła działa we wszystkich przeglądarkach.
Wracając do tutoriala tutaj i na samym dole, mam tutaj tę zasadę lub ją skopiuj.
Przywróć swój sukces.
Wklej to na samym dole i widzisz, że mam ten przecinek, który mówi, że starsze
przeglądarki obsługują animacje bez CSSA Klowns został dodany przez moderatora, a my już mieliśmy dysk
CD z aktualizacjami i tutaj, jeśli chcesz wiedzieć, jak znalazłem, że po prostu wyglądam do modernizatora CDR i wybrałem pierwszy.
Kończę kopiowanie wersji pliku, a następnie dodaję ją do tagu skryptu w głowie i
ustawiam skrypt na synchronizację, która sprawia, że ​​javascript wieje jednocześnie wraz z
innymi zasobami na stronie.
Więc jeśli wrócimy do CSSA, widzimy, że mają po prostu pojemność 1.
Tak więc dzieje się tak, że przeglądarki, które nie obsługują integracji systemów, będą
miały tylko jeden slajd, który będzie tłem dla tego obrazu.
To wszystko w przypadku pełnoekranowego suwaka obrazu tła.
Jeśli masz jakieś pytania, tak jak teraz, zobaczę następne wideo.
Dzięki.