Cette série de didacticiels est un didacticiel d'entrée de gamme, adapté aux débutants pour apprendre et progresser petit à petit à partir des connaissances les plus simples. Il se concentre principalement sur des exemples et très peu de théorie, ce qui convient mieux aux débutants pour une maîtrise rapide. Comme j'apprends encore, il est inévitable qu'il y ait des erreurs ou des omissions, et j'espère que vous me corrigerez. Ce tutoriel fait référence au livre "CSS Website Layout Record", et je tiens à exprimer ma gratitude à l'auteur.
Pour bien apprendre le DIV+CSS, vous devez d'abord avoir une certaine connaissance du HTML et du CSS. Si vous ne les comprenez pas encore, je vous suggère de suivre d'abord cette leçon puis d'étudier ce tutoriel. De plus, nous devons abandonner le mode de réflexion traditionnel sur la disposition des tableaux. Quant à la raison, vous vous en rendrez compte lentement en étudiant ce didacticiel. Si vous êtes prêt, commençons !
Une colonne à largeur fixe
Une colonne à largeur fixe est la base des bases, cette section est donc la première section pour commencer.
Nous avons utilisé layout comme nom d'identification pour le div. Afin de faciliter la visualisation, nous avons utilisé background-color: #E8F5FE; pour définir la couleur d'arrière-plan du div sur bleu clair et utiliser border: 2px solid #A9C9E2; pour définir la bordure sur la couleur bleu ciel. Les propriétés de la couleur d'arrière-plan et de la bordure seront expliquées dans les prochains tutoriels.
Comme il s'agit d'une mise en page à largeur fixe, nous définissons directement la largeur de l'attribut width : 300px ; et la hauteur de l'attribut height : 200px ;