Witamy spowrotem.
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.
Więc na pewno mają dość sposobów, aby przejść.
A my po prostu zaatakuje ten jeden kawałek na raz.
Postaram się zrobić to w możliwie najbardziej logicznej kolejności.
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.
OK, zaczynajmy tutaj.
Pierwszą rzeczą, którą zrobimy zrobię pełny ekran.
Zacznijmy od tego po prostu przesuwając w dół.
To jest nasz kontener div.
Dodamy margines do góry tak, że mamy więcej miejsca tutaj.
Więc wracamy do naszego C S i może zamknąć lub JavaScript do teraz.
Nasz div ma pomysł pojemnika i potem pójdziemy i wybierz, które tutaj, które zostały już wykonane.
I zamiast marginesem zerowym OTTO Well dać sto pikseli na górze i na dole.
I pamiętaj, musimy X, jeśli mamy do zera nie musimy X, ale jeśli mamy wiele robimy.
Rzućmy okiem teraz.
OK, więc teraz oni zaczynają się w tym samym miejscu.
Mają taką samą marżę tam.
Następną rzeczą, którą zrobimy jest dodać kolor tła do tego kontenera, który ten ma.
Jest to trochę trudne do zauważenia, ale kiedy coś usuwać pokazuje obrońców z tyłu.
To ten kolor właśnie tutaj.
Więc jeszcze raz.
Więc będziemy iść dalej i dodać, że.
Więc zamiast kontenera również powiedzieć, tło i kolor.
Ja po prostu przeczytać ją to F 7 7 po 7 dniach.
Właśnie tak.
I zobaczmy, jak to wygląda.
OK.
Więc mamy ten sam szary kolor, który mamy właśnie tutaj.
To ten sam kolor jasnoszary.
Następną rzeczą, którą zrobimy to praca na granicy.
I to właściwie nie ma granicy.
Co to ma to shadow box bardzo nieznaczne.
Więc nie widzieliśmy jeszcze cień pudełko.
Ja wykazać, że tu i przejść do MT-NW, a to jest po prostu sposobem na dodanie efektu cienia.
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ń.
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 ..
A potem mamy zamiar zrobić to naprawdę bardzo przejrzyste.
Więc ledwo zauważalne.
A gdybym odświeżyć.
Nie mamy granicę, ale teraz jest tam niewielki cień wokół tego elementu.
OK.
To wszystko, co zrobimy z pojemnikiem na razie.
Załóżmy zaatakować H-1.
Więc ta pozycja się tutaj.
Tak to jest w naszym wieku niego l prostu uważany za H1.
To nie ma identyfikatora ani nic i to jest w porządku.
Chodźmy do pliku CSSA i rozpocząć dodając w kolorze tła.
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.
Więc my też zmienić kolor czcionki na biały i szybko pokazać, że.
W porządku.
Powoli inching bliżej tutaj.
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.
Jak widać tutaj nie ma marginesu.
To jest nasz H-1.
Nie ma tu dopełnienia.
Tak więc tekst nie idzie aż do krawędzi, jak to robi się tutaj.
Ale nie ma marginesu na zewnątrz niebieskim polu.
To jest nasza metoda wprowadzania tekstu, a także wzrosła wyściółka ale nie ma marginesu wokół, że obaj.
Więc zaczniemy dodając trochę wyściółki wokół naszej listy zadań do wykonania.
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ć.
Można zobaczyć, że jesteśmy coraz bliżej.
Musimy zmienić rozmiar czcionki.
Trzeba zmienić czcionkę.
My także będą wielkie litery to wszystko i możemy to zrobić teraz.
Powinieneś wiedzieć, jeden z moich ulubionych jest przekształcenie tekstu wielkimi literami.
Po prostu myślę, że to całkiem fajne.
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.
Tak więc H1 domyślnie jest rzeczywiście pogrubione, a my tego nie chcemy.
Więc zrobimy funt sposób normalny lub możemy również napisać wagę czcionki 400.
No to jedziemy.
Teraz to tylko kwestia zmiany czcionki, która wróci do następnej rzeczy, które chcesz zająć jest pozbycie się tych punktach.
Można sprawdzić, czy nie mamy żadnych wypunktowania tutaj.
Te wypunktowania są uważane domyślny styl przeglądarki.
Więc będziemy przesłonić tego.
Mamy zamiar wybrać UL że są wewnątrz i powiedzieć lista styl żadnego.
A jeśli wrócimy i odświeżyć obecnie nie ma żadnych wypunktowania.
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.
Więc wracamy do tego.
Teraz dodajmy w odpowiedniej czcionki oraz nazwę tej czcionki jest rubato i to jest część czcionek Google.
Więc muszę, że otwarte tutaj, a ja po prostu zrobić go szukać rubato.
I jedziemy.
Dodaj do kolekcji, a następnie użyć.
I będziemy chcieli normalny sposób.
Dodamy pogrubioną, a także medium.
Teraz śmiało i skopiować ten link do naszej HMO i możemy zamknąć to okno.
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.
Wszystko wykorzystuje tę czcionkę więc musimy po prostu dodać rodziny fontów robota.
Właśnie tak.
A jeśli chcemy wrócić teraz i odświeżyć naszą H-1 jest dość dużo tam.
Oprócz tego przycisku, które nie zostały dotknięte przez cały czcionek taki sam kolor odstępy wszystko, co jest dobre.
A nasi sojusznicy dostają tam.
Mają odpowiednią czcionkę.
Musimy pracować na niektóre kwestie dystansowych i dopełnienia.
Następną rzeczą, którą będziemy rozwiązania są kolory tła na kłamstwach.
Więc każda inna kłamstwo.
To idzie z białym kolorze czystej bieli do tego szarego koloru, który mamy jako tło The.
Więc możemy użyć SS dodać style do każdego innego sojusznika.
Więc zróbmy to teraz.
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.
I składnia, że ​​to kłamstwo i dziecko do końca.
I tak też i dobrze zdefiniowany wzorzec każdy inny.
A jeśli zrobiliśmy trzy i byłoby powiedzieć, co trzeci, ale chcemy tylko co drugi.
I zrobimy kolor tła taki sam F7 F7 F7, że używany jako tło pojemnika i odświeżyć.
Teraz trudno zobaczyć, bo są trochę małe, ale każdy inny kłamstwem jest to kolor szary.
Więc dodać trochę więcej i widać, że na przemian doskonały.
Teraz porusza kwestii wysokości kłamstw, a także wypełnienia.
Pierwszą rzeczą do zrobienia jest dać im wysokość 40 pikseli więc wszyscy sojusznicy 40 x wysokość i wrócimy odświeżenia.
OK więc podjąć odpowiednią ilość miejsca.
Teraz, jeśli je porównać czcionka ma jakieś problemy.
A także musimy dodać trochę wyściółkę.
Dalej idą do zmiany właściwości height linia na kłamstwach tak, że nasz tekst jest wyśrodkowany w pionie.
Teraz linia jest w zasadzie ten wysoki.
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.
Teraz 40 pikseli.
Więc linia zajmuje cały ten obszar.
Kolejne drobne rzeczy jest kolor mamy czysta czerń i kolor Kiedyś nie jest dokładnie czarny.
To nieco lżejsze.
Będziemy więc ustawić kolor i to jest sześć sześć sześć odświeżania, a potem iść dalej niech rozwiązać wejście.
Więc mamy kilka rzeczy, które trzeba zrobić.
Pierwszym z nich jest upewnić się, że ma się odpowiednią ilość miejsca.
Więc to wejście jest znacznie większy i to nie tylko wypełnienie lub marża rozmiar czcionki jest większy.
Mamy nowy kolor tła, jak również.
I nie ma granicy, kiedy kliknij.
Warto więc działać na wszystkich tych, i zaczniemy po prostu dodając w większym rozmiarze czcionki.
Będziemy więc wybrać wejście rozmiaru czcionki, a my ustawić rozmiar czcionki, aby mieć więcej niż 18 pikseli.
I choć jesteśmy tu zrobimy kolor tła oraz kolor tła i to samo f 7 7 1/2 7.
Właśnie tak.
I niech odświeżyć.
OK.
Jesteśmy coraz bliżej.
Następną rzeczą, którą zrobimy to dodać szerokość i szerokość, że mamy zamiar dać to 100 proc.
Więc teraz to będzie tylko część drogi po drugiej stronie zbiornika.
Jeśli odświeżyć teraz przechodzi przez całą drogę po drugiej.
Ale mamy kilka małych problemów.
Pierwszą rzeczą, którą chcemy zadbać o pewne dopełnienie tam.
Więc mamy zamiar dodać wyściółkę 13 pikseli na szczycie 13 pikseli z boku po prawej stronie.
13 pikseli na dole i 20 pikseli w lewo.
Więc widać na tym.
Mamy górna i dolna są 13.
A po lewej stronie jest 20 pikseli.
Więc jeśli były świeże Mamy teraz większy wkład, które odbywają się odpowiednią ilość miejsca.
Mamy problem, który jest, że wejście jest już zbyt długo.
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ą.
Chodzi mi o to, aby pokazać inny sposób zmieniając go co jest właściwość o nazwie rozmiaru okna.
Więc z bloku zaklejania masz kilka różnych opcji, ale to w zasadzie kontroluje jak okno ma wymiary modelu skrzynki.
I mamy zamiar zmienić go Dasch pole do granicy.
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.
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ę.
Ja wskażę jest to jedna z tych właściwości, które chcemy mieć prefiksów.
Więc Kit w sieci Web i Mozy są Moz i bałagan w firmie Microsoft.
Nie zamierzam tego robić teraz.
Będzie to kod roztworu.
Ale to zajmuje dużo czasu, aby wpisać się.
Więc to będzie działać tak jak to jest w Chrome przynajmniej ja odświeżyć ją teraz.
Nasza skrzynka jest w tym dopełnienie w granicy, ale nie obejmuje to margines.
Tak więc skończyć z idealnego dopasowania.
Dalej mam zamiar dać czcionki kolor kiedy wpisać tam.
Więc wszystko co musimy zrobić.
Zamierzam po prostu wziąć ten sam kolor z H-1 i zejść do naszego wejścia i po prostu powiedzieć, że kolor to kolor.
A jeśli odświeżyć i teraz możemy zacząć wpisywać tam idziemy.
Teraz skupmy się na efekcie.
Gdy klikniemy który nazywa koncentrując się na wejściu można zobaczyć tutaj mamy obramowanie wokół niego.
Więc musimy pracować nad tym.
Teraz mamy domyślny efekt ostrości.
Więc nie jest to selektor, które koncentrują okrężnicy wejście tak jak selektora unosić pseudo.
Komórki te będą działać tylko wtedy, gdy skupiliśmy się na wejściu.
Więc mam zamiar sprawić, że tło białe, gdy skupiamy się na nim.
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.
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.
Więc to wszystko, co musimy zrobić dla wejścia choć powinniśmy iść i dodać tekst zastępczy, że mamy tutaj.
Więc pójdę do HTL indeksu, a następnie do wejścia lub wejście doda atrybut zastępczy.
I to może być cokolwiek chcesz.
Ja po prostu sprawiają, że pasują do siebie.
Więc to dodanie nowego do zrobienia i odświeżyć.
No to jedziemy.