-Production de Pages Web- CSS 3ème STI

1. Créer un fichier nommé miseenpage.html dans votre dossier de travail

2. Le titre du document est : Mise en page.
3. Changer la couleur du fond du document en yellow
4. Saisir les contenus suivant dans body :
<div class="bloc-1">
Texte du bloc 1 Fixe
</div>
<div class="bloc-2">
Texte du bloc 2 variable.
</div>

5. Insérer un lien vers la feuille nommée style.css sauvegardée dans le même emplacement
que miseenpage.html
…………………………………………………………………………………………….
6. Ajouter dans la page style.css, les sélecteurs de classe bloc1 et bloc2 ayant comme
propriétés et valeurs les données du tableau suivant :
Nom sélecteur .bloc-1 .bloc-2
Propriété : valeur
top : 10 px 10 px
(sommet du bloc)
bottom : 10 px 10 px
(base du bloc)
left : 10 px 120 px
(bord gauche du bloc)
right : 10 px
(bord droit du bloc)
position : fixed fixed
width : 100 px
height :
border : solid 1 px #660033 solid 1 px #00FF33
color : blue green
font-family Verdana Courier new
Font-size small medium

.bloc-1{
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………………………….
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………
-1-
-Production de Pages Web- CSS 3ème STI
}

.bloc-2{
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………………………………………………………………………………………….
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………………………………………………………………………………………………

7. Afficher votre page miseenpage.html dans votre navigateur

Miseenpage.html Style4.css

-2-