Se Connecter
Contact

Exercices HTML CSS

Exercice 5 HTML et CSS Corrigé

Réaliser la page suivante :

où :

  1. les titres, le plus gros possible, occupent 60% de la page ;
  2. concernant les listes en fond orange, la marge de gauche est de 10% et sa largeur est de 80%.

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Extrait du dictionnaire superflu de P. Desproges </title>
<link rel="stylesheet" type="text/css" href="../css/exercice(.css" />
</head>
<body>

<h1>Quelques d&eacute;finitions de noms communs</h1>

<dl>
<dt class="dt1">Bleu,e</dt>
<dd>Qui est d'une couleur voisine du rouge, mais pas tr&egrave;s : un ciel bleu, des yeux bleus, les flots bleus, une Opel Kadett bleue.
</dd>
<dd> Fig. Bouch. : un steak bleu ; s'emploie pour d&eacute;signer un steak rouge.
</dd>
<dd> Fig. Mar. : bizut ; "Faut pas me prendre pour un bleu" (Rackham-le-Rouge)
</dd>
<dt class="dt1">Directeur
</dt>
<dd>n.m., du latin di, la premi&egrave;re porte, et rectus, &agrave; droite.
</dd>
<dd>On ne dit pas un petit directeur, on dit un chef de rayon. On ne dit pas un grand directeur, on dit un chef de diam&egrave;tre.
</dd>
<dd>Le f&eacute;minin de directeur est la femme du directeur
</dd>
<dt class="dt1">Zeugma
</dt>
<dd>n.m. Proc&eacute;d&eacute; qui consiste &agrave; rattacher grammaticalement plusieurs noms &agrave; un
adjectif ou &agrave; un verbe qui, logiquement, ne se rapporte qu'&agrave; l'un des noms.
</dd>
<dd>Exemples de zeugma :
<ul>
<li>En achevant ces mots, Damocl&egrave;s tira de sa poitrine un soupir <span class="zeugma">et</span> de
sa redingote une enveloppe jaune et salie. Andr&eacute; Gide.
</li>
<li>Prenant son courage &agrave; deux mains <span class="zeugma">et</span>
sa Winchester dans l'autre,
John Kennedy se tira une balle dans la bouche.
</li>
</ul>
 
</dd>
</dl>

<h1>Locations latines et &eacute;trang&egrave;res (Pages Roses)</h1>
<dl>
<dt class="dt2">Alea jacta est
</dt>
<dd>Ils sont bavards, &agrave; la gare de l'Est.
</dd>
<dt class="dt2">Alea jacta ouest
</dt>
<dd>A  Montparnasse aussi.
</dd>
<dt class="dt2"> Fiat lux
</dt>
<dd>Oh, la belle voiture !
</dd>
</dl>

</body>
</html>

 

CSS:

body{
background-color : #aaaaaa;
}
h1{
color : white;
font-size : 1cm;
background-color: black;
width: 60%;
}
dl{
background-color: orange;
width: 80%;
margin-left: 10%
}
ul{
/*width: 100%;*/
background-color: #555555;
list-style-type: square;
color: #f16025;
}
li{
padding: 0 20px;
background-color: #97be3d;
border-right: solid 1px #555;
color: #ffffff;
}
dt{
text-decoration: underline;
font-size: larger;
}
.dt1{
color: blue;
}
.dt2{
color: #ff00ff;
}
.zeugma{
font-style: oblique;
font-weight: 900;
color: black;
text-decoration: overline;
}

 

Ajouter un commentaire

Veuillez vous connecter pour ajouter un commentaire.

Pas encore de commentaires.

Exercices

QCM Informatique

series HTML CSS

Exercices