How to create a responsive card layout page using HTML and CSS-HTML Tutorial-php.cn

How to create a responsive card layout page using HTML and CSS

PHPz

Release： 2023-10-18 09:16:48

Original

1429 people have browsed it

How to create a responsive card layout page using HTML and CSS

How to use HTML and CSS to create a responsive card layout page

In today's era of widespread mobile devices, responsive design has become one of the important means of web design . Card layout is a very common design method that can present content in the form of cards, which is intuitive and clear. This article will introduce how to use HTML and CSS to create a responsive card layout page, and give specific code examples.

First, we need a basic HTML structure, you can use the following code:

<!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>

Copy after login

In this HTML structure, we use a container (class="container") to contain the card ( class="card"). Each card contains an image, a title and a content.

Next, we need to add CSS styles to implement card layout and responsive design. You can use the following code:

.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;
    }
}

Copy after login

In this CSS code, we first set the container to use flexible layout (display: flex), and allow its internal elements to wrap (flex-wrap: wrap), using the centering method Justify content (justify-content: center).

The card style includes fixed width and margins (width: 300px; margin: 20px), as well as padding and background color (padding: 20px; background-color: #f1f1f1). We also added a shadow effect (box-shadow).

To achieve responsive design, we use media queries (@media screen and (max-width: 768px)). When the device width is less than or equal to 768px, the width of the card will become 80% and displayed in the center (margin: 10px auto).

Finally, save the above HTML code as an index.html file, save the CSS code as a style.css file, and ensure that the image files (image1.jpg, image2.jpg, image3.jpg) are in the same file as the HTML file Under contents.

Open the index.html file through the browser, and you will see a responsive card layout page.

Through the above code examples, we can clearly understand how to use HTML and CSS to create a simple responsive card layout page. Of course, this is just a basic example, you can expand and modify it according to your needs to create a more unique card layout effect.

I hope this article can help you, and I wish you create a beautiful and practical responsive card layout page!

The above is the detailed content of How to create a responsive card layout page using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!