Der Header auf dem gesamten Bildschirm angepasst
Wie eine der Header auf dem gesamten Bildschirm angepasst? Es gibt viele Lösungen für diese Aufgabe und viel besser oder schlechter End-Effekte. Jeder, der die Annahmen des Autors erfüllt, kann es ausreichend sein. Der folgende Eintrag zeigt, wie ein Container zu erstellen <div>, um die Größe von jedem Browser-Fenster auf Ihrem Computer, Tablet oder Smartphone. Durch die Platzierung eines solchen Behälters als erste unter dem Tag <body> hat den Effekt einer vollständigen Fenster, nachdem die Seite geöffnet wird. Als Hintergrund können Sie ein Bild, Video oder gif, und in den Vordergrund gestellt Menü. Ein wichtiges Element dieser Lösung besteht darin, dass der Hintergrund in das Fenster angepasst werden, seine extreme Teile abzuschneiden, und der Behälter <div> wird in seiner Gesamtheit zu bewegen. Ein Beispiel einer solchen Lösung ist eine Seite PerfectSoft oder relaksowanie.pl.
Needed elements of code
The whole consists of small blocks of code, which for clarity will be provided in separate files. The first will be presented html code that attaches files css and javascript, and in the body section shows the container header („large-header“) and the container text in the rest of the page („outside_header“). Starting file „demo.js“ must be found for container „large-header“ because it was there defined function and its call. This allows you to run it as soon after the formation of the container, but it can be changed freely, without compromising the functionality of the code.
<!DOCTYPE html> <html lang="pl"> <head> <link rel="stylesheet" type="text/css" href="css/component.css" /> <link rel="stylesheet" type="text/css" href="Style.css" media="screen" /> </head> <body> <div id="large-header" class="large-header"> <!-- Der Inhalt angepasst Header --> </div> <script src="js/demo.js"></script> <div id="outside_header"> <br><br> "PerfectSoft" <br><br> Die ideale Lösung für Unternehmen <br><br> </div> </body> </html>
In der Datei „style.css“, das wichtigste ist, den Datensatz zu setzen „margin: 0;“ für den Body-Tag. Abgesehen von diesem Eintrag wird nicht möglich sein, im Vollbildmodus zu erreichen, wie dies durch Standardränder enthalten sein. Es ist auch angebracht, diesen Rekord von anderen Tags zu erweitern, die keine Ränder oder Rahmen haben sollten. Ein Beispiel für eine Datei schreiben:
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
margin: 0; padding: 0; border: 0;
}
File „component.css“ wurde für die Bestimmung des Behälters Header („large-header“) erstellt.
/* Header */
.large-header {
position: relative;
width: 100%;
overflow: hidden; /*Blendet den Inhalt des Behälters, wenn er größer als das Browserfenster ist*/
background-size: cover; background-position: center center; /*Zeigen Sie den Hintergrund, ohne Wiederholungen und passt seine Mittelteil*/
z-index: 1;/*Index, um die Sichtbarkeit der Elemente in einem Container wird verwalten*/
}
.large-header {
background-image: url('../img/XYZ.jpg');
}
Die letzte Datei ist „demo.js.“ Es ist die Funktion reguliert die Größe des Behälters Header genannt („large-header“).
(function() {
var width, height, largeHeader, target;
//Es ist notwendig, Funktion aufzurufen
assignHeader();
//Definition der Funktionen
function assignHeader() {
height = window.innerHeight;
largeHeader = document.getElementById('large-header');
largeHeader.style.height = height+'px';
}
})();
Die ersten Geschäfte in der variablen Höhe des Fensters, da die Breite der Partie durch einen Eintrag in der CSS („width: 100%;“). Zu diesem Zweck ist der „innerheight „, die die Breite des Fensters, ohne die verschiedenen Typen von Schiebern und anderen Merkmale aufweist – inneres Fenster selbst. Im vorliegenden Fall ist dies von entscheidender Bedeutung, weil das Feld „Höhe“ – über die gesamte Breite des Fensters gibt es bei einigen Geräten überprüfen würde.
Dann wird die Variable „largeHeader“ durch seine ID mit dem Behälter zugeordnet und mit den Eigenschaften zugeordnet wird, bevor die Fensterbreite erhalten.
