Conţinut

• instrucțiuni de ghidare
• Site-ul dvs.
• banner {}
• banner {marja: 0 auto;}
• banner {marja: 0 auto
• Ce ai nevoie

Efectuarea unui banner este o parte esențială a webdesign-ului. Mulți designeri începători folosesc mesele pentru a crea bannerul și aspectul site-ului. Cu toate acestea, folosind CSS, puteți seta fundalul, culorile, dimensiunea și marginea bannerului. Tabelele fac dificilă gestionarea designului în timp, în timp ce CSS vă permite să modificați elementele după cum este necesar. Aveți nevoie de cunoștințe de bază despre HTML pentru a rula acest tutorial mic. Deși există mai multe moduri de a crea un banner cu CSS, în acest tutorial vom crea un banner aliniat la dreapta, aliniat în centru.

instrucțiuni de ghidare

Cunoștințe de bază necesare despre HTML pentru acest tutorial (imagine Internetseite de către FX Berlin de la Fotolia.com)

1. Deschideți fișierul HTML. După eticheta BODY, adăugați DIV, urmată de ID. Denumiți eticheta ca "banner":

2. Introduceți textul bannerului între etichetele DIV pe care tocmai le-ați creat:

   Site-ul dvs.

   Închideți cu eticheta H1:

   Site-ul dvs.

   Acest lucru va face ca textul dvs. să fie mai mare decât dimensiunea implicită cu mai mult de patru puncte.

3. Deschideți fișierul CSS. Configurați stilul banner introducând:

   banner {}

   Eticheta "#banner" va indica browserelor căutând stilul "id =" banner "- așa că eticheta este denumită" banner ".

4. Între {}, va trebui să introduceți stilurile. Există multe stiluri în CSS. Vom folosi doar câteva dintre ele. În primul rând, vrem să centrăm bannerul pe pagină:

   
   

   banner {marja: 0 auto;}

   Astfel, bannerul este centralizat pe site, cu o marjă automată de zero puncte față de partea de sus și de jos a liniei.

5. Adăugați celelalte stiluri:

   banner {marja: 0 auto

   Lățime: 780px Înălțime: 300px Frontieră: # ff0000 Solid 10px Background: #ffffff Culoare: # ff0000 Dimensiune font: 18px Text-align: right Padding-right: 10px;}

   Lățimea și înălțimea definesc dimensiunea bannerului. Bordajul este o linie solidă de 10 pixeli în jurul cutiei. Acesta va fi roșu, așa cum este definit de codul hexazecimal, adică de cele șase cifre și litere care urmează simbolul "#". "Fundal" este setat pe alb. Eticheta "Culoare" stabilește culoarea textului, care este din nou roșu, pentru a se potrivi cu marginea. Eticheta "font-size" definește dimensiunea textului. "Text-align" definește poziționarea textului - în acest caz, a fost aleasă alinierea corectă a casetei. Plăcuirea creează un spațiu între conținut, cum ar fi textul, în interiorul casetei și la frontieră. Opțiunea "Padding-right" este setată pentru a da 10 pixeli de spațiu între text și marginea dreaptă.

   
   

6. Salvați fișierele.

Ce ai nevoie

• Editor de text
• website
• Selector de culori