Objectif
- Être capable de réaliser un menu changeable au survol de souris en HTML et en CSS.
Travail demandé
HTML
<!doctype html> <html> <head> <title>Accueil</title> <link rel="stylesheet" type="text/css" href="Chemin de fichier\TP les menus\Tp3 les menus en CSS/menu_style.css"> </head> </div> <div class="titre"> <h1>Création d'un menu en <abbr title="Hypertext Markup Language">HTML</abbr> et <abbr title="Cascading Style Sheets">CSS</abbr></h1> </div> <nav> <div class="div"> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Cours HTML</a></li> <li><a href="#">Cours CSS</a></li> <li><a href="#">Cours HTML TP</a></li> <li><a href="#">Cours CSS TP</a></li> </ul> </div> </nav> </body> </html>CSS
body{ font-family: 'Source code pro', Colibri, serif; margin: 0; padding: 0; } .titre{ text-align:center; margin:0px; padding:0px; } nav{ width: 100%; background-color: #424558; } nav ul{ margin: 0px; padding: 0px; overflow: hidden; } nav li{ list-style-type: none; float: left; } nav a{ display: inline-block; text-decoration: none; padding: 20px 30px; color: #FFF; } nav li:hover{ border-top: 5px solid #e44426; background-color: rgba(228, 77, 38, 0.15); } .div{display:table; margin: 0 auto; } nav li :hover a{ padding: 15px 30px 15px 30px; } /*.menu-css:hover{ border-top: Spx solid #0070bb; background-color: rgba(000, 112, 192, 0.15); } .menu-javascript:hover{ border-top: 5px solid #fldc4f; background-color: RGBa(241, 211, 79, 0.15); } menu-contact:hoverf border-top: Spx solid 1x888; bockground-color: RG8o(220, 220, 220, 0.15) ; */
Notre menu sera créé exclusivement en HTML et en CSS.