Pie de pagina html ejemplos
tamaño del pie de página html
El color de fondo se establece mediante la clase CSS .bg-light. Puede establecer su propio color eligiendo de la paleta de colores MDB o estableciendo un color completamente personalizado a través de CSS en línea, por ejemplo style=»background-color: #9933CC;»
También aplicamos un fondo oscuro utilizando la clase .bg-dark. Con esta configuración, es necesario utilizar .text-white para la tipografía y los enlaces, .btn-outline-light para los botones y .form-white para el formulario.
Como se mencionó anteriormente – el color de fondo se establece a través de la clase CSS .bg-light. Puede establecer su propio color eligiendo de la paleta de colores MDB o estableciendo un color completamente personalizado a través de CSS en línea, por ejemplo style=»background-color: #9933CC;»
pie de página simple html
Este método utiliza un «truco» colocando un pseudo-elemento ::after en el cuerpo, y configurándolo para que tenga la altura exacta del pie de página, de modo que ocupe exactamente el mismo espacio que el pie de página, de modo que cuando el pie de página se posicione de forma absoluta sobre él, parezca que el pie de página está realmente ocupando espacio y se eliminen los efectos negativos de su posicionamiento absoluto (por ejemplo, pasar por encima del contenido del cuerpo)
Esa es la única modificación que tienes que hacer en el HTML, añadir ese div con la clase «allButFooter». Lo hice con todas las páginas, las que eran tan cortas que sabía que el pie de página no se pegaría al fondo, y también las páginas lo suficientemente largas como para saber que tenía que hacer scroll. Hice esto, para poder ver que funciona bien en el caso de que el contenido de una página sea dinámico.
Eso es todo lo que hice, y me funcionó perfectamente. No lo he probado en todos los navegadores, sólo en Firefox, Chrome y Edge, y los resultados fueron los que quería. El pie de página se pega a la parte inferior, y no hay que meterse con el z-index, la posición o cualquier otra propiedad. La posición de cada elemento de mi documento era la posición por defecto, no la cambié a absoluta ni fija ni nada.
ejemplos de css de pie de página html
Este método de abajo utiliza un «truco» colocando un pseudo-elemento ::after en el cuerpo, y configurarlo para que tenga la altura exacta del pie de página, de modo que ocupará exactamente el mismo espacio que el pie de página, de modo que cuando el pie de página se posicione de forma absoluta sobre él, parecerá que el pie de página está realmente ocupando espacio y eliminará los efectos negativos de su posicionamiento absoluto (por ejemplo, pasar por encima del contenido del cuerpo)
Esa es la única modificación que tienes que hacer en el HTML, añadir ese div con la clase «allButFooter». Lo hice con todas las páginas, las que eran tan cortas que sabía que el pie de página no se pegaría al fondo, y también las páginas lo suficientemente largas como para saber que tenía que hacer scroll. Hice esto, para poder ver que funciona bien en el caso de que el contenido de una página sea dinámico.
Eso es todo lo que hice, y me funcionó perfectamente. No lo he probado en todos los navegadores, sólo en Firefox, Chrome y Edge, y los resultados fueron los que quería. El pie de página se pega a la parte inferior, y no hay que meterse con el z-index, la posición o cualquier otra propiedad. La posición de cada elemento de mi documento era la posición por defecto, no la cambié a absoluta ni fija ni nada.
ejemplo de pie de página
En las imágenes anteriores, hay una sección de pie de página que contiene información de la empresa con enlaces sociales, así como datos de contacto como el lugar, el número de teléfono y la dirección de correo electrónico. También hay un formulario de suscripción, en el que un cliente puede suscribirse introduciendo un ID de correo electrónico.
También se puede ver una sección de pie de página para la versión móvil. El pie de página se utiliza para navegar de una página a otra. Hay diferentes maneras de crear una sección de pie de página, una de las cuales es la forma en que la hemos diseñado.
Para crear esta pequeña tarea (Responsive Footer Section). Necesitas crear dos archivos. Los dos archivos son index.html y otro es un archivo style.css. Recuerda que cuando crees un archivo HTML no olvides añadir la extensión .html en el archivo HTML y la extensión .css en el archivo de estilo.