Cara membuat halaman susun atur kad responsif menggunakan HTML dan CSS-html tutorial-php.cn

Cara membuat halaman susun atur kad responsif menggunakan HTML dan CSS

PHPz

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

asal

1410 orang telah melayarinya

Cara membuat halaman susun atur kad responsif menggunakan HTML dan CSS

Cara menggunakan HTML dan CSS untuk mencipta halaman susun atur kad responsif

Dalam era peranti mudah alih popular hari ini, reka bentuk responsif telah menjadi salah satu cara penting dalam reka bentuk web. Susun atur kad ialah kaedah reka bentuk yang sangat biasa yang boleh membentangkan kandungan dalam bentuk kad, yang intuitif dan jelas. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk mencipta halaman reka letak kad responsif dan memberikan contoh kod khusus.

Pertama, kami memerlukan struktur HTML asas, anda boleh menggunakan kod berikut:

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

Salin selepas log masuk

Dalam struktur HTML ini, kami menggunakan bekas (class="container") untuk mengandungi kad (class="card"). Setiap kad mengandungi imej, tajuk dan kandungan.

Seterusnya, kita perlu menambah gaya CSS untuk melaksanakan reka letak kad dan reka bentuk responsif. Anda boleh menggunakan kod berikut:

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

Salin selepas log masuk

Dalam kod CSS ini, kami mula-mula menetapkan bekas untuk menggunakan reka letak fleksibel (paparan: flex), dan membenarkan elemen dalamannya untuk membalut (flex-wrap: wrap), dan menggunakan pemusatan untuk menjajarkan kandungan (justify -content: center).

Gaya kad termasuk lebar dan jidar tetap (lebar: 300px; jidar: 20px), serta padding dan warna latar belakang (padding: 20px; background-color: #f1f1f1). Kami juga menambah kesan bayang (box-shadow).

Untuk mencapai reka bentuk responsif, kami menggunakan pertanyaan media (@skrin media dan (lebar maksimum: 768px)). Apabila lebar peranti kurang daripada atau sama dengan 768px, lebar kad akan menjadi 80% dan dipaparkan di tengah (margin: 10px auto).

Akhir sekali, simpan kod HTML di atas sebagai fail index.html dan kod CSS sebagai fail style.css, dan pastikan fail imej (image1.jpg, image2.jpg, image3.jpg) berada dalam keadaan yang sama direktori sebagai fail HTML.

Buka fail index.html melalui penyemak imbas, dan anda akan melihat halaman susun atur kad responsif.

Melalui contoh kod di atas, kami dapat memahami dengan jelas cara menggunakan HTML dan CSS untuk mencipta halaman susun atur kad responsif yang mudah. Sudah tentu, ini hanyalah contoh asas, anda boleh mengembangkan dan mengubah suainya mengikut keperluan anda untuk mencipta kesan susun atur kad yang lebih unik.

Saya harap artikel ini dapat membantu anda, dan saya berharap anda mencipta halaman susun atur kad responsif yang cantik dan praktikal!

Atas ialah kandungan terperinci Cara membuat halaman susun atur kad responsif menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!