Podstawy witryny opartej na div: 7 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:34

Ta instrukcja pokaże Ci podstawy tworzenia strony internetowej z divami. Ponieważ tabele używane do układu są złe!:pAby zrozumieć tę instrukcję, musisz znać podstawowy html i css. Jeśli czegoś nie rozumiesz, możesz zapytać. Moja osobista strona internetowa również używa tego rodzaju struktury div.https://www.erwtje.netEnjoy

Krok 1: Utwórz podstawowe pliki

Najpierw utwórz swój plik html. Dodamy do tego same podstawy. Plik css będzie na razie pusty. Plik html zawiera teraz: test Zapisz plik html jako coś.html. Możesz sam wybrać nazwę. Twój plik css musi być zapisany jako.css. Upewnij się, że nadajesz mu taką samą nazwę, jak wspomniana w pliku html. W tym przypadku "style.css". Mamy teraz zwykłą pustą stronę html podczas podglądu w naszej przeglądarce.

Krok 2: Edytuj tag ciała dla podstawowych kolorów, czcionek, …

Zostawimy plik html bez zmian i edytujemy tylko plik css. Dodaj następujący kod do pliku css:body { background: #444444; rodzina czcionek: verdana, arial, bezszeryfowa; kolor: #444444; rozmiar czcionki: 12px; margin: 0px;} Za pomocą tego fragmentu kodu zdefiniujemy wszystkie właściwości tagu body. Ponieważ cała treść znajduje się w tagu body, ustawienia te będą miały wpływ na całą stronę. Tło i kolor (kolor) czcionki zostały ustawione na ciemnoszary. Rodzina czcionek (rodzina czcionek) została ustawiona na verdana. Jeżeli komputer używany do przeglądania naszej strony nie posiada czcionki „verdana”, wyświetli naszą witrynę czcionką „arial”. Możesz dodać więcej czcionek do listy. „Sans-serif” to typ ogólny, który będzie używany, gdy żadna podana przez Ciebie czcionka nie była dostępna. Rozmiar czcionki (rozmiar czcionki) został ustawiony na 12 pikseli. To jest wartość bezwzględna. Jeśli chcesz edytować inne rozmiary czcionek (takie jak nagłówki, akapity, pozycje menu, …) możesz użyć jednostki względnej „em” zamiast „px”. W ten sposób, jeśli chcesz zmienić rozmiar swojej witryny, wystarczy zmienić rozmiar czcionki body. Margines został ustawiony na 0 pikseli dla wszystkich czterech stron tagu body. Ma to na celu upewnienie się, że witryna będzie trzymać się górnej części okna.

Krok 3: Dodawanie kontenera z nagłówkiem i zawartością

Teraz dodamy kontener. To jest po prostu wyśrodkowany div, który będzie zawierał całą naszą witrynę. W tym kontenerze dodamy jeszcze dwa div; div zawartości i div nagłówka. Nasz plik html będzie teraz wyglądał tak: test Content Header Dodamy następujący kod do naszego pliku css:div#container { width: 800px; margines: 0px auto; tło: #FFFFFF; padding: 0px;}div#content { szerokość: 800px; padding-top: 100px; background: yellow;}div#header { szerokość: 800px; wysokość: 100px; tło: niebieskie; pozycja: bezwzględna; top: 0px;}.clearfix:after {treść:"."; Blok wyświetlacza; wysokość:0; oba czyste; widoczność:hidden;}.clearfix {display:inline-block;}/* Ukryj z IE Mac \*/.clearfix {display:block;}div#container oznacza, że mamy znacznik div z identyfikatorem „kontener”. Dodamy trochę kolorów i "margin: 0px auto;" aby upewnić się, że nasz kontener jest wyśrodkowany na stronie. Musimy nadać treści padding-top, a nagłówkowi wartość bezwzględną z „top: 0px”, aby upewnić się, że nagłówek jest umieszczony nad inną treścią. brzydkie kolory. Ma to na celu ułatwienie odczytywania kolorów i oglądania różnych elementów div. Będziemy potrzebować tego dziwnego kodu z poprawką, aby upewnić się, że elementy div nawigacji i treści (dodane w następnym kroku) nie wypadną z otaczającego div.

Krok 4: Utwórz dwa elementy DIV w module Content Div do nawigacji i rzeczywistej zawartości

Dodamy teraz dwa kolejne elementy div do elementu div zawartości. Jeden do nawigacji, a drugi do rzeczywistej zawartości. Pomiędzy tagiem zawartości; dodasz nowy kod:

Nawigacja Główna zawartość Dodamy trochę kodu css, aby wyświetlić nawigację i główną zawartość divs;div#nav { width: 200px; pływak: lewy; background: orange;}div#maincontent { szerokość: 600px; pływak: w prawo; background: pink;}Zauważ, że te dwa divy są pływające. Gdybyśmy nie umieścili dodatkowego kodu clearfix w poprzednim kroku, div unosiłyby się poza otaczającym div. Dzięki metodzie clearfix upewnimy się, że tak się nie stanie.

Krok 5: Dodaj kilka dodatkowych elementów Div do struktury w nawigacji

Dodamy teraz kilka dodatkowych elementów div do obu elementów div „nav”, aby utworzyć pewien rodzaj struktury na naszej stronie internetowej. Zmień następujący fragment kodu:

• bla
• Bar

Dodamy teraz fragment kodu definiujący sposób wyświetlania „bloku nawigacyjnego” div. Pamiętaj, że blok nawigacyjny ma klasę, a nie identyfikator. Powód tego jest prosty; div z identyfikatorem są wyświetlane tylko raz (blok nawigacyjny, nagłówek, stopka, …). Div z klasami mogą być wyświetlane więcej niż raz. Tutaj użyjemy klasy. Na wszelki wypadek będziemy chcieli później dodać kolejny blok nawigacyjny.div.navblock { width: 180px; margines: 5px auto; border: 1px solid red;}Jeżeli chcemy dodać kolejny blok nawigacji, wystarczy dodać nową… strukturę. Twój kod będzie teraz wyglądał tak;

• bla
• Bar
• Gwizd
• Daleko

Krok 6: Dodaj kilka dodatkowych elementów div do struktury w głównej treści

Teraz zrobimy to samo dla div maincontent. Kod wygląda teraz tak:

Lorem ipsum dolor sit amet, …

Ponownie dodamy fragment kodu do naszego pliku css, aby określić sposób wyświetlania div:div.contentblock { width: 580px; margines: 5px auto; border: 1px solid white;} Możemy teraz dodać kolejny blok treści, dodając kolejny „…” w div maincontent w ten sposób;

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementm dictum, …

Krok 7: Spraw, aby strona była trochę mniej brzydka

Teraz zabawna część; kolory. Teraz, gdy mamy główną strukturę div, możemy zmienić kolory na coś mniej chaotycznego/brzydkiego/…Po prostu pobaw się kolorami w pliku css. Oto kompletny plik html strony internetowej wyświetlanej na obrazie: test

• bla
• Bar
• Gwizd
• Daleko

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementm dictum, …

Nagłówek A to jest kompletny plik css:body { background: #444444; rodzina czcionek: verdana, arial, bezszeryfowa; kolor: #444444; rozmiar czcionki: 12px; margines: 0px;}div#container { szerokość: 800px; margines: 0px auto; tło: #FFFFFF; padding: 0px;}div#content { szerokość: 800px; padding-top: 100px; background: #FFFFFF;}div#header { szerokość: 800px; wysokość: 100px; tło: #888888; pozycja: bezwzględna; góra: 0px;}div#nav { szerokość: 200px; pływak: lewy; background: #FFFFFF;}div#maincontent { szerokość: 600px; pływak: w prawo; background: #DDDDDD;}div.navblock { szerokość: 180px; margines: 5px auto; border: 1px solid #DDDDDD;}div.contentblock { width: 580px; margines: 5px auto; border: 1px solid #FFFFFF;}.clearfix:after {content:"."; Blok wyświetlacza; wysokość:0; oba czyste; widoczność:hidden;}.clearfix {display:inline-block;}/* Ukryj w IE Mac \*/.clearfix {display:block;} Więc teraz masz podstawy. Oczywiście wciąż jest wiele do edycji, takie jak kolory, rozmiary czcionek, lepiej wyglądający blok nawigacyjny… Ale te instrukcje dotyczą tylko struktury div. Jeśli chcesz zobaczyć inne powiązane instrukcje, zawsze możesz zapytać. Zobaczę, czy znajdę czas.