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> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } .menu { flottant : gauche ; largeur: 20%; text-align: center; } .menu a { couleur de fond: #e5e5e5; padding: 8px; margin-top: 7px; afficher: bloc; largeur: 100%; couleur: noir; } .main { flottant: gauche; largeur: 60%; padding: 0 20px; } .right { couleur de fond: #e5e5e5; flottant: gauche; largeur: 20%; padding: 15px; margin-top: 7px; text-align: center; } @media only screen and (max-width: 620px) { /* Pour les téléphones mobiles : */ .menu, .main, .right { largeur: 100%; } } </style> </head> <body style="font-family:Verdana;color:#aaaaaa;"> <div style="background-color:#e5e5e5;padding:15px;text-align:center;"> <h1>Bonjour le monde</h1> </div> <div style="overflow:auto"> <div class="menu"> <a href="#">Lien 1</a> <a href="#">Lien 2</a> <a href="#">Lien 3</a> <a href="#">Lien 4</a> </div> <div class="main"> <h2>Lorum Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> <div class="right"> <h2>À propos</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> <div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div> </body> </html>