Hvordan lage et banner for et nettsted med CSS

July 22

Å gjøre en banner er en grunnleggende del av webdesign. Mange første gang designere bruker tabeller til å lage banner og nettstedet layout. Men ved hjelp av CSS kan du definere bakgrunnen, farger, størrelse og grenser på banneret. Tabeller lage et design vanskelig å håndtere over tid mens CSS lar deg endre elementer som trengs. Du trenger en grunnleggende kunnskap om HTML for å oppnå dette litt av scripting. Mens det er mange måter å lage et banner med CSS, i denne opplæringen vil vi skape en sentrert to tone banner med teksten som er riktig justert.

Bruksanvisning

1 Åpne html-fil. Etter BODY-koden satt i DIV-koder og gi DIV en ID-kode. Ring ID banner
<Div id = "banner"> </ div>.

2 Skriv inn teksten på banneret mellom DIV-koder du nettopp opprettet, <div id = "banner"> nettstedet ditt </ div>. Encase testen i H1 tags, <div id = "banner"> <h1> nettstedet ditt </ h1> </ div>. Det vil gjøre teksten større enn standardstørrelsen med mer enn fire poeng.

3 Åpne din CSS fil. Sett opp stil for banneret ved å skrive:

banner {}. Den #banner vil fortelle nettlesere på jakt etter den stilen id = "banner" at dette er for en ID-kode, og det er oppkalt banner.

4 Mellom {} du må skrive inn stiler. Det er mange stiler i CSS. Vi vil bare bruke noen stiler. Først ønsker vi å sentrere banner på siden.

banner {margin: 0 auto;}

Dette bruker marginer for å sentrere nettsted med auto og null topp- og bunnmarg.

5 Tilsett de andre stilarter.

banner {margin: 0 auto

GÅ
Bredde: 780px
GÅ
Høyde: 300px
GÅ
Border: # ff0000 solid 10px
GÅ
Bakgrunn: #ffffff
GÅ
Color: # ff0000
GÅ
Font-size: 18px
GÅ
Text-align: right
GÅ
Padding-right: 10px;}

Bredde og høyde definere størrelsen på banneret. Grensen er en solid ti pixel linje rundt boksen. Det blir rød som definert av hex kode, dvs. # etterfulgt av de seks bokstaver og tall etter det. Bakgrunnen er satt til hvit. Color definerer fargen på teksten, som igjen er rød, for å matche grensen. Font-size definerer tekststørrelsen. Text-align posisjonerer teksten. I dette tilfellet har vi posisjonert teksten til høyre for boksen. Padding skaper mellomrom mellom innhold, for eksempel tekst, inne i banneret og kanten på banneret. Padding-retten er satt til å gi 10px plass mellom teksten og høyre kant.

6 Lagre filene dine.

Hint

For å endre fargene, bruke fargevelgeren til å velge en farge på skjermen. Fargevelgeren vil da vise deg hex kode for den fargen.