Créer votre premier site Web réactif avec HTML et CSS-tutoriel CSS-php.cn

Créer votre premier site Web réactif avec HTML et CSS

王林

Libérer： 2024-07-31 02:59:32

original

631 Les gens l'ont consulté

Building Your First Responsive Website with HTML and CSS

Créer un site Web réactif est une compétence essentielle pour tout développeur front-end. Un site Web réactif ajuste sa mise en page et son contenu en fonction de l'appareil et de la taille de l'écran, garantissant ainsi une expérience utilisateur exceptionnelle sur tous les appareils. Dans cet article, nous vous guiderons tout au long du processus de création d'un site Web réactif de base en utilisant HTML et CSS.

Conditions préalables

Avant de commencer, vous devez avoir une compréhension de base du HTML et du CSS. La connaissance de CSS Flexbox et des requêtes multimédias sera également bénéfique.

Étape 1 : Configuration de votre projet

Commencez par créer un nouveau dossier de projet et ajoutez les fichiers suivants :

index.html : Le fichier HTML principal.
styles.css : Le fichier CSS pour styliser le site Web.

Étape 2 : structurer votre HTML

Ouvrez index.html et ajoutez la structure HTML de base que vous souhaitez, cela peut être n'importe quoi :

<!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>

Copier après la connexion

Étape 3 : styliser votre site Web

Ensuite, ouvrez le fichier styles.css et commencez par ajouter quelques styles de base :

* {
    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;
}

Copier après la connexion

Étape 4 : le rendre réactif

Pour rendre le site Web réactif, nous utiliserons des requêtes multimédias. Ceux-ci nous permettent d'appliquer différents styles en fonction de la taille de l'écran. Ajoutez les requêtes multimédias suivantes à 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;
    }
}

Copier après la connexion

Étape 5 : tester votre site Web

Ouvrez index.html dans un navigateur Web et redimensionnez la fenêtre du navigateur pour voir comment la mise en page s'adapte aux différentes tailles d'écran. Vous devriez voir le menu de navigation s'empiler verticalement et le remplissage autour du contenu diminuer à mesure que la largeur de l'écran diminue.

Enfin

Vous avez maintenant créé un site Web réactif simple en utilisant HTML et CSS ! Cet exemple couvre les bases de la structuration d'une page Web et de l'utilisation des requêtes multimédias pour créer un design réactif. Au fur et à mesure que vous gagnez en expérience, vous pouvez explorer des techniques avancées telles que CSS Grid, Flexbox et des images réactives pour créer des mises en page plus complexes et dynamiques.

Restez connectés !!!

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!