Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
CSS

Correction Exercices en CSS le positionnement Série 01

Un cours complet pour maîtriser Correction Exercices en CSS le positionnement Série 01.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
CSS Historique et versions
Les sélecteurs simples en CSS
Structure et règles CSS
Exercices en CSS les sélecteurs Série 01
Test d'évaluation en CSS3 sous forme de QCM
Présentation du CSS3
Exercices en CSS les sélecteurs Série 02
Intégrer du CSS dans une page html
Exercices en CSS les sélecteurs Série 03
Le positionnement des éléments
Les balises de bloc et les balises en-ligne
Notion de flux en CSS
Notion de modèle de boîte CSS
Les Marges en CSS
Unités de dimension en CSS
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  1. Objectifs

    • Connaitre la syntaxe du langage HTML5.
    • Connaitre la syntaxe du langage CSS3.
    • Comprendre les techniques de de positionnement des blocs avec le CSS.

  2. Application 01

    1. Énoncé
    2. Solution

  3. Application 02

    1. Énoncé
    2. Solution

  4. Application 03

    1. Énoncé
    2. Solution

  5. Application 04

    1. Énoncé
    2. Solution
      1. Fichier HTML
         <!DOCTYPE html>
<html>
    <head>
        <title>Exercice</title>
        <meta charset="UTF-8">
        <link href="style5.css" rel="stylesheet" 
        type="text/css"/>
    </head>
    <body>
		<header>
			<code>&#60;header&#62;</code>
		  </header>
		  
		  <section>
			<code>&#60;section&#62; <br> float: left;</code>
		  </section>
		  
		  <section>
			<code>&#60;section&#62; <br> float: left;</code>
		  </section>
		  
		  <section>
			<code>&#60;section&#62; <br> float: left;</code>
		  </section>
		  
		  <footer>
			<code>&#60;footer&#62;</code>
		  </footer>
</body>
</html>
      2. Fichier CSS
         code {
	background: #73bcec;
	
	border-radius: 6px;
	color: #fff;
	display: block;
	font-family: 'Anton', sans-serif;
    font-size: 2rem;
	padding: 24px 15px;
	text-align: center;
	border: 2px solid #060bfa;
  }
  header,
  section,
  aside,
  footer {
	margin: 0 1.5% 24px 1.5%;
  }
  section {
	float: left;
	width: 30%;
	min-height: 400px;
	border: 2px solid #060bfa;
	border-radius: 6px;

  }
  footer {
	clear: both;
	margin-bottom: 0;
  }

  6. Application 05

    1. Énoncé
    2. Solution
      1. Fichier HTML
        <!DOCTYPE html>
<html>
    <head>
        <title>Exercice - Mise en forme flexbox</title>
        <meta charset="UTF-8">
        <link href="2-style.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="page">
            <header class="main_header">Header</header>
            <nav class="main-nav">
                <ul>
                    <li><a href="#" class="active">Accueil</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                </ul>
            </nav>
            <section class="main_content">Section</section>
            <aside class="main_aside_left">Aside</aside>
            <aside class="main_aside_right">Aside2</aside>
            <footer class="main_footer">
                <ul>
                    <li><a href="#">Lien</a></li>
                    <li><a href="#">Lien</a></li>
                    <li><a href="#">Lien</a></li>
                </ul>
                <ul>
                    <li><a href="#">Lien</a></li>
                    <li><a href="#">Lien</a></li>
                    <li><a href="#">Lien</a></li>
                </ul>
                <ul>
                    <li><a href="#">Lien</a></li>
                    <li><a href="#">Lien</a></li>
                    <li><a href="#">Lien</a></li>
                </ul>
            </footer>
        </div>
    </body>
</html>
      2. Fichier CSS
        body{

font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    background-color: #e6bccd ;
}
.page {
    width: 960px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    border-radius: 4px;
    overflow: hidden;
}



header.main_header {
background-color: #29274c;
color: #d295bf;
width: 100%;
min-height: 80px;
order: 1;
font-family: 'Anton', sans-serif;
font-size: 2rem;
padding: 10px 20px ;
box-sizing: border-box;
}




header.main_header::first-letter {
color: #ffffff;
}



nav.main-nav {

background-color: #7e52a0;
    width: 100%;
    order: 1;
}
nav.main-nav ul {display: flex ;

justify-content: space-around;
margin: 10px;
    padding: 0px;
list-style:none;
}




nav.main-nav a {
    color: #ffffff ;
    text-decoration: none;
    background-color: #29274c ;
    display:block;
    min-width: 100px;
    padding: 5px 3px;
    border-radius: 4px;
    text-align: center;
}
nav.main-nav a.active, 
nav.main-nav a:hover {
    background-color: #d295bf;
    color: #29274c;
}


section.main_content {
    background-color: #ffffff;
width: 660px;
min-height: 200px;
order: 3;

box-sizing: border-box;
padding: 10px;
}




aside.main_aside_left,
aside.main_aside_right {
    background-color: #d295bf;
    color: #ffffff ;
    width: 150px;
    box-sizing: border-box;
    padding: 10px;
}
aside.main_aside_left{
    order: 2;
    border-right: 5px solid #7e52a0;
}
aside.main_aside_right{
    order: 4;
    border-left: 5px solid #7e52a0;;
}
footer.main_footer{
    background-color: #012a36;
    width: 100%;
    min-height: 40px;
    order: 5;
    display: flex;
}
footer.main_footer ul {
    width: 33%;
    list-style: none;
}
footer.main_footer a {
    color: #e6bccd;
    text-decoration: none;
    font-size: 0.9rem;
}
Le positionnement des éléments
Sommaire du cours CSS