Maison  >  Article  >  interface Web  >  Comment écrire du texte CSS en bas

Comment écrire du texte CSS en bas

藏色散人
藏色散人original
2021-02-28 11:10:007241parcourir

Comment implémenter le texte CSS en bas : créez d'abord un nouveau fichier html et utilisez la balise div pour créer un module ; puis définissez l'attribut de classe du div sur con puis créez les styles du div et ; p éléments dans la balise css ; Enfin, définissez son attribut de position sur un positionnement absolu.

Comment écrire du texte CSS en bas

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Créez un nouveau fichier html, nommé test.html, pour expliquer comment créer le contenu en bas au milieu du div en CSS.

Comment écrire du texte CSS en bas

Dans le fichier test.html, utilisez la balise div pour créer un module et utilisez la balise p à l'intérieur pour créer une ligne de texte.

Comment écrire du texte CSS en bas

Définissez l'attribut de classe du div sur con, qui est utilisé pour le styliser en utilisant le CSS ci-dessous.

Comment écrire du texte CSS en bas

Dans le fichier test.html, créez des paramètres de style pour les éléments div et p dans la balise css respectivement. [Recommandé : "Tutoriel vidéo CSS"]

Comment écrire du texte CSS en bas

En CSS, stylisez le div avec le nom de la classe con . Définissez son attribut de position sur un positionnement absolu (position : absolute), une largeur sur 300 px (largeur : 300 px), une hauteur sur 300 px (hauteur : 300 px) et une couleur d'arrière-plan sur jaune (arrière-plan : jaune).

Comment écrire du texte CSS en bas

En CSS, stylisez l'élément p. Définissez son attribut position sur positionnement absolu (position:absolute), en bas du div (bottom:0), la largeur est de 100% (width:100%), et le texte est affiché au centre (text-align: centre).

Comment écrire du texte CSS en bas

Ouvrez le fichier test.html dans le navigateur et vérifiez l'effet du texte centré en bas du div.

Comment écrire du texte CSS en bas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn