Comment créer une page de mise en page de carte réactive en utilisant HTML et CSS-tutoriel HTML-php.cn

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

PHPz

Libérer： 2023-10-18 09:16:48

original

1444 Les gens l'ont consulté

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

Comment utiliser HTML et CSS pour créer une page de mise en page de carte réactive

À l'ère actuelle des appareils mobiles répandus, le design réactif est devenu l'un des moyens importants de conception Web. La mise en page des cartes est une méthode de conception très courante qui permet de présenter du contenu sous forme de cartes, intuitives et claires. Cet article explique comment utiliser HTML et CSS pour créer une page de mise en page de carte réactive et donne des exemples de code spécifiques.

Tout d'abord, nous avons besoin d'une structure HTML de base, vous pouvez utiliser le code suivant :

<!DOCTYPE html>
<html lang="en">

<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="Image 1">
            <h2>卡片标题 1</h2>
            <p>卡片内容 1</p>
        </div>
        <div class="card">
            <img src="image2.jpg" alt="Image 2">
            <h2>卡片标题 2</h2>
            <p>卡片内容 2</p>
        </div>
        <div class="card">
            <img src="image3.jpg" alt="Image 3">
            <h2>卡片标题 3</h2>
            <p>卡片内容 3</p>
        </div>
    </div>
</body>

</html>

Copier après la connexion

Dans cette structure HTML, nous utilisons un conteneur (class="container") pour contenir la carte (class="card"). Chaque carte contient une image, un titre et un contenu.

Ensuite, nous devons ajouter des styles CSS pour implémenter la mise en page des cartes et le design réactif. Vous pouvez utiliser le code suivant :

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card {
    width: 300px;
    margin: 20px;
    padding: 20px;
    background-color: #f1f1f1;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.card img {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .card {
        width: 80%;
        margin: 10px auto;
    }
}

Copier après la connexion

Dans ce code CSS, nous définissons d'abord le conteneur pour qu'il utilise une disposition flexible (display : flex), et permettons à ses éléments internes de s'enrouler (flex-wrap : wrap), et d'utiliser le centrage pour aligner le contenu (justifier -content: center).

Le style de la carte comprend une largeur et une marge fixes (largeur : 300 px ; marge : 20 px), ainsi qu'un remplissage et une couleur d'arrière-plan (remplissage : 20 px ; couleur d'arrière-plan : #f1f1f1). Nous avons également ajouté un effet d'ombre (box-shadow).

Pour obtenir un design réactif, nous utilisons des requêtes multimédia (@media screen et (max-width : 768px)). Lorsque la largeur de l'appareil est inférieure ou égale à 768px, la largeur de la carte deviendra 80% et affichée au centre (marge : 10px auto).

Enfin, enregistrez le code HTML ci-dessus en tant que fichier index.html et le code CSS en tant que fichier style.css, et assurez-vous que les fichiers image (image1.jpg, image2.jpg, image3.jpg) sont dans le même répertoire que les fichiers HTML.

Ouvrez le fichier index.html via le navigateur et vous verrez une page de mise en page de carte réactive.

Grâce aux exemples de code ci-dessus, nous pouvons clairement comprendre comment utiliser HTML et CSS pour créer une page de mise en page de carte simple et réactive. Bien sûr, ce n'est qu'un exemple de base, vous pouvez l'étendre et le modifier selon vos besoins pour créer un effet de disposition de carte plus unique.

J'espère que cet article pourra vous aider, et je vous souhaite de créer une page de mise en page de cartes réactive, belle et pratique !

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!