Rumah >hujung hadapan web >tutorial css >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:32634semak imbas
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>© 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!