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 (template 01) Trois colonnes de pourcentages (template 02) Trois colonnes de pourcentages (template 03) Trois colonnes de pourcentages (template 04) Trois colonnes de pourcentages (template 05) Trois colonnes de pourcentages (template 06) Trois colonnes fixées (template 07) Trois colonnes fixées (template 08) Trois colonnes fixées (template 09) Trois colonnes fixées (template 10) Trois colonnes fixées (template 11) Trois colonnes fixées (template 12) Colonnes de liquide, secondaires à largeur fixée (template 13) Colonnes de liquide, secondaires à largeur fixée (template 14) Colonnes de liquide, secondaires à largeur fixée (template 15) Colonnes de liquide, secondaires à largeur fixée (template 16) Colonnes de liquide, secondaires à largeur fixée (template 17) Colonnes de liquide, secondaires à largeur fixée (template 18) Trois colonnes de liquide, largeures hybrides (template 19) Trois colonnes de liquide, largeurs hybrides (template 20) Trois colonnes de liquide, largeures hybrides (template 21) Trois colonnes de liquide, largeures hybrides (template 22) Deux colonnes de liquide, côté fixe (template 23) Deux colonnes de liquide, côté fixe (template 24) Deux colonnes de pourcentage (template 25) Deux colonnes de pourcentage (template 26) Une colonne de liquide et deux moitiés (template 27) Une colonne de liquide et deux moitiés (template 28) Deux colonnes de pourcentages et un plus grand (template 29) Deux colonnes de pourcentages et un plus grand (template 30) 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 (template 32) Deux colonnes fixe (template 33) Deux colonnes fixe (template 34) Deux colonnes fixe (template 35) Deux colonnes fixe (template 36) Deux colonnes fixe (template 37) Deux colonnes fixe (template 38) Une colonne fixe et deux moitiés (template 39) Une colonne fixe et deux moitiés (template 40)