cours_html_css/Position.html at master · jeuneyannick/cours_html_css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="fr"><!-- signifier la langue dans laquelle est écrite la page !-->
<head><!-- toutes les informations relatives au document, le nom de la page, le nom de fichier à notre fichier, la description de notre page, lien vers des google font, liens vers javascript,insertion des fabicons !-->
    <meta charset="UTF-8">
    <!-- pour l'encodage, gérer les accents etc !-->
    <meta name="description" content="mes positions en HTML/CSS"> <!-- Meta= donnée; valeur= description ; éléments récupérés par google !-->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Position</title>
    <link rel="stylesheet" href="css/style.css"> <!-- Link c'est une information !-->
    <link href="https://fonts.googleapis.com/css?family=Lato&Lemonada&Oswald" rel="stylesheet">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <!-- les moteurs de recherche s'en servent pour les recherches !-->
</head>
<body> <!-- Corps du document !-->
    <header>
        <div id="logo">
            <a href="index.html"><img src="img/logo.png" alt="logo"></a>
        </div>
        <div id="slogan">
            <h1>Mon premier site en HTML/CSS</h1>
        </div>
        <div id="reseauSociaux">
            <i class="fa fa-facebook-official" aria-hidden="true"></i>
            <i class="fa fa-instagram" aria-hidden="true"></i>
        </div>

    </header>

    <nav>
        <a href="index.html">Structure</a>
        <a href="texte.html">Texte</a>
        <a href="selecteurs.html">Selecteurs</a>
        <a href="images.html">Image</a>
        <a href="Position.html" class="couleur">Position</a>
        <a href="tableau.html">Tableau</a>
        <a href="listes.html">Liste</a>
        <a href="zoning.html">Zoning</a>
        <a href="ancres.html">Ancres</a>
        <a href="Multimedia.html">Multimedia</a>
        <a href="Animations.html">Animations</a>
    </nav>

    <main>
        <h2>Position</h2>

        <section>
            <h3>Centrer un élément de type block</h3>
            <div class="centre"></div>
        </section>

        <section>
            <h3>Position absolute</h3>
            <div class="absolute"></div>
        </section>

        <section>
            <h3>Position relative</h3>
            <div class="relative">
                <div></div>
            </div>

        </section>
        <section>
            <h3>Position fixed</h3>
            <p>Bouton retour vers le haut</p>
            <button type="button"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i></button>
        </section>
        <section>
            <h3>Le pourcentage</h3>
            <div class="trente">30%</div>
            <div class="cinquante">50%</div>
            <div class="cent">100%</div>
        </section>

        <section>
            <h3>L'attribut float</h3>
            <div class="carre">1</div>
            <div class="carre">2</div>
            <div class="carre">3</div>
            <div class="carre">4</div>
            <div class="clear"></div>
            <div class="carre">5</div>
            <div class="carre">6</div>
            <div class="carre">7</div>
            <div class="clear"></div>
            <div class="carre">8</div>
            <div class="carre">9</div>
            <div class="clear"></div>
            <div class="carre">10</div>
            <div class="clear"></div>
        </section>

        <section>
            <h3>Exercice sur le float</h3>
            <div class="head"></div>
            <div class="carrey bleu"></div>
            <div class="carrey rouge"></div>
            <div class="carrey jaune"></div>
            <div class="carrey marron"></div>
            <div class="head clear"></div>

        </section>
        <section>
            <h3>Flexbox</h3>
            <article class="flex">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
            </article>
        </section>


    </main>
    <footer>
        <!-- Zone du bas, ex : liens administratifs, mentions légales, plan du site, CGU, CGV, contact, copyright etc !-->
    </footer>
</body>
</html>