Maison >interface Web >tutoriel CSS >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
@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é :
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!