Saturs

• Instrukcijas
• Jūsu vietne
• banner {}
• banner {margin: 0 auto;}
• banner {margin: 0 auto
• Kas jums nepieciešams

Reklāmkaroga veidošana ir svarīga webdesign daļa. Daudzi iesācēju dizaineri izmanto tabulas, lai izveidotu tīmekļa vietnes reklāmkarogu un izkārtojumu. Tomēr, izmantojot CSS, varat iestatīt banneru fonu, krāsas, izmēru un robežas. Galdi padara dizaina pārvaldību laika gaitā sarežģītu, bet CSS ļauj mainīt elementus pēc vajadzības. Jums nepieciešams pamatzināšanas par HTML, lai palaistu šo mazo pamācību. Lai gan ir daudz veidu, kā izveidot reklāmkarogu ar CSS, šajā apmācībā mēs izveidosim divkrāsainu, centrētu, labo bultiņu.

Instrukcijas

Nepieciešamās pamatzināšanas par šo pamācību HTML (internetfoto attēls, ko FX Berlin no Fotolia.com)

1. Atveriet HTML failu. Pēc BODY taga pievienojiet DIV, kam seko ID. Nosaukumu atzīmējiet kā "banner":

2. Ievadiet reklāmkaroga tekstu starp DIV tagiem, ko tikko izveidojāt:

   Jūsu vietne

   Aizvērt ar etiķeti H1:

   Jūsu vietne

   Tādējādi jūsu teksts būs lielāks par noklusējuma lielumu par vairāk nekā četriem punktiem.

3. Atveriet savu CSS failu. Konfigurējiet reklāmkaroga stilu, ierakstot:

   banner {}

   "#Banner" tagu pārlūkprogrammām, kas meklē "id =" banner "stilu - tā tagu sauc par" banner ".

4. Starp {} jums būs jāievada stili. CSS ir daudz stilu. Mēs tikai izmantosim dažus no tiem. Pirmkārt, mēs vēlamies centrēt banneri lapā:

   
   

   banner {margin: 0 auto;}

   Tādējādi baneris ir centralizēts vietnē, ar automātisko nulles punkta rezervi attiecībā pret līnijas augšējo un apakšējo daļu.

5. Pievienojiet citus stilus:

   banner {margin: 0 auto

   Platums: 780px Augstums: 300px Robeža: # ff0000 ciets 10px Fons: #ffffff Krāsa: # ff0000 Fonta lielums: 18px Teksta izlīdzināšana: labais Padding-right: 10px;}

   Platums un augstums nosaka banera izmēru. Robeža ir cieta 10 pikseļu līnija ap kastīti. Tas būs sarkans, kā to nosaka heksadecimālais kods, ti, ar sešiem cipariem un burtiem, kas atbilst simbolam "#". "Fons" ir iestatīts uz baltu. "Krāsa" tagu nosaka sarkanā krāsā esošā teksta krāsu, lai tas atbilstu robežai. "Fonta lieluma" atzīme nosaka teksta lielumu. "Text-align" definē teksta pozicionēšanu - šajā gadījumā ir izvēlēta pareizā kastes izlīdzināšana. "Padding" izveido atstarpi starp saturu, piemēram, tekstu, kastes iekšpusē un robežu. "Padding-right" ir iestatīts, lai starp tekstu un labo malu piešķirtu 10 pikseļu atstarpi.

   
   

6. Saglabājiet failus.

Kas jums nepieciešams

• Teksta redaktors
• Vietne
• Krāsu atlasītājs