Gabarits des mises en page HTML

Voici une collection des gabarits HTML qui fournit des mises en page de base de sites Web. Chaque mise en page comprend cinq sections principales utilisées dans n'importe quel site Web : en-tête, pied de page, menu de navigation, zone de contenu principale et autres éléments.

Presque toutes les mises en page sont créées à l'aide de la propriété float et des marges négatives CSS. Il y a deux choses que vous devez savoir sur les marges négatives : si nous appliquons une marge négative du côté du float, cela aura pour effet de décaler encore plus les éléments flottants vers le côté du flotteur; si nous appliquons une marge négative en regard d'un float, cela crée un vide, ce qui conduit à un chevauchement du contenu, ce qui est très utile pour créer des présentations liquides.

Sur les sites Web modernes, les mises en page flottantes sont remplacées par des mises en page flexibles créées à l'aide du CSS Flexible Box Layout Module.

Deux colonnes, menu de gauche html-layout-template Deux colonnes, menu de gauche (template 01) Trois colonnes de pourcentages html-layout-template1 Trois colonnes de pourcentages (template 02) Trois colonnes de pourcentages html-layout-template2 Trois colonnes de pourcentages (template 03) Trois colonnes de pourcentages html-layout-template3 Trois colonnes de pourcentages (template 04) Trois colonnes de pourcentages html-layout-template4 Trois colonnes de pourcentages (template 05) Trois colonnes de pourcentages html-layout-template5 Trois colonnes de pourcentages (template 06) Trois colonnes fixées html-layout-template6 Trois colonnes fixées (template 07) Trois colonnes fixées html-layout-template7 Trois colonnes fixées (template 08) Trois colonnes fixées html-layout-template8 Trois colonnes fixées (template 09) Trois colonnes fixées html-layout-template9 Trois colonnes fixées (template 10) Trois colonnes fixées html-layout-template10 Trois colonnes fixées (template 11) Trois colonnes fixées html-layout-template11 Trois colonnes fixées (template 12) Colonnes de liquide, secondaires à largeur fixée html-layout-template12 Colonnes de liquide, secondaires à largeur fixée (template 13) Colonnes de liquide, secondaires à largeur fixée html-layout-template13 Colonnes de liquide, secondaires à largeur fixée (template 14) Colonnes de liquide, secondaires à largeur fixée html-layout-template14 Colonnes de liquide, secondaires à largeur fixée (template 15) Colonnes de liquide, secondaires à largeur fixée html-layout-template15 Colonnes de liquide, secondaires à largeur fixée (template 16) Colonnes de liquide, secondaires à largeur fixée html-layout-template16 Colonnes de liquide, secondaires à largeur fixée (template 17) Colonnes de liquide, secondaires à largeur fixée html-layout-template17 Colonnes de liquide, secondaires à largeur fixée (template 18) Trois colonnes de liquide, largeures hybrides html-layout-template18 Trois colonnes de liquide, largeures hybrides (template 19) Trois colonnes de liquide, largeurs hybrides html-layout-template19 Trois colonnes de liquide, largeurs hybrides (template 20) Trois colonnes de liquide, largeures hybrides html-layout-template20 Trois colonnes de liquide, largeures hybrides (template 21) Trois colonnes de liquide, largeures hybrides html-layout-template21 Trois colonnes de liquide, largeures hybrides (template 22) Deux colonnes de liquide, côté fixe html-layout-template22 Deux colonnes de liquide, côté fixe (template 23) Deux colonnes de liquide, côté fixe html-layout-template23 Deux colonnes de liquide, côté fixe (template 24) Deux colonnes de pourcentage html-layout-template24 Deux colonnes de pourcentage (template 25) Deux colonnes de pourcentage html-layout-template25 Deux colonnes de pourcentage (template 26) Une colonne de liquide et deux moitiés html-layout-template26 Une colonne de liquide et deux moitiés (template 27) Une colonne de liquide et deux moitiés html-layout-template27 Une colonne de liquide et deux moitiés (template 28) Deux colonnes de pourcentages et un plus grand html-layout-template28 Deux colonnes de pourcentages et un plus grand (template 29) Deux colonnes de pourcentages et un plus grand html-layout-template29 Deux colonnes de pourcentages et un plus grand (template 30) Deux colonnes de liquide, un côté fixe et un plus grand html-layout-template30 Deux colonnes de liquide, un côté fixe et un plus grand (template 31) Deux colonnes de liquide, un côté fixe et un plus grand html-layout-template Deux colonnes de liquide, un côté fixe et un plus grand (template 32) Deux colonnes fixe html-layout-template31 Deux colonnes fixe (template 33) Deux colonnes fixe html-layout-template32 Deux colonnes fixe (template 34) Deux colonnes fixe html-layout-template33 Deux colonnes fixe (template 35) Deux colonnes fixe html-layout-template34 Deux colonnes fixe (template 36) Deux colonnes fixe html-layout-template35 Deux colonnes fixe (template 37) Deux colonnes fixe html-layout-template36 Deux colonnes fixe (template 38) Une colonne fixe et deux moitiés html-layout-template37 Une colonne fixe et deux moitiés (template 39) Une colonne fixe et deux moitiés html-layout-template38 Une colonne fixe et deux moitiés (template 40)

Trouvez-vous cela utile?