Maison > interface Web > tutoriel CSS > Tutoriel d'introduction à la mise en page Web CSS 1 : Largeur fixe d'une colonne_Tutoriel de base

Tutoriel d'introduction à la mise en page Web CSS 1 : Largeur fixe d'une colonne_Tutoriel de base

WBOY
Libérer: 2016-05-16 12:07:23
original
1448 Les gens l'ont consulté

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 ;

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal