Comment créer une page de destination réactive avec HTML, CSS et JS-tutoriel CSS-php.cn

Comment créer une page de destination réactive avec HTML, CSS et JS

Barbara Streisand

Libérer： 2024-12-03 20:32:13

original

1005 Les gens l'ont consulté

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

1. Mise en place du projet
Commencez par créer votre dossier de projet avec la structure suivante :

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

Copier après la connexion

HTML : La structure

<!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%;
  }
}

Copier après la connexion

3. Amélioration avec 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.

Copier après la connexion

Optional: Adding Animations

Copier après la connexion

/* Survol du bouton */
bouton {
arrière-plan : #fff;
couleur : #4A00E0;
bordure : aucune ;
rembourrage : 10px 20px ;
curseur : pointeur ;
transition : toutes les 0,3 s facilitent l'entrée ;
>

bouton : survoler {
arrière-plan : #4A00E0;
couleur : #fff;
>

Pensées finales
Créer une page de destination réactive nécessite un équilibre entre la conception, les performances et l'expérience utilisateur. En utilisant efficacement HTML, CSS et JavaScript, vous pouvez créer une page visuellement attrayante et fonctionnelle.

Qu'en pensez-vous ? Partagez vos personnalisations et astuces dans les commentaires ci-dessous ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!