Indhold

• retninger
• Dit websted
• banner {}
• banner {margin: 0 auto;}
• banner {margin: 0 auto
• Hvad du har brug for

At lave et banner er en vigtig del af webdesign. Mange nybegyndere designere bruger tabeller til at oprette webstedets banner og layout. Men ved hjælp af CSS kan du indstille baggrunden, farverne, størrelsen og grænserne af banneret. Tabeller gør designstyring vanskelig over tid, mens CSS giver dig mulighed for at ændre elementerne efter behov. Du har brug for en grundlæggende viden om HTML for at køre denne lille tutorial. Selv om der er mange måder at oprette et banner på med CSS, vil vi i denne vejledning oprette et totonet, centreret linie med rette justering.

retninger

Nødvendig grundlæggende kendskab til HTML til denne vejledning (internetseite billede af FX Berlin fra Fotolia.com)

1. Åbn HTML-filen. Efter BODY-tagget skal du tilføje DIV efterfulgt af id'et. Navngiv tagget som "banner":

2. Indtast bannerteksten mellem de DIV-tags, du lige har oprettet:

   Dit websted

   Luk med etiketten H1:

   Dit websted

   Dette vil få din tekst til at være større end standardstørrelsen med mere end fire punkter.

3. Åbn din CSS-fil. Konfigurer banner stilen ved at skrive:

   banner {}

   Taggen "#banner" vil fortælle browsere, der leder efter "id =" banner "" stilen - så taggen hedder et "banner".

4. Mellem {} skal du indtaste stilarterne. Der er mange stilarter i CSS. Vi skal bare bruge nogle af dem. Først vil vi centrere banneret på siden:

   
   

   banner {margin: 0 auto;}

   Banneret er således centraliseret på stedet, med automatisk margen på nulpunkt i forhold til toppen og bunden af ​​linjen.

5. Tilføj de andre stilarter:

   banner {margin: 0 auto

   Bredde: 780px Højde: 300px Border: # ff0000 fast 10px Baggrund: #ffffff Farve: # ff0000 Skriftstørrelse: 18px Tekstjustering: højre Padding-højre: 10px;}

   Bredden og højden definerer bannerens størrelse. Grænsen er en solid 10 pixel linje rundt om kartonen. Det vil være rødt, som defineret af den hexadecimale kode, dvs. ved de seks tal og bogstaver, der følger symbolet "#". "Baggrund" er indstillet til hvid. Taggen "Farve" angiver farven på teksten, som er rød igen, for at matche grænsen. "Skriftstørrelse" -taggen definerer størrelsen af ​​teksten. "Text-align" definerer placeringen af ​​teksten - i dette tilfælde er den rigtige justering af kassen blevet valgt. "Padding" skaber en mellemrum mellem indholdet, som f.eks. Teksten, inde i boksen og grænsen. "Padding-right" er indstillet til at give 10 pixel mellemrum mellem teksten og den højre kant.

   
   

6. Gem filerne.

Hvad du har brug for

• Tekst editor
• websted
• Farvevælger