Cara membuat tapak web responsif menggunakan HTML, CSS dan jQuery-tutorial js-php.cn

Cara membuat tapak web responsif menggunakan HTML, CSS dan jQuery

王林

Lepaskan： 2023-10-24 12:53:07

asal

1256 orang telah melayarinya

<p>

<p>Cara membuat tapak web responsif menggunakan HTML, CSS dan jQuery

<p>Dalam era Internet mudah alih hari ini, semakin ramai orang menggunakan telefon bimbit dan tablet untuk melayari laman web. Oleh itu, membangunkan laman web responsif telah menjadi kemahiran yang diperlukan. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta tapak web responsif yang menyesuaikan diri dengan saiz skrin peranti yang berbeza.

<p>Langkah Pertama: Buat Struktur HTML
Pertama, kita perlu mencipta struktur HTML tapak web. Berikut ialah contoh mudah:

<!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>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <div class="content">
        <h2>欢迎来到我们的网站</h2>
        <p>这是一个响应式网站的示例。</p>
    </div>
    <footer>
        <p>版权所有 © 2021</p>
    </footer>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

<p> Dalam contoh di atas, kami menggunakan teg semantik HTML5 untuk membina struktur tapak web. <header>标签定义网站的头部，<nav>标签定义导航栏，<h1>、<h2>和<p> Tag digunakan untuk tajuk dan kandungan.

<p>Langkah 2: Tambahkan gaya CSS
Seterusnya, kita perlu menambah gaya CSS pada tapak web untuk memastikan paparan yang baik pada peranti yang berbeza. Berikut ialah contoh mudah:

/* style.css */
/* 全局样式 */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* 头部样式 */
header {
    background-color: #333;
    color: #fff;
    padding: 20px;
}

header h1 {
    margin: 0;
    font-size: 24px;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul li {
    display: inline-block;
    margin-right: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

/* 内容样式 */
.content {
    padding: 20px;
}

/* 底部样式 */
footer {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

Salin selepas log masuk

<p> Dalam kod CSS di atas, kami menetapkan nilai lalai untuk gaya global dan kemudian menambah gaya untuk pengepala, navigasi, kandungan dan bahagian bawah.

<p>Langkah 3: Gunakan jQuery untuk mencipta reka letak responsif
Kini, kita boleh menggunakan jQuery untuk melaksanakan reka letak responsif untuk tapak web. Berikut ialah contoh mudah:

// script.js
$(document).ready(function() {
    // 监听窗口尺寸变化事件
    $(window).resize(function() {
        // 判断窗口宽度
        if( $(window).width() < 768 ) {
            // 当窗口宽度小于768px时，调整导航样式
            $('nav ul').addClass('mobile');
        } else {
            $('nav ul').removeClass('mobile');
        }
    });

    // 导航点击事件
    $('nav').on('click', function() {
        $('nav ul').toggleClass('open');
    });
});

Salin selepas log masuk

<p>Kod di atas melaksanakan fungsi berikut:

Dengar peristiwa perubahan saiz tetingkap, apabila lebar tetingkap kurang daripada 768px, tambahkan kelas mudah alih pada navigasi dan laraskan gaya navigasi;
Dengar acara klik navigasi, tukar paparan dan sembunyikan menu navigasi apabila mengklik navigasi.

<p>Langkah 4: Tambah Gaya CSS Responsif
Akhir sekali, kami perlu menambah beberapa gaya CSS responsif untuk menyesuaikan diri dengan saiz skrin yang berbeza. Berikut ialah contoh mudah:

/* style.css */

/* 移动设备样式 */
@media (max-width: 767px) {
    nav ul {
        display: none;
    }
    nav ul.open {
        display: block;
    }
    nav ul.mobile {
        display: block;
    }
    nav ul.mobile li {
        display: block;
        margin-bottom: 10px;
    }
}

/* 平板设备样式 */
@media (min-width: 768px) and (max-width: 1023px) {
    header {
        padding: 10px;
    }
}

/* 桌面设备样式 */
@media (min-width: 1024px) {
    header {
        padding: 20px;
    }
}

Salin selepas log masuk

<p> Dalam kod CSS di atas, kami menggunakan pertanyaan media untuk menentukan gaya berbeza untuk saiz skrin yang berbeza. Apabila lebar tetingkap kurang daripada 767px, menu navigasi disembunyikan dan menu dipaparkan apabila navigasi diklik apabila lebar tetingkap antara 768px dan 1023px, nilai padding pengepala menjadi 10px apabila lebar tetingkap; lebih besar daripada atau sama dengan 1024px, nilai padding pengepala Berbalik kepada 20px.

<p>Pada ketika ini, kami telah menyelesaikan proses mencipta tapak web responsif menggunakan HTML, CSS dan jQuery. Melalui langkah di atas, anda boleh mengembangkan dan mengubah suai kod mengikut keperluan khusus anda untuk menyesuaikan diri dengan senario dan keperluan reka bentuk yang berbeza. Saya doakan anda berjaya dalam pembangunan anda!

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