如何使用HTML和CSS创建一个响应式卡片墙布局-html教程-PHP中文网

如何使用HTML和CSS创建一个响应式卡片墙布局

WBOY

发布： 2023-10-25 10:42:11

原创

1264人浏览过

如何使用html和css创建一个响应式卡片墙布局

如何使用HTML和CSS创建一个响应式卡片墙布局

在现代网页设计中，响应式布局是一项非常重要的技术。通过使用HTML和CSS，我们可以创建一个响应式的卡片墙布局，以适应不同屏幕尺寸的设备。

下面将详细介绍如何使用HTML和CSS创建一个简单的响应式卡片墙布局。

HTML部分：

立即学习“前端免费学习笔记（深入）”；

首先，我们需要在HTML文件中设置基本结构。我们可以使用无序列表（<ul>）和列表项（<li>）来创建卡片。

<ul class="card-wall">
    <li class="card">
        <img src="image1.jpg" alt="Image 1">
        <h3>Card 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
    <li class="card">
        <img src="image2.jpg" alt="Image 2">
        <h3>Card 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
    <li class="card">
        <img src="image3.jpg" alt="Image 3">
        <h3>Card 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </li>
    ...
</ul>

登录后复制

CSS部分：

然后，我们需要为卡片和卡片墙设置样式。这里我们将使用CSS的Flexbox布局来实现响应式效果。

可图大模型

可图大模型（Kolors）是快手大模型团队自研打造的文生图AI大模型

110

查看详情

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

.card {
    width: 300px;
    margin: 10px;
    background-color: #f1f1f1;
    text-align: center;
    padding: 20px;
}

.card img {
    width: 100%;
}

@media only screen and (max-width: 768px) {
    .card {
        width: 90%;
    }
}

登录后复制

代码解释：