Rumah > Artikel > hujung hadapan web > Membina Laman Web Responsif Pertama Anda dengan HTML dan CSS

Membina Laman Web Responsif Pertama Anda dengan HTML dan CSS

王林asal: 2024-07-31 02:59:32595semak imbas

Building Your First Responsive Website with HTML and CSS

Membuat tapak web responsif ialah kemahiran penting untuk mana-mana pembangun bahagian hadapan. Tapak web responsif melaraskan reka letak dan kandungannya berdasarkan peranti dan saiz skrin, memastikan pengalaman pengguna yang hebat merentas semua peranti. Dalam artikel ini, kami akan membimbing anda melalui proses membina tapak web responsif asas menggunakan HTML dan CSS.

Prasyarat

Sebelum anda bermula, anda harus mempunyai pemahaman asas tentang HTML dan CSS. Kebiasaan dengan CSS Flexbox dan pertanyaan media juga akan memberi manfaat.

Langkah 1: Menyediakan Projek Anda

Mulakan dengan mencipta folder projek baharu dan menambah fail berikut:

index.html: Fail HTML utama.
styles.css: Fail CSS untuk menggayakan tapak web.

Langkah 2: Menstrukturkan HTML Anda

Buka index.html dan tambahkan struktur HTML asas yang anda inginkan ia boleh menjadi apa sahaja:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>My Responsive Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Welcome to My Website</h2>
            <p>This is a simple responsive website built with HTML and CSS.</p>
        </section>
        <section id="about">
            <h2>About Us</h2>
            <p>We provide excellent web development services.</p>
        </section>
        <section id="services">
            <h2>Our Services</h2>
            <p>We offer a wide range of web development services.</p>
        </section>
        <section id="contact">
            <h2>Contact Us</h2>
            <p>Feel free to reach out to us for any inquiries.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 My Responsive Website</p>
    </footer>
</body>
</html>

Langkah 3: Menggayakan Laman Web Anda

Seterusnya, buka styles.css fail dan mulakan dengan menambah beberapa gaya asas:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

header {
    background: #333;
    color: #fff;
    padding: 1rem 0;
}

header h1 {
    text-align: center;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
}

nav ul li {
    margin: 0 1rem;
}

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

main {
    padding: 2rem;
}

section {
    margin-bottom: 2rem;
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

Langkah 4: Menjadikannya Responsif

Untuk menjadikan tapak web responsif, kami akan menggunakan pertanyaan media. Ini membolehkan kami menggunakan gaya yang berbeza berdasarkan saiz skrin. Tambahkan Pertanyaan media berikut pada styles.css:

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        margin: 0.5rem 0;
    }

    main {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.5rem;
    }

    nav ul li {
        margin: 0.25rem 0;
    }

    main {
        padding: 0.5rem;
    }
}

Langkah 5: Menguji Laman Web Anda

Buka index.html dalam penyemak imbas web dan ubah saiz tetingkap penyemak imbas untuk melihat cara reka letak menyesuaikan untuk saiz skrin yang berbeza. Anda seharusnya melihat susunan menu navigasi secara menegak dan pelapik di sekeliling kandungan berkurangan apabila lebar skrin berkurangan.

Akhirnya

Anda kini telah membina tapak web responsif yang mudah menggunakan HTML dan CSS! Contoh ini merangkumi asas penstrukturan halaman web dan menggunakan pertanyaan media untuk mencipta reka bentuk responsif. Sambil anda memperoleh lebih banyak pengalaman, anda boleh meneroka teknik lanjutan seperti Grid CSS, Flexbox dan imej responsif untuk mencipta reka letak yang lebih kompleks dan dinamik.

Nantikan!!!

Atas ialah kandungan terperinci Membina Laman Web Responsif Pertama Anda dengan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html for using finally this padding

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Menganimasikan elemen dialog dan popover dengan CSS @gaya permulaanArtikel seterusnya：Menganimasikan elemen dialog dan popover dengan CSS @gaya permulaan

Artikel berkaitan

Lihat lagi