Correction Exercices en CSS le positionnement Série 01
Correction Exercices en CSS le positionnement Série 01
-
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
-
Application 02
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’exercice
-
Solution
-
Application 03
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’exercice
-
Solution
-
Application 04
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’exercice
-
Solution
- Fichier HTML
- Fichier CSS
-
Application 05
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’exercice
-
Solution
- Fichier HTML
- Fichier CSS
<!DOCTYPE html>
<html>
<head>
<title>Exercice</title>
<meta charset="UTF-8">
<link href="style5.css" rel="stylesheet"
type="text/css"/>
</head>
<body>
<header>
<code><header></code>
</header>
<section>
<code><section> <br> float: left;</code>
</section>
<section>
<code><section> <br> float: left;</code>
</section>
<section>
<code><section> <br> float: left;</code>
</section>
<footer>
<code><footer></code>
</footer>
</body>
</html>
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;
}
<!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;
}