Rumah >hujung hadapan web >tutorial css >Cara Membina Halaman Pendaratan Responsif dengan HTML, CSS dan JS
Cara Membina Halaman Pendaratan Responsif dengan HTML, CSS dan JS
- Barbara Streisandasal
- 2024-12-03 20:32:13965semak imbas
1. Menyediakan Projek
Mulakan dengan mencipta folder projek anda dengan struktur berikut:
landing-page/ ├── index.html ├── styles.css ├── script.js
HTML: Struktur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<p><strong>2. Styling with CSS</strong><br>
</p>
<pre class="brush:php;toolbar:false">/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* Navbar */
.navbar {
background: #4A00E0;
color: #fff;
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links {
list-style: none;
display: flex;
}
.nav-links li {
margin-left: 20px;
}
.nav-links a {
color: #fff;
text-decoration: none;
}
/* Hero Section */
.hero {
display: flex;
justify-content: space-between;
align-items: center;
padding: 40px;
background: linear-gradient(135deg, #8E2DE2, #4A00E0);
color: #fff;
}
.hero-content h2 {
font-size: 2.5rem;
}
.hero img {
width: 40%;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero {
flex-direction: column;
text-align: center;
}
.hero img {
width: 80%;
}
}
3. Mempertingkatkan dengan JavaScript
// script.js
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function(e) {
e.preventDefault();
document.querySelector(this.getAttribute("href")).scrollIntoView({
behavior: "smooth"
});
});
});
**4. Responsive and Engaging Design**
To make your landing page responsive:
Use flexbox and media queries for layouts.
Optimize images for different screen sizes.
Test responsiveness using browser developer tools.
5. Optional: Adding Animations
For modern aesthetics, use CSS animations.
Optional: Adding Animations
/* Butang Tuding */
butang {
latar belakang: #fff;
warna: #4A00E0;
sempadan: tiada;
pelapik: 10px 20px;
kursor: penunjuk;
peralihan: semua 0.3s mudah masuk;
}
butang: tuding {
latar belakang: #4A00E0;
warna: #fff;
}
Pemikiran Akhir
Membina halaman pendaratan responsif memerlukan reka bentuk, prestasi dan pengalaman pengguna yang seimbang. Dengan menggunakan HTML, CSS dan JavaScript dengan berkesan, anda boleh membuat halaman yang menarik dan berfungsi secara visual.
Apakah pendapat anda? Kongsi penyesuaian dan petua anda dalam ulasan di bawah! ?
Atas ialah kandungan terperinci Cara Membina Halaman Pendaratan Responsif dengan HTML, CSS dan JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!