CSS

Correction Exercices en CSS le positionnement Série 02

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

0 chapitres 0 QCM Accès gratuit

Commencer Retour aux cours

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

Application 01

Énoncé
- Vous pouvez visualiser l'énoncé de l'exercice

Solution

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>

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

Cours CSS

Correction Exercices en CSS le positionnement Série 02

Sommaire du cours

Autres catégories

Objectifs

Application 01

Énoncé

Solution

Cours CSS