Scribd Logo
Importer

Bienvenue sur Scribd !

  • TP N°4 Menu CSS

    Transféré par

    sghaier anouar
    17 vues3 pages

    Titre original

    Tp n°4 Menu CSS

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    17 vues3 pages

    TP N°4 Menu CSS

    Transféré par

    sghaier anouar

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 3

    Module 1

    Création d'un site web interactif

    TP n°4 Création d’un menu de navigation (HTML5 ,CSS3)


    Objectif

    Création d’un menu horizontal centré en utilisant HTML5 et CSS3


    Travail demandé

     Partie HTML

    1) Créer une nouvelle page web avec L’IDE Coffecup HTML


    2) Enregistrer la page sous le nom « index » dans votre dossier.
    3) Ajouter Le titre « Menu CSS » comme titre de la page.
    4) Changer la couleur d’arrière-plan de la page web. (couleur bleu)
    5) Insérer l’image « bannière.jpg » comme arrière-plan dans une balise <Header>.
    6) Insérer une section de navigation destinée à contenir notre menu de navigation (balise <nav>)
    7) Dans la section de navigation créer une liste non ordonnée de 7 éléments (Economie, Technologie,
    Culture, Sciences, Santé, Sports Contacts) (Balises <ul> et <li>).

     Partie CSS

    1) Créer un nouveau fichier CSS avec L’IDE Coffecup HTML.


    2) Enregistrer le fichier sous nom « style.css » dans votre dossier de travail.
    3) Lier le fichier CSS avec la page web déjà créée (balise <link>).
    4) Faire centrer le contenu de la page web en utilisant le sélecteur « body »

    body{
    margin: 0 auto; /* pour éviter les marges */
    text-align: center;
    }

    5) Utiliser le sélecteur de class «nav» déjà crée dans la liste pour centrer les éléments de la liste (pour
    identifier un sélecteur class il suffit d’ajouter un point devant le nom du sélecteur) et supprimer les
    points de la liste non ordonnée.

    .nav{
    text-align:center; /* centrer les éléments de menu */
    list-style: none; /* supprimer les point de liste */
    padding: 10px; /* espace entre les éléments */
    }

     La propriété « padding » est une propriété raccourcie qui permet de définir les différents écarts de
    remplissage sur les quatre côtés d'un élément.
    6) Mettre en ligne les éléments de la liste en utilisant la propriété « display:inline-block » sous le
    sélecteur de class ( .nav li ) (les éléments li se mettent par défaut en block)

    Prof :H Sghaier 3ème SI-STI


    .nav li{
    display:inline-block;
    margin:0 0 0 10px;
    width: 100px;
    background-color:#fff;
    }

     La propriété « width » permet de changer la largeur des liens (width=100% de son conteneur li)

    7) Mettre en forme le texte des liens en changeant les propriétés de sélecteur a de sous class (.nav li)

    .nav li>a{
    font:1em helvetica arial sans-serif;
    line-height: 3em;
    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    }

     La propriété « line-height » permet d’augmenter la hauteur du lien (la zone cliquable) on peut utiliser
    en alternatif un « padding ».
     La propriété « display» mettre en ligne les items.
     La propriété « text-decoration» enleve la décoration par défaut des liens.
     La propriété « font» permet de choisir la police d’écriture pour les liens

    8) Changer la couleur du texte et le background d'un lien au survol de la souris avec les propriétés de sous
    class (.nav a:hover)
    .nav a:hover{
    color:#fff;
    background: #3498DB;
    }

     Page web Résultat.

    Prof :H Sghaier 3ème SI-STI


    Correction

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link href="style.css" rel="stylesheet"/>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor">
    <meta name="dcterms.created" content="lun., 09 nov. 2020 19:39:26 GMT">
    <meta name="description" content="">
    <title>Menu CSS</title>
    </head>
    <body style="background-color:#28A3C8" >
    <header >
    <img src="banière2.jpg">
    </header>
    <nav>
    <ul class="nav">
    <li><a href="#">Économie</a></li>
    <li><a href="#">Technologie</a></li>
    <li><a href="#">Culture</a></li>
    <li><a href="#">Sciences</a></li>
    <li><a href="#">Santé</a></li>
    <li><a href="#">Sports</a></li>
    <li><a href="#">Contacts</a></li>
    </ul>
    </nav>
    </body>
    </html>

    style.css

    body{
    margin: 0 auto;
    text-align: center;
    }
    .nav{
    text-align:center;
    list-style: none;
    padding: 10px;
    }
    .nav li{
    display:inline-block;
    margin:0 0 0 10px;
    width: 100px;
    background-color:#fff;
    }
    .nav li>a{
    font:1em helvetica arial sans-serif;
    line-height: 3em;
    display: inline-block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    }
    .nav a:hover{
    color:#fff;
    background: #3498DB;
    }

    Prof :H Sghaier 3ème SI-STI

    Vous aimerez peut-être aussi