Przykładowe układy stron

Zadanie 1. Za pomocą kaskadowych arkuszy stylów wykonaj następujące figury geometryczne w różnych kolorach: kwadrat, koło, trójkąt, prostokąt, trapez*. Użyj stylu zewnętrznego.

http://blog.piotrnalepa.pl/2012/10/11/css-magia-figur-uzyskanych-za-pomoca-css/

Pozycjonowanie elementów CSS

Pozycjonowanie odpowiada za umiejscowanie elementu w dowolnie wybranym miejscu przez zastosowanie właściwości position. Rozróżniamy dwa rodzaje pozycjonowania:

  • pozycjonowanie względne, nazywane również relatywnym (ang. relative), pozwala na zmianę położenia elementu w stosunku do jego położenia początkowego. Wykorzystuje się w tym celu dodatkowe  cztery właściwości: topleftrightbottom, którym należy przypisać odpowiednie wartości (w odpowiednich jednostkach miary) odpowiadającym przesunięciom w górę, lewo, prawo i do dołu.
  • pozycjonowanie bezwzględne, nazywane również absolutnym  (ang. absolute), pozwala na ustalenie położenia elementu w stosunku do ram okna przeglądarki lub innego elementu nadrzędnego. Wykorzystuje się w tym celu dodatkowo cztery właściwości: top, left, right, bottom. Jednostki najlepiej przydatne: px, %, em.

Zobacz model pudełkowy.

Zadanie 1. Utwórz stronę, na której znajdują się znaczniki grupujące. Dla każdego z nich zdefiniuj margines, obramowanie i odstępy. Użyj znaczników margin i padding. Treść strony - dowolna.