Vidéo: Tutoriel CSS : Flexbox 2025
Pour choisir une disposition particulière dans CSS3 à partir de Dynamic Drive, cliquez sur son lien. Vous voyez une page qui contient une meilleure présentation de la mise en page en haut. Le texte contenu dans la mise en page est rempli de sorte que vous puissiez mieux juger de la façon dont la mise en page se sent avec le contenu. Vous pouvez essayer de redimensionner le navigateur pour voir comment la mise en page sera différente.
En bas de la même page, vous voyez le CSS utilisé pour créer l'apparence de la page. Le code apparaît dans une balise CSS interne, mais vous pouvez facilement le déplacer vers un fichier CSS externe si vous le souhaitez.
Le code fournit une page entière que vous pouvez utiliser pour tester. Les étapes suivantes indiquent comment accéder au code.
-
Cliquez sur Développer.
Vous voyez la zone de code de la page se développer pour afficher tout le code utilisé pour créer la mise en page.
-
Cliquez sur Sélectionner un code.
La page sélectionne tout le code dans la zone de code pour vous.
-
Cliquez avec le bouton droit sur le code en surbrillance et choisissez Copier dans le menu contextuel.
La technique précise que vous utilisez varie selon le navigateur et la plate-forme. Par exemple, vous pouvez appuyer sur Ctrl + C sur les systèmes Windows ou Commande + C sur les systèmes Mac pour effectuer la même tâche. L'idée est de placer le code dans le Presse-papiers.
-
Ouvrez votre éditeur et collez le contenu du presse-papiers dans un nouveau fichier.
Vous voyez le même exemple que celui affiché sur le site Dynamic Drive.
-
Enregistrez le nouveau fichier.
Utilisez un nom de fichier qui représente la mise en page sélectionnée.
-
Chargez le fichier dans votre navigateur.
Vous voyez l'exemple Dynamic Drive complet pour la mise en page.
Pour utiliser la mise en page sur votre propre page, copiez simplement le contenu de la balise sur la page que vous créez. Il est prudent d'ignorer le script à la fin de la section - son seul but est de remplir la page avec des exemples de données.
Cependant, vous devriez noter les styles utilisés avec les éléments dans la mise en page. Ces styles et leurs tags associés fournissent la disposition réelle que vous voyez à l'écran.
