Création d'une Fiche Produit avec CSS

Une fiche produit (exercice) : mise en forme CSS
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre XHTML & CSS
Revoir le teaser Je m'abonne
3,0
Transcription

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
3,0
59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de comprendre la mise en page en CSS, d'apprendre à utiliser le positionnement flottant, et de maîtriser le positionnement absolu pour un design précis.

Découvrez comment structurer et styliser une fiche produit en utilisant des techniques de CSS pour la mise en page et le positionnement.

Dans cette leçon, nous allons voir comment mettre en page une fiche produit à l'aide de CSS. Nous allons commencer par le conteneur principal, en définissant sa largeur, sa couleur de fond, et son retrait intérieur (padding). Ensuite, nous allons styliser le titre en jouant avec la couleur de fond et la taille du texte. Nous passerons ensuite à la disposition des colonnes flottantes pour les informations, les argumentaires, et les commandes. Nous verrons également comment utiliser le positionnement absolu pour placer nos éléments de manière précise. Enfin, nous expliquerons l'utilisation des sélecteurs précis afin d'éviter les conflits de styles dans une page HTML plus large.

Voir plus
Questions réponses
Pourquoi utilise-t-on le padding dans le conteneur principal ?
Le padding est utilisé pour créer un espace intérieur entre le contenu et les bordures du conteneur, améliorant ainsi la lisibilité et l'esthétique.
Qu'est-ce que le positionnement flottant en CSS ?
Le positionnement flottant permet de faire flotter des éléments à gauche ou à droite, afin de structurer la disposition du contenu dans une page.
Comment éviter les conflits de styles dans une page HTML ?
Pour éviter les conflits de styles, on utilise des sélecteurs précis en CSS, tels que les sélecteurs de descendants, afin de cibler uniquement les éléments souhaités.

Programme détaillé

1 commentaire
3,0
1 vote
5
4
3
2
1
wfischli
Il y a 2 years
Commentaire
Dans l'ensemble bon cours, toutefois pas adapté au débutant car très touffu.
Je me perds toujours dans les marges, les paddings et les positionnements!
Beaucoup de petites astuces, bienvenues.
Gros défaut: tous les écrans sont flous, et le son est exécrable.