Maison > Article > interface Web > Comment créer une page de mise en page de carte en utilisant HTML et CSS

Comment créer une page de mise en page de carte en utilisant HTML et CSS

WBOYoriginal: 2023-10-27 12:30:11936parcourir

Dans la conception Web, la mise en page de carte est devenue une tendance de conception très populaire. Il affiche les informations sous forme de cartes, ce qui rend la page claire, intuitive et facile à naviguer. Dans cet article, je vais vous présenter comment utiliser HTML et CSS pour créer une page de mise en page de carte simple et fournir des exemples de code spécifiques.

Étape 1 : Créer une structure HTML
Tout d'abord, nous devons créer la structure de base du HTML. Voici un exemple de code simple :

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片式布局页面</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="card">
      <img src="image1.jpg" alt="图片1">
      <h2>卡片标题1</h2>
      <p>卡片正文内容1</p>
    </div>
    <div class="card">
      <img src="image2.jpg" alt="图片2">
      <h2>卡片标题2</h2>
      <p>卡片正文内容2</p>
    </div>
    <div class="card">
      <img src="image3.jpg" alt="图片3">
      <h2>卡片标题3</h2>
      <p>卡片正文内容3</p>
    </div>
  </div>
</body>
</html>

Dans le code ci-dessus, nous créons un conteneur div nommé "conteneur" pour envelopper la carte. Chaque carte est constituée d'un élément div de classe "card", qui contient une image, un titre et un texte.

Étape 2 : Écrire les styles CSS
Ensuite, nous devons ajouter des styles à la carte. Voici un exemple de code CSS simple :

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 300px;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 10px;
}

.card h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.card p {
  font-size: 16px;
}

Dans le code ci-dessus, nous utilisons la disposition flexible pour que la carte s'enroule automatiquement dans le sens horizontal. Chaque carte a une largeur de 300 px, une marge et un remplissage de 20 px, une bordure solide de 1 px avec des coins arrondis, un texte centré et un effet d'ombre.

L'image utilise une largeur de 100 % et définit une hauteur adaptative. Les tailles de police pour le titre et le corps du texte sont respectivement de 24 px et 16 px.

Étape 3 : Enregistrer le fichier et prévisualiser
Enregistrez le code HTML ci-dessus sous un fichier nommé "index.html" et le code CSS sous un fichier nommé "style.css". Assurez-vous que les fichiers HTML et CSS se trouvent dans le même dossier et placez également les fichiers image (image1.jpg, image2.jpg et image3.jpg) dans ce dossier.

Ensuite, ouvrez le fichier "index.html" dans le navigateur pour prévisualiser la page de mise en page de la carte.

Résumé
Grâce aux étapes ci-dessus, nous avons réussi à créer une page de mise en page de carte simple en utilisant HTML et CSS. En utilisant de manière flexible les styles CSS, nous pouvons ajuster la mise en page et l'apparence de la carte selon nos besoins.

Bien sûr, l'exemple ci-dessus n'est qu'un exemple simple, vous pouvez le modifier et l'étendre en fonction de vos besoins réels. J'espère que cet article pourra vous être utile, et je vous souhaite de meilleurs résultats en matière de mise en page de cartes !

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!

css html class margin padding flex

Déclaration：

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

Article précédent：Tutoriel HTML : Comment utiliser la disposition en grille pour la disposition auto-adaptative de la grilleArticle suivant：Tutoriel HTML : Comment utiliser la disposition en grille pour la disposition auto-adaptative de la grille

Articles Liés

Voir plus