De "header", of de bovenkant van de webpagina, maakt uw site uniek, laat hem verschillen van andere en weerspiegelt de specifieke kenmerken van uw internetproject. Met behulp van een originele en goed gemaakte koptekst, kunt u elke webpagina verfraaien en verfijnen, en om de koptekst zelf te maken, moet u leren hoe u dit webelement moet opmaken.
instructies:
Stap 1
Als u wilt dat uw site statische, constante afmetingen heeft, moet u een statische koptekst maken die niet verandert afhankelijk van de wijziging in de breedte van het scherm. Bepaal de breedte en hoogte van de header (bijvoorbeeld 996x230) en voeg een achtergrondafbeelding in het bovenste blok in met behulp van de volgende CSS-code, waarbij header-1.jpg
achtergrond: # a6b7d3 url (img / header-1.jpg) niet herhalen;
breedte: 996px;
hoogte: 230px;
} De HTML-code voor een header van dit type ziet er als volgt uit:
Stap 2
Als de site zo is gebouwd dat de afmetingen zijn aangepast aan de breedte van het scherm, moet de koptekst worden gezet, rekening houdend met alle belangrijke monitorresoluties. De maximale breedte van zo'n header mag 1920 pixels zijn. Om zo'n header in te voegen, gebruikt u de CSS-code: #header {background: # a6b7d3 url (img / header-2.jpg) no-repeat center; hoogte: 250px;} De HTML-code is in dit geval vergelijkbaar met de vorige. De CSS-code is in sommige parameters gewijzigd - nu heeft het een attribuut voor het centreren van de koptekst, waardoor het de achtergrond op elke schermbreedte kan aanpassen.
Stap 3
U kunt ook een complexere koptekst maken, in verschillende achtergrondblokken geknipt, die van positie veranderen afhankelijk van de grootte van de viewport. De CSS voor zo'n header is complexer en uitgebreider en omvat het herhalen van verschillende achtergrondelementen in overeenstemming met de zwevende afmetingen van het browservenster waarin uw site kan worden bekeken.
