Obsah

• inštrukcia
• Vaša stránka
• banner {}
• banner {okraj: 0 auto;}
• banner {margin: 0 auto
• Čo potrebujete

Tvorba banneru je kľúčovou súčasťou webdizajnu. Mnohí začínajúci dizajnéri používajú tabuľky na vytvorenie bannera a rozloženia webovej stránky. Pomocou CSS však môžete nastaviť pozadie, farby, veľkosť a okraje bannera. Tabuľky časom sťažujú správu dizajnu, kým CSS vám umožňuje meniť prvky podľa potreby. Na spustenie tohto malého návodu potrebujete základné znalosti jazyka HTML. Hoci existuje mnoho spôsobov, ako vytvoriť banner s CSS, v tomto tutoriáli vytvoríme dvojfarebný, zarovnaný banner zarovnaný na stred.

inštrukcia

Požadované základné znalosti HTML pre tento tutoriál (internetseite image od FX Berlin od Fotolia.com)

1. Otvorte súbor HTML. Po značke BODY pridajte DIV a potom ID. Názov značky označte ako „banner“:

2. Zadajte text bannera medzi tagy DIV, ktoré ste práve vytvorili:

   Vaša stránka

   Zatvorte štítok H1:

   Vaša stránka

   To spôsobí, že text bude väčší ako predvolená veľkosť o viac ako štyri body.

3. Otvorte súbor CSS. Nakonfigurujte štýl bannera zadaním:

   banner {}

   Značka "#banner" povie prehliadačom, ktorí hľadajú štýl "id =" banner - "tag" sa nazýva "banner".

4. Medzi {}, budete musieť zadať štýly. Existuje mnoho štýlov v CSS. Len niektoré z nich použijeme. Najprv chceme umiestniť banner na stránku:

   
   

   banner {okraj: 0 auto;}

   Takto je banner centralizovaný v mieste s automatickým rozpätím nulového bodu vo vzťahu k hornej a dolnej časti čiary.

5. Pridať ďalšie štýly:

   banner {margin: 0 auto

   Šírka: 780px Výška: 300px Ohraničenie: # ff0000 pevné 10px Pozadie: #ffffff Farba: # ff0000 Veľkosť písma: 18px Zarovnanie textu: vpravo Pádová doprava: 10px;}

   Šírka a výška definujú veľkosť bannera. Ohraničenie je pevná čiara 10 pixelov okolo kartónu. Bude červená, ako je definované hexadecimálnym kódom, tj šiestimi číslicami a písmenami, ktoré nasledujú za znakom "#". "Background" je nastavené na bielu. Značka "Farba" nastaví farbu textu, ktorý je opäť červený, aby sa zhodoval s okrajom. Značka "font-size" definuje veľkosť textu. "Zarovnanie textu" definuje umiestnenie textu - v tomto prípade bolo zvolené správne zarovnanie poľa. "Výplň" vytvára medzeru medzi obsahom, napríklad textom, vnútri poľa a okrajom. "Padding-right" je nastavené tak, aby medzi textom a pravým okrajom poskytovalo 10 pixelov priestoru.

   
   

6. Uložte súbory.

Čo potrebujete

• Textový editor
• webové stránky
• Výber farby