Afficher la pageAnciennes révisionsLiens de retourExporter en PDFHaut de page Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur. [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]] ==== WEB - Conception d'un menu simple avec des règles CSS ==== [Mise à jour le 1/4/2024] * **Ressources** * <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/CSS/CSS_layout/Introduction" target="_blank">Introduction à la mise en page en CSS</a></html> * CSS facile ! - <html><a href="http://www.css-faciles.com/" target="_blank">Propriétés CSS</a></html> ---- === 1 Organisation du répertoire de travail === * Créer un répertoire et l'organiser comme ci-dessous. {{ :web:repmenusimple.png?nolink |}} === 2. Création de la structure du menu === <callout type="info" icon="true">La **structure** du menu est créée dans le fichier //**menu.html**// à l'aide d'une **liste non ordonnée** . </callout> {{ :web:structurebase.png?nolink|}} * Compléter le fichier //**menu.html**// comme ci-dessous. <code html *.html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Menu simple</title> <link rel="stylesheet" type="text/css" href="styles/menu.css" /> <!--<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css' />--> </head> <body> <nav> <ul> <li><a href="#">page1</a></li> <li><a href="#">page2</a></li> <li><a href="#">page3</a></li> <li><a href="#">page4</a></li> </ul> </nav> </body> </html> </code> \\ //Remarque// : le lien en commentaire montre comment utiliser une <html><a href="https://developers.google.com/fonts/docs/getting_started?hl=fr" target="_blank">police de caractères</a></html> Google. === 3. Mise en forme du menu === <callout type="warning" title="CSS" icon="true">Les **règles** CSS sont déclarées dans la page //**menu.css**//.</callout> * **3.1 Création d'une règle pour le corps de la page** <code css *.css> body { font-family: "Lato", sans-serif; font-size: 12px; } </code> * **3.2 Suppression du style par défaut des listes** Créer la règle 1 comme ci-dessous : {{ :web:structure2simple.png?nolink|}} <code css *.css> /* Règle 1 */ nav ul { list-style: none; } </code> * **3.3 Suppression du soulignement des liens** Créer la règle 2 comme ci-dessous : {{ :web:structure3simple.png?nolink|}} <code css *.css> /* Règle 2 */ nav ul li a { text-decoration: none; } </code> * **3.4 Suppression des marges par défaut** Compléter la règle 1 avec les déclarations ci-dessous : <code css *.css> /* Règle 1 */ nav ul { padding: 0; margin: 0; } </code> * **3.5 Afichage des liens « en ligne »** Créer la règle 3 comme ci-dessous : {{ :web:structure6simple.png?nolink|}} <code css *.css> /* Règle 3 */ nav ul li { float: left; } </code> * **3.6 Réglage de la hauteur du menu et ajout de la couleur ** Compléter la règle 3 avec les déclarations ci-dessous : {{ :web:structure7simple.png?nolink|}} <code css *.css> /* Règle 3 */ nav ul li { background-color: #64abfb; float: left; line-height: 35px; } </code> * **3.7 Les éléments du menu sont éloignés** Compléter la règle 2 avec la déclaration de style ci-dessous : {{ :web:structure8simple.png?nolink&300|}} <code css *.css> /* Règle 2 */ nav ul li a { margin-left: 20px; margin-left: 20px; } </code> web/menucssbase.txt Dernière modification : 2024/04/02 07:53de phil