Scribd Logo
Importer

Bienvenue sur Scribd !

  • 1 vues

    TP2CSS

    Transféré par

    relfihi

    Droits d'auteur :

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

    TP2CSS

    Transféré par

    relfihi
    1 vues3 pages

    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é ?

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    1 vues3 pages

    TP2CSS

    Transféré par

    relfihi

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    sur 3

    Exercice 1

    Ecrire un programme html avec un style css qui permet de créer le site suivant :

    Compléter les code html et css suivant pour avoir la forme du site ci-dessus.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Structure de la page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="structure.css" type="text/css" rel="stylesheet" >
    </head>
    <body>
    <header id="topPage">
    <div class="logo"> ????????</div>
    <div class="bandeau">??????????</div>
    </header>
    <div id="mainPage">
    <nav class="menuGauche">??????????</nav>
    <div class="centre">?????????????</div>
    </div>
    <footer id="basPage">?????????????????</footer>
    </body>
    </html>
    structure.css
    #topPage { .logo { .bandeau {
    width : 100%; width:150px; width:100%;
    height : 100px; height:100%; height:100%;
    background-color : background-color: #006600; background-color:
    #00FF00; } float :left; } #000066; }
    #mainPage { .menuGauche { .centre {
    width : 100%; width : 200px; width : 100%;
    height: 500px; height: 100%; height: 100%;
    background-color : background-color : #660000; background-color :
    #FF0000; } float :left; } #FF00FF; }

    #basPage {
    width : 100%;
    height : 60px;
    background-color : #0000FF;
    }

    A. EL FERGOUGUI TP CSS
    Exercice 2
    Réaliser un programme avec son fichier css qui réalise le site suivant :

    Exercice 3
    • Créer un tableau contiendra au moins 10 lignes tr et 10 colonnes td.
    • la première ligne du tableau sera une ligne d'en-tête et n'aura que des colonnes th.
    • nous ferons en sorte qu'après la ligne d'en-tête, toutes les 6 lignes un périodicité de couleurs
    soit établie :
    o les 3 premières lignes seront sur un fond rouge clair (#FCC),
    o la quatrième ligne sera sur un fond jaune clair (#FFC),
    o la cinquième ligne sera sur un fond vert clair (#CFC),
    o la sixième ligne sera sur un fond bleu clair (#CFF).
    o Les lignes restantes sauf la dernière auront un fond rouge foncé (#F00)
    o La dernière ligne aura un fond bleu foncé (#00F)
    • nous ferons également en sorte que :
    o la ligne d'en-tête soit en caractères blancs sur fond rouge sombre (#633),
    o la deuxième colonne soit écrite en rouge (#F00).
    • Vous pouvez utiliser thead (en-tête tableau), tboody (corps tableau) et tfoot (pied tableau)
    • Utiliser nth-child(an+b), nth-last-child(an+b)

    A. EL FERGOUGUI TP CSS
    Exercice 4
    Réaliser un programme html avec code css qui permet d'avoir le résultat suivant:

    Utiliser les lignes paires et impaires et le fusionnement des colonnes avec le paramètre colspan=’’n’’
    de la colonne <td> à fusionner et des lignes avec le paramètres rowspan=’’m’’ de la ligne <tr> à
    fusionner.
    Exercice 5
    Réaliser le programme html et le code css pour avoir l'affichage ci dessous

    Exercice 6
    En utilisant les pseudo codes ::first-line et ::first-letter écrire un code qui réalise :

    A. EL FERGOUGUI TP CSS

    Vous aimerez peut-être aussi