Les développeurs Web sont toujours à la recherche de moyens d'améliorer leur flux de travail et de se simplifier la vie. Dans cet article, nous présenterons 21 extraits de code   et   utiles qui peuvent aider à rationaliser les tâches de développement Web quotidiennes. Ces extraits de code sont pratiques, permettent de gagner du temps et peuvent être facilement personnalisés pour répondre à vos besoins. HTML CSS  Découvrez une collection d'extraits de code pratiques  1. Menu de navigation réactif  Un menu de navigation réactif est essentiel pour une expérience utilisateur transparente sur différents appareils. Voici un extrait HTML et CSS simple pour créer un menu de navigation réactif :   <nav class="navbar"> <a href="#home">Home</a> <a href="#about">About</a> <a href="#services">Services</a> <a href="#contact">Contact</a> </nav> .navbar { display: flex; justify-content: space-around; background-color: #333; padding: 1rem; } .navbar a { color: white; text-decoration: none; padding: 0.5rem; } .navbar a:hover { background-color: #ddd; color: black; }  2. Réinitialisation CSS  L'application d'une réinitialisation CSS peut aider à garantir la cohérence de votre site Web sur différents navigateurs. Voici un simple extrait de réinitialisation CSS pour commencer :   * { margin: 0; padding: 0; box-sizing: border-box; }  3. Centrer un élément verticalement et horizontalement  Utilisez Flexbox pour centrer facilement un élément à la fois verticalement et horizontalement dans son conteneur :   .container { display: flex; justify-content: center; align-items: center; height: 100vh; }  4. Info-bulle CSS  Créez une info-bulle simple en utilisant uniquement HTML et CSS :   <span class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span> </span> .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; padding: 5px; border-radius: 6px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }  5. Boutons élégants  Ajoutez du style à vos boutons avec ce simple extrait CSS :   .button { background-color: #4CAF50; border: none; color: white; text-align: center; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; padding: 10px 24px; border-radius: 8px; transition: background-color 0.3s; } .button:hover { background-color: #45a049; }  6. Défilement fluide vers le haut  Implémentez un effet de défilement fluide pour naviguer vers le haut de votre page Web :   <a href="#top" class="scroll-to-top">Back to Top</a> html { scroll-behavior: smooth; } .scroll-to-top { position: fixed; bottom: 20px; right: 20px; text-decoration: none; background-color: #4CAF50; color: white; padding: 10px 15px; border-radius: 8px; }  7. Galerie d'images réactive  Créez une galerie d'images réactive à l'aide de CSS Grid :   <div class="image-gallery"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> .image-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px; } .image-gallery img { width: 100%; height: auto; }  8. En-tête de tableau fixe  Gardez l'en-tête du tableau fixe tout en faisant défiler le contenu du tableau :   <table class="fixed-header"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody>  </tbody> </table> .fixed-header { width: 100%; border-collapse: collapse; } .fixed-header thead { position: sticky; top: 0; background-color: #f1f1f1; }  9. Image d'arrière-plan plein écran  Définissez une image d'arrière-plan plein écran pour votre page Web :   body { background-image: url('background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh; }  10. Pied de page collant  Gardez votre pied de page en bas de la page même lorsqu'il n'y a pas assez de contenu pour remplir la fenêtre :   <div class="page-container"> <div class="content-wrap">  </div> <footer>Footer content</footer> </div> .page-container { display: flex; flex-direction: column; min-height: 100vh; } .content-wrap { flex: 1; } footer { background-color: #f1f1f1; padding: 1rem; }  11. Disposition des cartes  Créez une mise en page de carte moderne pour présenter le contenu à l'aide de Flexbox :   <div class="card"> <img src="image.jpg" alt="Card image"> <div class="card-content"> <h3>Card Title</h3> <p>Card description.</p> </div> </div> .card { display: flex; flex-direction: column; width: 300px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 8px; overflow: hidden; } .card img { width: 100%; height: auto; } .card-content { padding: 1rem; }  12. Chapelure  Créez une navigation fil d'Ariane simple en utilisant HTML et CSS :   <nav class="breadcrumbs"> <a href="#home">Home</a> > <a href="#section1">Section 1</a> > <a href="#section2">Section 2</a> </nav> .breadcrumbs { padding: 1rem; } .breadcrumbs a { text-decoration: none; color: #3498db; } .breadcrumbs a:hover { text-decoration: underline; }  13. Accordéon simple  Créez un accordéon simple en utilisant HTML et CSS :   <button class="accordion">Section 1</button> <div class="panel"> <p>Section 1 content.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Section 2 content.</p> </div> .accordion { cursor: pointer; width: 100%; text-align: left; outline: none; transition: 0.4s; } .panel { display: none; overflow: hidden; transition: max-height 0.2s; }  14. Mise en page simple  Créez une navigation de pagination simple en utilisant HTML et CSS :   <nav class="pagination"><a href="#prev">« Prev</a> <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#next">Next »</a> </nav> .pagination { display: inline-block; padding: 1rem; } .pagination a { color: #3498db; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; border: 1px solid #ddd; } .pagination a:hover { background-color: #f1f1f1; } .pagination a.active { background-color: #3498db; color: white; border: 1px solid #3498db; }  15. Intégration vidéo réactive  Créez une vidéo intégrée réactive en utilisant HTML et CSS :   <div class="video-container"> <iframe src="https://www.youtube.com/embed/your_video_id" frameborder="0" allowfullscreen></iframe> </div> .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }  16. Chargeur CSS  Créez un chargeur CSS simple pour votre site Web :   <div class="loader"></div> .loader { border: 8px solid #f3f3f3; border-radius: 50%; border-top: 8px solid #3498db; width: 60px; height: 60px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }  17. Effet de défilement de parallaxe  Ajoutez un simple effet de défilement parallaxe à votre page Web :   <div class="parallax"></div> .parallax { background-image: url("your-image.jpg"); min-height: 500px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }  18. Système de grille Flexbox  Créez un système de grille Flexbox simple pour votre site Web :   <div class="row"> <div class="col">Column 1</div> <div class="col">Column 2</div><div class="col">Column 3</div> </div> .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .col { flex: 1; padding-left: 15px; padding-right: 15px; }  19. Indicateur de défilement animé  Créez un indicateur de défilement animé pour montrer aux utilisateurs jusqu'où ils ont fait défiler :   <div class="progress-container"> <div class="progress-bar"></div> </div> .progress-container { width: 100%; height: 8px; background-color: #f3f3f3; position: fixed; top: 0; } .progress-bar { height: 8px; background-color: #3498db; width: 0%; }  20. Effets de filtre CSS  Appliquez des effets de filtre CSS à vos images :   <img src="your-image.jpg" alt="Your Image" class="filter"> .filter { filter: grayscale(100%); }  21. Intégration des polices Google  Intégrez Google Fonts à votre site Web :   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> body { font-family: 'Roboto', sans-serif; }  Ces 21 extraits de code HTML et CSS utiles peuvent vous aider à améliorer vos projets de développement Web et à rationaliser votre flux de travail. Gardez-les à portée de main pour pouvoir les consulter facilement et n'hésitez pas à les modifier et à les adapter à vos besoins spécifiques.  Également publié   . ici

This story contains new, firsthand information uncovered by the writer.

Read My Stories

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Make resilience your competitive advantage

21 précieux extraits de code HTML et CSS pour les développeurs Web

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Comment améliorer votre flux de travail par 10 : 17 applications essentielles

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Libérer la puissance de l’IA. Une revue systématique des techniques de pointe : résumé et introduction

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Comment améliorer votre flux de travail par 10 : 17 applications essentielles

Naviguer sur les eaux : développer des applications RAG de qualité production avec des lacs de données

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps