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

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 :

     Responsive Website  
   My Responsive Website
   Home
 About
 Services
 Contact
 
 
 
   Welcome to My Website
 This is a simple responsive website built with HTML and CSS.
 
  About Us
 We provide excellent web development services.
 
  Our Services
 We offer a wide range of web development services.
 
  Contact Us
 Feel free to reach out to us for any inquiries.
 
 
  © 2024 My Responsive Website

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 à l'écoute !!!

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!