L’en-t?te adaptée au plein écran

Posted on by DamianLeave a comment

L’en-t?te adaptée au plein écran

Comment préparer un L’en-t?te adaptée au plein écran? Il existe de nombreuses solutions pour cette tâche et beaucoup mieux ou pire effets finaux. Chaque qui satisfait les hypoth?ses de l’auteur, il peut ?tre suffisant. L’entrée suivante montre comment créer un conteneur <div>, la taille d’une fen?tre de navigateur sur votre ordinateur, tablette ou smartphone. En plaçant un tel récipient comme le premier sous la balise <body> a pour effet d’une fen?tre compl?te apr?s la page est ouverte. En arri?re-plan, vous pouvez utiliser une image, une vidéo ou gif, et dans le menu de vente de premier plan. Un élément important de cette solution est que l’arri?re-plan sera adapté ? la fen?tre, coupant ses parties extr?mes, et le conteneur <div> se déplace dans son intégralité. Un exemple d’une telle solution est une page PerfectSoft ou relaksowanie.pl.

éléments nécessaires de code

L’ensemble se compose de petits blocs de code, qui pour plus de clarté seront fournis dans des fichiers séparés. Le premier sera présenté code html qui attache les fichiers css et javascript, et dans la section du corps montre l’en-t?te de conteneur (« grand-t?te ») et le texte de conteneurs dans le reste de la page (« outside_header »). fichier de démarrage « demo.js » doit ?tre trouvé pour conteneur « grand-t?te » parce qu’il était l? fonction définie et son appel. Cela vous permet d’exécuter le plus rapidement apr?s la formation du récipient, mais il peut ?tre changé librement, sans compromettre la fonctionnalité du 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">
		<!--  Le contenu d'en-t?te assorti-->  
	</div>
	<script src="js/demo.js"></script>


	<div id="outside_header">

		<br><br>
		"PerfectSoft"
		<br><br>
		La solution idéale pour les entreprises
		<br><br>

	</div>

</body>
</html>

 

Dans le fichier « style.css », le plus important est de mettre le dossier « margin: 0; » pour la balise body. En dehors de cette entrée ne sera pas possible d’atteindre en plein écran, comme cela sera inclus par les marges par défaut. Il convient également d’étendre cette fiche d’autres balises qui ne devraient pas avoir des marges ou des cadres. Un exemple de fichier d’écriture:

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;
}

 

Fichier « component.css » a été préparée pour la détermination de l’en-t?te de conteneur (« grand-t?te »).

/* Header */
.large-header {
	position: relative;
	width: 100%;
	overflow: hidden; /*Masque le contenu du récipient si elle est plus grande que la fen?tre du navigateur */
	background-size: cover;	background-position: center center; /*Afficher l'arri?re-plan sans répétitions et ajuste sa partie centrale */
	z-index: 1;/*Index va gérer la visibilité des éléments dans un conteneur */
}

.large-header {
background-image: url('../img/XYZ.jpg');
}

 

Le dernier fichier est « demo.js. » Il est la fonction est appelée régulation de la taille de l’en-t?te de conteneur (« grand-t?te »).

(function() {
    var width, height, largeHeader, target;

//Il est nécessaire d'appeler la fonction
    assignHeader();

//Définition des fonctions
    function assignHeader() {
        height = window.innerHeight;

        largeHeader = document.getElementById('large-header');
        largeHeader.style.height = height+'px';
    }
})();

Les premiers magasins ? la hauteur variable de la fen?tre, car la largeur du match grâce ? une entrée dans le css (« width: 100%; »). A cet effet, est le « innerHeight » qui a la largeur de la fen?tre sans que les divers types de curseurs, et d’autres caractéristiques – fen?tre intérieure elle-m?me. Dans le cas présent, ce qui est crucial, car le champ « Hauteur » – donnant la pleine largeur de la fen?tre, il y aurait de vérifier sur certains appareils.
Ensuite, la « largeHeader » variable est affectée au récipient par son identifiant et en utilisant les propriétés attribuées est obtenue avant que la largeur de la fen?tre.

Loading Facebook Comments ...

Laisser un commentaire

Or