web:menucss

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
web:menucss [2021/08/11 11:22] philweb:menucss [2023/06/18 18:24] (Version actuelle) phil
Ligne 1: Ligne 1:
 [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]] [[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]]
  
-====Conception d'un menu déroulant avec règles CSS simples =====+==== WEB - Conception d'un menu déroulant avec des règles CSS ====
  
-[Mise à jour le 15/6/2021]+[Mise à jour le 18/6/2023]
  
   * **Ressources**   * **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>     * <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>     * CSS facile ! - <html><a href="http://www.css-faciles.com/" target="_blank">Propriétés CSS</a></html>
-==== 1 Organisation du répertoire du projet ====+ 
 +---- 
 + 
 +=== 1 Organisation du répertoire du projet ===
 Créer un répertoire et l'organiser comme ci-dessous Créer un répertoire et l'organiser comme ci-dessous
 {{ :web:repmenu.png?nolink |}} {{ :web:repmenu.png?nolink |}}
  
-==== 2. Créer la strucure du menu  ====+=== 2. Créer la strucure du menu  ===
 {{ :web:structure.png?nolink&160|}} {{ :web:structure.png?nolink&160|}}
 Compléter le fichier index.html comme ci-dessous. Compléter le fichier index.html comme ci-dessous.
Ligne 50: Ligne 53:
 </code> </code>
  
-==== 3. Mettre le menu en forme ====+=== 3. Mettre le menu en forme ===
 Les règles CSS sont placées dans la page style.css. Les règles CSS sont placées dans la page style.css.
  
Ligne 145: Ligne 148:
 } }
 </code> </code>
 +<callout type="info" icon="true">Les déclarations <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/display-listitem" target="_blank">display: list-item</a></html> et <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/position" target="_blank">position: absolute</a></html> sur MDN Web Docs.</callout>
  
-<note>Les déclarations <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/display-listitem" target="_blank">display: list-item</a></html> et <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/position" target="_blank">position: absolute</a></html> sur MDN Web Docs</note> 
  
   * **3.10 Placer les items des sous-menus verticalement**   * **3.10 Placer les items des sous-menus verticalement**
Ligne 157: Ligne 160:
 } }
 </code> </code>
- +<callout type="info" icon="true"><html>La propriété <a href="https://developer.mozilla.org/fr/docs/Web/CSS/float" target="_blank">float</a></html> sur MDN Web Docs</callout>
-<note><html>La propriété <a href="https://developer.mozilla.org/fr/docs/Web/CSS/float" target="_blank">float</a></html> sur MDN Web Docs</note>+
  
   * **3.11 Décaler les sous-menus sur la gauche de npx**   * **3.11 Décaler les sous-menus sur la gauche de npx**
Ligne 226: Ligne 228:
 } }
 </code> </code>
 +<callout type="info" icon="true">La propriété <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/z-index" target="_blank">z-index </a></html>sur MDN Web Docs.</callout>
  
-<note>La propriété <html><a href="https://developer.mozilla.org/fr/docs/Web/CSS/z-index" target="_blank">z-index </a></html>sur MDN Web Docs.</note> 
  • web/menucss.1628673748.txt.gz
  • Dernière modification : 2021/08/11 11:22
  • de phil