Istnieją dwa rodzaje układu witryny: tabelaryczny i blokowy. I o ile ta pierwsza jest wygodniejsza do tworzenia prostych stron html, to ta druga jest idealna, jeśli musisz dodać poszczególne elementy w postaci bloków.
Instrukcje
Krok 1
Istnieją dwie techniki, które pozwolą Ci samodzielnie opracować projekt blokowy: poprzez osadzenie kaskadowych arkuszy stylów w dokumencie lub połączenie ich z zasobu zewnętrznego. Oba dają ten sam wynik, więc nie ma między nimi zasadniczej różnicy. W pierwszym przypadku wklej następujący kod w dowolnym miejscu pliku style.css:
.blok1 {
}
Blok1 - nazwa bloku, możesz wpisać dowolną inną. Pomiędzy nawiasami klamrowymi określ parametry w następującym formacie: nazwa atrybutu> dwukropek> wartość> średnik (w tym umieszczony przed nawiasem klamrowym). Powszechnie stosowane są następujące elementy:
- szerokość - szerokość (500px, 100% itd.);
- wzrost - wzrost (200px, 25% itd.);
- tło - kolor tła (żółty, czerwony, # 000000);
- padding - padding wokół treści wewnątrz bloku (0px, 20%);
- marża - zewnętrzne marże z bloku (15px, 40%);
- border - ramka (ramka: stałe 0px czarne;);
- float - wyrównanie (lewo, prawo);
- border-radius - zaokrąglanie rogów (border-radius: 10px;).
Krok 2
W drugim użyciu CSS dodaj stylizację między tagami i:
.blok1 {
}
I dodaj żądane parametry.
Krok 3
Wstaw blok w żądanym miejscu na stronie za pomocą polecenia:
Blok 1
Zapisz i odśwież stronę, powinna się pojawić. Pamiętaj, że wyrównanie wysokości może się różnić w zależności od stopnia zapełnienia treści. Na przykład, jeśli ustawisz 300px, ale napiszesz tylko jeden wiersz tekstu, nie zostanie on wyświetlony w całości. Można to skorygować np. za pomocą tabeli z wymaganymi parametrami, którą należy umieścić wewnątrz bloku, tj. między tagami i. Aby granice nie były widoczne, wstaw atrybut
