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

Résumé :

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!