Vous avez utilisé pour générer la mise en page en utilisant le code suivant:.
Si vous voulez changer quelque chose dans votre mise en page, disent que le changement de la navigation verticale sur le côté de la page pour barre de navigation horizontale sous l'en-tête, vous avez dû changer chaque page de votre site.
Comment pouvons-nous concevoir la même disposition en utilisant le CSS? En utilisant l'attribut de flotteur. L'utilisation de CSS vous divisez essentiellement le contenu de votre page dans les blocs, délimité par les /... /tags. L'attribut flottant vous permet de placer (float) une partie de votre contenu le long de la marge droite ou gauche de votre bloc. Le reste du contenu de ce bloc va couler autour de votre partie flottante. Faisons le. Nous aurons besoin d'une page HTML et une feuille de style CSS. Regardons le code HTML en premier.
Comme vous pouvez le voir, nous avons divisé chaque partie logique de notre page en blocs. Comme vous pouvez le voir, tous les éléments de notre page (en-tête, pied de page, la navigation et le contenu) sont contenues dans un bloc appelé conteneur, qui est fondamentalement la page entière. Nous plaçons nos éléments à l'intérieur de l'espace "conteneur". Comme vous pouvez l'imaginer, nous allons faire flotter le bloc de navigation à gauche de notre bloc "conteneur".
Voici le code à travailler la magie.
Comme je l'ai dit, je ne vais pas entrer dans les détails ici, en expliquant ce que tous les moyens de commande. Mais passons en revue rapidement, en soulignant ce qui nous intéresse. Tout d'abord nous avons attribué la police pour les pages, en précisant son attribut. Nous avons également donné une mise en forme au balises H1 et H2.
Les appels "div # quelque chose" sont où nous attribuons un formatage et un comportement spécifique à chacun des blocs que nous avons définies dans notre html. S'il vous plaît noter les appels pour la navigation et le contenu.
Nous avons attribué à la navigation la propriété de «gauche», le plaçant sur le côté gauche de notre page. Ensuite, nous avons défini la largeur de colonne et la principale marge de contenu de la colonne. S'il vous plaît noter le "clear: left" Attribute nous avons attribué au pied de page. Une erreur commune est d'oub