Maken van een banner is een basisdeel van webdesign. Veel eerste keer ontwerpers gebruikstabellen de banner en website lay-out maken. Echter, met behulp van CSS kunt u de achtergrond, de kleuren, de grootte en de randen van de banner. Tabellen maken een ontwerp moeilijk te beheren na verloop van tijd terwijl CSS u elementen kunt desgewenst wijzigen. U moet een basiskennis van HTML te bereiken dit stukje van scripts. Terwijl er vele manieren zijn om een spandoek maken met CSS, in deze tutorial zullen we maken een gecentreerde tweetonige spandoek met de tekst die rechts is uitgelijnd.
Wat die u nodig hebt
- Een teksteditor
- Een website
- Een color picker
Open uw HTML-bestand. Na de lichaamsmarkering zetten in div-tags en geef het div-element een ID-tag. Bel de banner ID
.Typ de tekst van uw banner tussen de div-tags die u zojuist hebt gemaakt,
. Omsluiten de test in H1-tags, . Dit zorgt ervoor dat uw tekst groter is dan de standaardgrootte van meer dan vier punten.Open uw CSS-bestand. De stijl voor de titelregel instellen door te typen:
banner {}. De #banner zal vertellen de browsers op zoek naar de stijl van id = "banner" dat dit voor een ID-tag en het heet banner.Tussen de {} moet u typt in de stijlen. Er zijn vele stijlen in CSS. We zullen alleen een paar stijlen gebruiken. Wij willen eerst de banner op de pagina te centreren.
banner {marge: 0 auto;}Deze maakt gebruik van marges te midden van de website met auto en nul van de boven- en ondermarges.
Voeg de andere stijlen.
banner {marge: 0 autoGAAN
Breedte: 780px
GAAN
Hoogte: 300px
GAAN
Rand: #ff0000 solide 10px
GAAN
Achtergrond: #ffffff
GAAN
Kleur: #ff0000
GAAN
Lettertype-grootte: 18px
GAAN
Tekst uitlijnen: recht
GAAN
Opvulling rechts: 10px;}Breedte en hoogte bepalen de grootte van de banner. De grens is een ononderbroken lijn van tien pixel rond het vak. Het is rode zoals gedefinieerd door het hexadecimale code, dat wil zeggen, de # gevolgd door de zes letters en cijfers na het. De achtergrond is ingesteld op wit. Kleur definieert de kleur van de tekst, die weer rood is, aan de grens. Tekengrootte Hiermee definieert u de grootte van de tekst. Tekst uitlijnen, lijnt de tekst. In dit geval hebben we de tekst rechts van het vak geplaatst. Opvulling creëert ruimte tussen de inhoud, zoals tekst, in de banner en de rand van de banner. Opvulling rechts is ingesteld op 10px ruimte tussen de tekst en de rechterrand te geven.
Uw bestanden opslaan.
- U kunt de kleuren wijzigen, gebruik de kleurkiezer om een kleur op het scherm te kiezen. De Plukker van de kleur zal u vervolgens de hexadecimale code voor die kleur tonen.