Sådan Indsættes Din Egen Header På Siden

Indholdsfortegnelse:

Sådan Indsættes Din Egen Header På Siden
Sådan Indsættes Din Egen Header På Siden

Video: Sådan Indsættes Din Egen Header På Siden

Video: Sådan Indsættes Din Egen Header På Siden
Video: Sådan indsættes CSS kode - CSS Episode 1 2024, Kan
Anonim

"Overskriften" eller toppen af websiden gør dit websted unikt, gør det muligt at adskille sig fra andre og afspejle det specifikke ved dit internetprojekt. Ved hjælp af et originalt og velfremstillet header kan du dekorere og forfine enhver webside, og for at gøre headeren selv skal du lære at layout dette webelement.

Sådan indsættes din egen header på siden
Sådan indsættes din egen header på siden

Instruktioner

Trin 1

Hvis du vil have dit websted til at have statiske, konstante dimensioner, skal du oprette en statisk overskrift, der ikke ændres afhængigt af ændringen i skærmens bredde. Bestem bredden og højden på overskriften (for eksempel 996x230), og indsæt et baggrundsbillede i den øverste blok ved hjælp af følgende CSS-kode, hvor header-1.jpg

baggrund: # a6b7d3 url (img / header-1.jpg) no-repeat;

bredde: 996px;

højde: 230px;

} HTML-koden for en overskrift af denne type ser sådan ud:

Trin 2

Hvis webstedet er bygget på en sådan måde, at dets dimensioner tilpasses skærmens bredde, skal overskriften være typesæt under hensyntagen til alle større skærmopløsninger. Den maksimale bredde på en sådan overskrift skal være 1920 pixels. For at indsætte en sådan header skal du bruge CSS-koden: #header {baggrund: # a6b7d3 url (img / header-2.jpg) no-repeat center; højde: 250px;} HTML-koden svarer i dette tilfælde til den forrige. CSS-koden er blevet ændret i nogle parametre - nu har den en attribut til centrering af headerbilledet, som gør det muligt at passe baggrunden til enhver skærmbredde.

Trin 3

Du kan også oprette en mere kompleks overskrift, skåret i flere baggrundsblokke, som ændrer deres position afhængigt af visningsportens størrelse. CSS for en sådan overskrift er mere kompleks og omfattende og involverer gentagelse af flere baggrundselementer i overensstemmelse med de flydende dimensioner i browservinduet, hvor dit websted kan vises.

Anbefalede: