Back

Correction Exercices en CSS le positionnement Série 01

Correction Exercices en CSS le positionnement Série 01

  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;
          }



Riadh HAJJI

Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement