Hoe maak je een Banner voor een Site met CSS



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,

    Uw Website
    . Omsluiten de test in H1-tags,

    Uw Website

    . 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 auto

    GAAN
    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.

Tips & waarschuwingen
  • 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.

Gerelateerde Artikelen

Hoe maak je een Forum met HTML

Hoe maak je een Forum met HTML

Een forum is een sleutelelement om de exploitatie van een website. In feite, bestaan sommige websites uit een forum en niets anders. Deze forums zijn populair omdat u uw bezoekers een stem op uw website geven, zodat ze kunnen hun gedachten en ideeën
Hoe maak je een Margarita met smaak pre-mix

Hoe maak je een Margarita met smaak pre-mix

Gewoon omdat u gebruik maakt van vooraf gemengde smaakstoffen voor uw dranken betekent niet dat je hebt vast te houden aan de standaard richtingen van zoveel alcohol te zoveel mengen en dat is het. U kunt altijd dat uw eigen kleine wendingen aan het
Hoe maak je een Kazoo met toiletpapier buizen

Hoe maak je een Kazoo met toiletpapier buizen

Hoe maak je een Kazoo met toiletpapier buizen. Een kazoo muziek maken in de klas of thuis is een geweldige manier om kinderen te krijgen samen een activiteit kunnen ze zelf doen met een beetje hulp en toezicht. Met behulp van dagelijkse benodigdheden
Hoe maak je een animatie met gebruik van GIMP Freeware

Hoe maak je een animatie met gebruik van GIMP Freeware

Hoe maak je een animatie met gebruik van GIMP Freeware. GIMP is een krachtige beeldbewerkingsprogramma beschikbaar kostenloos (zie link hieronder). In dit artikel zullen wij u tonen hoe de software te gebruiken om animatie te maken. In dit voorbeeld
Hoe maak je een Video met een webcam

Hoe maak je een Video met een webcam

Webcams kunnen gebruikers direct communiceren met hun vrienden en familie. Terwijl deze camera's kunnen worden gebruikt voor live video-conferencing, kunnen zij ook worden gebruikt om video die kan worden gepost online of bewerkten samen voor meer co
Hoe maak je een 160 Meter antenne

Hoe maak je een 160 Meter antenne

Antennes voor 160 meter--amateur radio's "top band"--kunnen heel groot en moeilijk te installeren op een typische woonwijk veel. Er zijn oplossingen voor dit probleem in die draad antennes figuur kunnen worden geconstrueerd met diverse horizonta
Hoe maak je een instrumentaal met Audacity

Hoe maak je een instrumentaal met Audacity

Het creëren van een instrumentaal stuk van muziek en mixen die kan het allemaal worden verwezenlijkt met de audio mixing programma Audacity. Audacity kan de gebruiker te importeren nummers, nummers, mengen en effecten om de geluidskwaliteit die u wil
Hoe maak je een videoclip met muziek gratis

Hoe maak je een videoclip met muziek gratis

Of voor vermaak, kunnen school of werk, wetende hoe maak je een videoclip compleet met een soundtrack een waardevolle vaardigheid te hebben. Hebt u een PC of een Apple-computer met Windows of Mac OS, heb je al de software die nodig is om uw eigen vid
Hoe maak je een Galgje met Java

Hoe maak je een Galgje met Java

Iedereen herinnert zich het woord raden spel Hangman als een kind spelen. Een speler kiest in het geheim een woord. De andere speler heeft te raden brieven die opgenomen in het woord zijn. Als ze gelijk heeft, zijn de letters toegevoegd. Als ze verke
Hoe maak je een Blog met behulp van Blogger.com

Hoe maak je een Blog met behulp van Blogger.com

Als u op zoek bent om te maken van uw eigen persoonlijke blog, met behulp van Blogger.com, is hier de introductie van een stap voor stap om te beginnen. Leren hoe te registreren voor een account, kies de blognaam van uw, uw pagina ontwerpt en maken b
Hoe maak je een afspraak met oog op de Wal-Mart Vision Care Center

Hoe maak je een afspraak met oog op de Wal-Mart Vision Care Center

Walmart biedt volledige visie-zorg centra in meer dan 2.500 Walmart locaties, allemaal uitgerust met professionals die kunnen beheren oogonderzoeken, past u voor brillen of contactlenzen en u helpen met eventuele soortgelijke zorgbehoeften van de vis
Hoe maak je een berg met een Tunnel voor een Model Railroad lay-out

Hoe maak je een berg met een Tunnel voor een Model Railroad lay-out

In plaats van uit te gaan en het kopen van een berg met een tunnel voor uw modelspoor, maak uw eigen aangepaste berg. Een zelfgemaakte berg met een tunnel zal bespaart u geld en zal perfect passen bij de thema van uw spoorweg--zoals winters tafereel,
Hoe maak je een boek met bouw papier voor kinderen

Hoe maak je een boek met bouw papier voor kinderen

Als uw kinderen schrijven of tekenen, moet u wellicht een harde tijd bijhouden van hun papier eisen. Gebruik in plaats van de aanschaf van tijdschriften en schetsboekjes, bouw papier om eenvoudige DIY versies. Stock-up op de verpakkingen van de bouw
Hoe maak je een Cape met capuchon voor een kind zonder naaien

Hoe maak je een Cape met capuchon voor een kind zonder naaien

Superheld capes en kleine rode afzuigkappen zijn kostuum stuks dat kinderen hun ouders bedelen te maken tijdens Halloween of voor regelmatige spelen. Met behulp van vilt, kunnen ouders maken een cape met capuchon zonder naaien of de noodzaak om hem v