Conception de cartes réactives CSS : créez des styles de cartes qui s'adaptent à différents appareils

Conception de cartes réactives CSS : Pour créer des styles de cartes qui s'adaptent à différents appareils, des exemples de code spécifiques sont nécessaires

Dans la conception Web moderne, la conception réactive est devenue un point technique nécessaire. Étant donné que les tailles d'écran et les résolutions des différents appareils sont différentes, afin de bien s'afficher sur tous les appareils, nous devons adapter la page Web.

La mise en page des cartes est une méthode courante de mise en page de pages Web. Elle peut fournir une impression claire de blocage lors de l'affichage d'informations et est très adaptée à l'affichage d'images et de contenu textuel. Dans cet article, nous partagerons une méthode de conception de cartes réactives CSS simple et élégante et fournirons des exemples de code correspondants.

Tout d'abord, nous avons besoin d'une structure HTML de base pour afficher le contenu de la carte. Le code est le suivant :

<div class="card">
  <img src="image.jpg" alt="Card Image">
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p class="card-text">Card description goes here.</p>
    <a href="#" class="btn">Read More</a>
  </div>
</div>

Ensuite, nous devons écrire des styles CSS pour faire l'apparence de la carte. Le code est le suivant :

.card {
  width: 300px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 10px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.card img {
  width: 100%;
  height: auto;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.card .card-body {
  padding: 20px;
}

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

.card .card-text {
  font-size: 14px;
  color: #777;
}

.card .btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .card {
    width: 100%;
    margin: 10px 0;
  }
}

La classe .card dans le code ci-dessus définit le style de base de la carte, y compris la couleur d'arrière-plan, les coins arrondis des bordures, les effets d'ombre, etc. La classe .card img définit le style de l'image dans la carte afin qu'elle puisse s'adapter à la largeur de la carte. La classe .card .card-body définit le style de la zone de contenu de la carte, y compris les styles de remplissage, de titre et de description, etc. La classe .card .btn définit le style du bouton dans la carte. .card类定义了卡片的基本样式，包括背景色、边框圆角、阴影效果等。.card img类定义了卡片中的图片样式，使其能够自适应卡片的宽度。.card .card-body类定义了卡片中内容区域的样式，包括内边距、标题和描述文本的样式等。.card .btn类定义了卡片中的按钮样式。

接下来，在@media

Ensuite, dans la requête @media, nous avons ajusté le style pour les appareils d'une largeur inférieure à 768 pixels, afin que la largeur de la carte devienne 100 %, en s'adaptant aux appareils à petit écran tels que les téléphones mobiles et comprimés.

Avec le code ci-dessus, nous pouvons facilement créer un style de carte réactif simple. Vous pouvez ajuster le style et ajouter plus de contenu et d'effets en fonction des besoins réels.

Résumé :

La conception de cartes réactives CSS est un moyen efficace d'adapter la mise en page des pages Web à différents appareils. En utilisant CSS et les requêtes multimédias, nous pouvons facilement ajuster la mise en page et le style d'une page Web afin qu'elle s'affiche correctement sur une variété d'appareils. J'espère que le contenu ci-dessus vous a aidé à comprendre et à appliquer la conception de cartes réactives. 🎜

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!