Zawartość

• Instrukcje
• Twoja witryna
• banner {}
• banner {margin: 0 auto;}
• banner {margin: 0 auto
• Czego potrzebujesz

Tworzenie banera jest kluczową częścią projektu internetowego. Wielu początkujących projektantów używa tabel do stworzenia banera i układu strony. Jednak za pomocą CSS można ustawić tło, kolory, rozmiar i granice banera. Tabele utrudniają zarządzanie projektami z czasem, natomiast CSS pozwala na zmianę elementów według potrzeb. Aby uruchomić ten mały samouczek, potrzebujesz podstawowej znajomości języka HTML. Chociaż istnieje wiele sposobów tworzenia banerów za pomocą CSS, w tym samouczku stworzymy dwu-stonowany, wyrównany do środka baner wyrównany do prawej.

Instrukcje

Wymagana podstawowa znajomość języka HTML dla tego tutoriala (Internetseite image FX Berlin z Fotolia.com)

1. Otwórz plik HTML. Po znaczniku BODY dodaj DIV, a następnie ID. Nazwij tag jako „banner”:

2. Wprowadź tekst banera między właśnie utworzonymi tagami DIV:

   Twoja witryna

   Zamknij etykietą H1:

   Twoja witryna

   Spowoduje to, że Twój tekst będzie większy niż domyślny rozmiar o więcej niż cztery punkty.

3. Otwórz swój plik CSS. Skonfiguruj styl banera, wpisując:

   banner {}

   Tag „#banner” powie przeglądarkom, że szukają stylu „id =„ banner ””, więc tag nazywa się „banerem”.

4. Między {} musisz wprowadzić style. Istnieje wiele stylów w CSS. Wykorzystamy tylko niektóre z nich. Najpierw chcemy wyśrodkować baner na stronie:

   banner {margin: 0 auto;}

   W ten sposób baner jest scentralizowany w witrynie, z automatycznym marginesem punktu zerowego w stosunku do góry i dołu linii.

   
   

5. Dodaj inne style:

   banner {margin: 0 auto

   Szerokość: 780px Wysokość: 300px Granica: # ff0000 bryła 10px Tło: #ffffff Kolor: # ff0000 Rozmiar czcionki: 18px Wyrównywanie tekstu: prawe Prawo dopełnienia: 10px;}

   Szerokość i wysokość określają rozmiar banera. Obramowanie jest ciągłą linią 10 pikseli wokół kartonu. Będzie czerwony, zgodnie z definicją kodu szesnastkowego, tj. Za pomocą sześciu cyfr i liter następujących po symbolu „#”. „Tło” jest ustawione na białe. Znacznik „Kolor” ustawia kolor tekstu, który jest ponownie czerwony, aby pasował do obramowania. Znacznik „font-size” określa rozmiar tekstu. „Wyrównanie tekstu” definiuje położenie tekstu - w tym przypadku wybrano właściwe wyrównanie ramki. „Wypełnienie” tworzy spację między treścią, taką jak tekst, wewnątrz pola i obramowania. „Padding-right” jest ustawiony, aby dać 10 pikseli przestrzeni między tekstem a prawą krawędzią.

6. Zapisz pliki.

Czego potrzebujesz

• Edytor tekstu
• Strona
• Próbnik kolorów