Correction Exercices en CSS le positionnement Série 02
Correction Exercices en CSS le positionnement Série 02
-
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
- Fichier CSS
<!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>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;
}