Scribd
Importer
115 vues2 pages

Devoir CSS

Ce document décrit les étapes pour créer la mise en page d'un site web avec CSS. Il contient 5 blocs à développer : un entête, un menu, une section principale à 3 colonnes, et un pied de page. Pour chaque bloc, le document liste les propriétés CSS à appliquer comme la police, la couleur, la bordure, l'ombre, etc.

Transféré par

mouarrab imrane
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
115 vues2 pages

Devoir CSS

Ce document décrit les étapes pour créer la mise en page d'un site web avec CSS. Il contient 5 blocs à développer : un entête, un menu, une section principale à 3 colonnes, et un pied de page. Pour chaque bloc, le document liste les propriétés CSS à appliquer comme la police, la couleur, la bordure, l'ombre, etc.

Transféré par

mouarrab imrane
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 2

HESTIM Casablanca Année universitaire 2021/2022

Génie informatique Dr. Ibrahim Bouabdallaoui


Conception des sites web

TP 4 : CSS
Le but est de réaliser un site où la page suivante :

Nous avons 5 blocs à réaliser :

1. L’entête respecte les consignes suivantes :


a. La bannière est mise en forme avec les tableaux
i. Le premier et dernier TD ont une largeur de 20%, le reste c’est pour le milieu
ii. La mise en forme du tableau est la suivante :
1. text-align:center;
2. width:100%;
3. padding:6px;
4. box-shadow:
5. 0px 10px 10px 2px rgba(0, 0, 0, 0.5)inset,
6. 0px 10px 10px 2px rgba(255, 255, 255, 0.5) ;
7. background-color:Green;
b. Les images ont les propriétés suivantes :
i. width :50px ;height :50px ;
ii. box-shadow :
iii. 0px 10px 10px 2px rgba(0, 0, 0, 0.5) ;
c. Le titre central est réalisé avec un span :
i. font-family: Georgia, “Times New Roman”, Times, serif;
ii. font-size :xx-large ;
iii. font-weight :bold ;
1. Le menu est aussi réalisé avec un tableau :
a. Les proprités du tableau sont les suivantes :
i. text-align:center;
ii. box-shadow:
iii. 0px 10px 10px 2px rgba(0, 0, 0, 0.5),

1
iv. 0px 10px 10px 2px rgba(255, 255, 255, 0.5) inset;
v. background-color:Red;
vi. padding:20px;
vii. border-radius:0px 0px 10px 10px;
viii. width:100%;
b. Pour les liens :
i. text-decoration:none; color : black; font-weight:bold;
2. La partie corps sera réalisé en respectant la structure suivante :

a. La mise en forme rubrique est la suivante :


i. margin-top:20px;
ii. text-align:left;
iii. padding:2px;
iv. width:100%;
v. height:40%;
vi. font-size:14px;
vii. line-height:1.5em;
b. La mise en forme centre est la suivante :
i. position:absolute;left:17%;top:32%;width:60%;height:70%;
ii. background-color: Pink;border-radius:10px;padding:10px;
iii. overflow:scroll;
iv. l’image flotte à gauche
c. La mise en forme droite est la suivante :
i. top:32%;
ii. position:absolute;
iii. text-align:left;
iv. padding:2px;
v. width:20%;
vi. height:40%;
vii. left:80%;
viii. font-size:14px;
ix. line-height:1.5em;
x. background-color:Grey;
xi. border-radius:10px;
3. Compléter les styles pour que ça corresponde au site.
4. Ajouter un pied de page qui contient la date d’édition qui soit homogène avec le reste.

Vous aimerez peut-être aussi