Der "Header" oder der Anfang der Webseite macht Ihre Site einzigartig, ermöglicht es ihr, sich von anderen zu unterscheiden und die Besonderheiten Ihres Internetprojekts widerzuspiegeln. Mit Hilfe eines originellen und gut gemachten Headers können Sie jede Webseite dekorieren und verfeinern, und um den Header selbst zu erstellen, müssen Sie lernen, wie man dieses Webelement gestaltet.
Anleitung
Schritt 1
Wenn Sie möchten, dass Ihre Site statische, konstante Abmessungen hat, müssen Sie eine statische Kopfzeile erstellen, die sich je nach Änderung der Bildschirmbreite nicht ändert. Bestimmen Sie die Breite und Höhe des Headers (z. B. 996x230) und fügen Sie mit dem folgenden CSS-Code ein Hintergrundbild in den oberen Block ein, wobei header-1.jpg
Hintergrund: # a6b7d3 url (img / header-1.jpg) keine Wiederholung;
Breite: 996px;
Höhe: 230px;
} Der HTML-Code für einen Header dieses Typs sieht so aus:
Schritt 2
Wenn die Site so aufgebaut ist, dass ihre Abmessungen der Bildschirmbreite angepasst sind, sollte der Header unter Berücksichtigung aller gängigen Monitorauflösungen gesetzt werden. Die maximale Breite eines solchen Headers sollte 1920 Pixel betragen. Um einen solchen Header einzufügen, verwenden Sie den CSS-Code: #header {background: # a6b7d3 url (img / header-2.jpg) no-repeat center; height: 250px;} Der HTML-Code ähnelt in diesem Fall dem vorherigen. Der CSS-Code wurde in einigen Parametern geändert - jetzt hat er ein Attribut zum Zentrieren des Header-Bildes, das es ermöglicht, den Hintergrund an jede Bildschirmbreite anzupassen.
Schritt 3
Sie können auch eine komplexere Kopfzeile erstellen, die in mehrere Hintergrundblöcke geschnitten ist und ihre Position je nach Größe des Ansichtsfensters ändert. Das CSS für einen solchen Header ist komplexer und umfangreicher und beinhaltet die Wiederholung mehrerer Hintergrundelemente entsprechend den schwebenden Abmessungen des Browserfensters, in dem Ihre Site angezeigt werden kann.
