Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Enregistrer le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html lang="en"> <head> <title>Modèle CSS</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { marge: 0; police: Arial, Helvetica, sans-serif; } /* Styliser la navigation latérale */ .sidenav { hauteur: 100%; largeur: 200px; position: fixe; z-index: 1; haut: 0; gauche: 0; couleur-de-fond: #111; overflow-x: caché; } /* Liens de navigation latérale */ .sidenav a { couleur: blanc; padding: 16px; text-decoration: none; afficher: bloc; } /* Changer la couleur au survol */ .sidenav a:hover { couleur-de-fond: #ddd; couleur: noir; } /* Styliser le contenu */ .content { marge-gauche: 200px; padding-left: 20px; } </style> </head> <body> <div class="sidenav"> <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a> </div> <div class="content"> <h2>Modèle CSS</h2> <p>Une barre latérale fixe pleine hauteur et du contenu.</p> </div> </body> </html>