interface Web
tutoriel HTML
Comment créer une mise en page d'affichage de produit réactive à l'aide de HTML et CSS
Comment créer une mise en page d'affichage de produit réactive à l'aide de HTML et CSS
Comment créer une présentation d'affichage de produit réactive en utilisant HTML et CSS
Aperçu :
Dans la société moderne, de plus en plus de personnes achètent via Internet. Afin d’attirer davantage de consommateurs, les développeurs de sites Web doivent créer des pages d’affichage de produits belles et réactives. Cet article vous expliquera comment utiliser HTML et CSS pour implémenter une présentation d'affichage de produit simple et efficace.
Étape 1 : Définir la structure HTML
Tout d'abord, nous devons configurer une structure HTML de base. Dans cette structure, nous utiliserons un élément div pour créer un conteneur pour le produit et y insérer l'image, le titre et le prix du produit. Voici un exemple de structure HTML de base :
<!DOCTYPE html>
<html>
<head>
<title>商品展示</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="product">
<img src="/static/imghw/default1.png" data-src="product1.jpg" class="lazy" alt="Comment créer une mise en page d'affichage de produit réactive à l'aide de HTML et CSS" >
<h3 id="商品标题">商品标题</h3>
<p>商品价格</p>
</div>
<div class="product">
<img src="/static/imghw/default1.png" data-src="product2.jpg" class="lazy" alt="Comment créer une mise en page d'affichage de produit réactive à l'aide de HTML et CSS" >
<h3 id="商品标题">商品标题</h3>
<p>商品价格</p>
</div>
<!-- 添加更多的商品 -->
</div>
</body>
</html>Dans l'exemple ci-dessus, nous avons mis en place un conteneur div qui contiendra tous les produits. Chaque produit est défini comme un div avec le nom de classe « produit ». L'image du produit, le titre et le prix sont insérés respectivement dans le div du produit.
Étape 2 : Définir le style CSS
Ensuite, nous devons utiliser CSS pour styliser la disposition d'affichage du produit. Nous utiliserons des requêtes multimédias CSS pour implémenter une mise en page réactive. Voici un exemple de définition de styles CSS :
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product {
width: 300px;
margin: 20px;
padding: 10px;
text-align: center;
background-color: lightgray;
}
.product img {
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.product {
width: 400px;
}
}
@media (max-width: 480px) {
.container {
flex-direction: column;
}
.product {
width: 100%;
}
}Dans l'exemple ci-dessus, nous définissons d'abord le conteneur sur une disposition flexible et utilisons la propriété flex-wrap pour que les éléments s'enroulent lorsque le conteneur dépasse la largeur. Nous avons ensuite défini la largeur, les marges et le remplissage du produit, et avons aligné le texte au centre. Enfin, nous définissons la couleur d'arrière-plan du conteneur de produit.
Dans @media query, nous avons différents styles pour différentes tailles d'écran. Lorsque la largeur maximale est de 768 px, nous définissons la largeur du produit à 400 px. Lorsque la largeur maximale est de 480 px, nous utilisons l'attribut flex-direction pour disposer les produits verticalement et définir la largeur des produits à 100 %.
Étape 3 : Ajouter plus de produits
Si vous souhaitez afficher plus de produits, ajoutez simplement plus de produits div en HTML. Vous pouvez copier les div de produits existants pour créer rapidement de nouveaux produits. L'image, le titre et le prix du produit peuvent être personnalisés selon les besoins.
Résumé :
Il n'est pas difficile de créer une mise en page d'affichage de produit réactive en utilisant HTML et CSS. En définissant la structure HTML et les styles CSS, nous pouvons facilement implémenter une belle page d'affichage du produit. N'oubliez pas d'utiliser les requêtes multimédias pour vous adapter aux différentes tailles d'écran afin de garantir que vos produits s'affichent au mieux sur une variété d'appareils. J'espère que cet article vous a aidé à créer une présentation d'affichage de produit réactive impressionnante.
Annexe : Exemple de fichier
style.css:
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.product {
width: 300px;
margin: 20px;
padding: 10px;
text-align: center;
background-color: lightgray;
}
.product img {
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.product {
width: 400px;
}
}
@media (max-width: 480px) {
.container {
flex-direction: column;
}
.product {
width: 100%;
}
}index.html:
<!DOCTYPE html>
<html>
<head>
<title>商品展示</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="product">
<img src="/static/imghw/default1.png" data-src="product1.jpg" class="lazy" alt="Comment créer une mise en page d'affichage de produit réactive à l'aide de HTML et CSS" >
<h3 id="商品标题">商品标题</h3>
<p>商品价格</p>
</div>
<div class="product">
<img src="/static/imghw/default1.png" data-src="product2.jpg" class="lazy" alt="Comment créer une mise en page d'affichage de produit réactive à l'aide de HTML et CSS" >
<h3 id="商品标题">商品标题</h3>
<p>商品价格</p>
</div>
<!-- 添加更多的商品 -->
</div>
</body>
</html>L'exemple de fichier ci-dessus utilise deux images schématiques de produits, vous pouvez les remplacer par vos propres images de produits. N'oubliez pas de remplacer le nom et le chemin du fichier par ceux correspondants dans index.html.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1359
52
Comment faire PS Gradient Color Picker
Apr 06, 2025 pm 10:09 PM
Les cueilleurs de couleurs de gradient offrent aux concepteurs la flexibilité d'extraire et de création de gradients à partir d'images. Il simplifie la création de gradient, garantit que la précision, inspire, améliore l'efficacité et fournit un support multiplateforme et couvre un large éventail d'applications, notamment des sites Web, une conception graphique, une conception d'interface utilisateur / UX et de l'art numérique.
Comment supprimer le style par défaut dans la liste Bootstrap?
Apr 07, 2025 am 10:18 AM
Le style par défaut de la liste bootstrap peut être supprimé avec CSS Override. Utilisez des règles et sélecteurs CSS plus spécifiques, suivez le «principe de proximité» et le «principe de poids», en remplacement du style par défaut de bootstrap. Pour éviter les conflits de style, des sélecteurs plus ciblés peuvent être utilisés. Si le remplacement est infructueux, ajustez le poids du CSS personnalisé. Dans le même temps, faites attention à l'optimisation des performances, évitez la surutilisation de! Importante et écrivez le code CSS concis et efficace.
Comment construire un framework bootstrap
Apr 07, 2025 pm 12:57 PM
Pour créer un framework bootstrap, suivez ces étapes: Installez Bootstrap via CDN ou installez une copie locale. Créez un document HTML et liez Bootstrap CSS à & lt; head & gt; section. Ajoutez un fichier JavaScript bootstrap au & lt; body & gt; section. Utilisez le composant bootstrap et personnalisez la feuille de style en fonction de vos besoins.
Le centrage d'image prend-il en charge le zoom d'image?
Apr 07, 2025 am 07:42 AM
Comment réaliser le centrage d'images et l'échelle dans Bootstrap: Utilisez D-Flex Justify-Content-Center pour centrer les images horizontalement. Utilisez Align-Items-Center et Fixed Parent Element Height Centrez verticalement l'image. Utilisez les attributs de largeur et de hauteur pour contrôler la taille de l'image, ou utilisez la largeur maximale et la hauteur maximale pour limiter la taille maximale. Utilisez la classe IMG-FLUID ou le mécanisme de conception réactif, tel que les requêtes multimédias, pour atteindre une mise à l'échelle réactive. Optimiser la taille de l'image, la mise à l'échelle de contrôle à l'aide de l'attribut d'objet-ajustement et suivre les meilleures pratiques pour assurer les performances et la maintenabilité.
Comment afficher le système de grille de bootstrap
Apr 07, 2025 am 09:48 AM
Le système de maillage de Bootstrap est une règle pour construire rapidement des dispositions réactives, composées de trois classes principales: conteneur (conteneur), ligne (ligne) et col (colonne). Par défaut, des grilles à 12 colonnes sont fournies et la largeur de chaque colonne peut être ajustée via des classes auxiliaires telles que Col-MD-, réalisant ainsi l'optimisation de mise en page pour différentes tailles d'écran. En utilisant des classes de décalage et des mailles imbriquées, la flexibilité de mise en page peut être étendue. Lorsque vous utilisez un système de grille, assurez-vous que chaque élément a la bonne structure de nidification et envisagez une optimisation des performances pour améliorer la vitesse de chargement des pages. Ce n'est que par une compréhension et une pratique approfondies que nous pouvons maîtriser avec compétence le système de grille bootstrap.
Comment régler la barre de navigation bootstrap
Apr 07, 2025 pm 01:51 PM
Bootstrap fournit un guide simple pour configurer les barres de navigation: l'introduction de la bibliothèque bootstrap pour créer des conteneurs de barre de navigation Ajouter l'identité de marque Créer des liens de navigation Ajouter d'autres éléments (facultatif) Styles d'ajustement (facultatif)
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment utiliser GitHub pour HTML?
Apr 07, 2025 am 12:13 AM
La raison de l'utilisation de GitHub pour gérer les projets HTML est qu'il fournit une plate-forme pour le contrôle des versions, le développement collaboratif et la présentation des œuvres. Les étapes spécifiques incluent: 1. Créer et initialiser le référentiel GIT, 2. Ajouter et soumettre des fichiers HTML, 3. Push to github, 4. Utilisez GitHubPages pour déployer des pages Web, 5. Utilisez des githubactions pour automatiser la construction et le déploiement. En outre, GitHub prend également en charge les fonctionnalités de révision, d'émission et de traction de code pour aider à optimiser et à collaborer sur les projets HTML.
