suchen

Heim >Web-Frontend >CSS-Tutorial >So erstellen Sie eine Responsive Landing Page mit HTML, CSS und JS

So erstellen Sie eine Responsive Landing Page mit HTML, CSS und JS

Barbara Streisand
Barbara StreisandOriginal
2024-12-03 20:32:131055Durchsuche

How to Build a Responsive Landing Page with HTML, CSS, and JS

1. Einrichten des Projekts
Erstellen Sie zunächst Ihren Projektordner mit der folgenden Struktur:

landing-page/
  ├── index.html
  ├── styles.css
  ├── script.js

HTML: Die 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. Erweitern mit 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

/* Button Hover */
Schaltfläche {
Hintergrund: #fff;
Farbe: #4A00E0;
Grenze: keine;
Polsterung: 10px 20px;
Cursor: Zeiger;
Übergang: alle 0,3 s Ease-in-out;
}

Button:hover {
Hintergrund: #4A00E0;
Farbe: #fff;
}

Abschließende Gedanken
Um eine responsive Landingpage zu erstellen, müssen Design, Leistung und Benutzererfahrung in Einklang gebracht werden. Durch den effektiven Einsatz von HTML, CSS und JavaScript können Sie eine Seite erstellen, die optisch ansprechend und funktional ist.

Was denken Sie? Teilen Sie Ihre Anpassungen und Tipps in den Kommentaren unten! ?

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Responsive Landing Page mit HTML, CSS und JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html using pointer JS padding border background transition
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Können CSS3-:hover-Animationen gezwungen werden, ihren Zyklus nach dem Mouseout abzuschließen?Nächster Artikel：Können CSS3-:hover-Animationen gezwungen werden, ihren Zyklus nach dem Mouseout abzuschließen?

In Verbindung stehende Artikel

Mehr sehen