Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub. En este artículo, discutiremos Primer CSS Footer.
El elemento de pie de página del menú Seleccionar se puede definir agregando la clase SelectMenu-footer en el elemento inferior para mostrar la información adicional.
Primera clase de pie de página CSS:
- SelectMenu-footer: esta clase se utiliza para agregar elementos de pie de página adicionales a la lista del menú.
Sintaxis:
<footer class="SelectMenu-footer">
...
</footer>
Ejemplo 1: a continuación se muestra el ejemplo que ilustra el uso de Primer CSS Footer.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Footer</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <div class="pl-12" > <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Footer</h3> <details class="details-reset details-overlay mt-3" open> <summary class="btn" aria-haspopup="true"> Choose any Course </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <header class="SelectMenu-header"> <h3 class="SelectMenu-title"> GeeksforGeeks Courses </h3> </header> <div class="SelectMenu-list"> <button class="SelectMenu-item" role="menuitem"> DSA Self-Paced </button> <button class="SelectMenu-item" role="menuitem"> Complete Interview Preparation </button> <button class="SelectMenu-item" role="menuitem"> C++ STL </button> <button class="SelectMenu-item" role="menuitem"> Fork Python </button> </div> <footer class="SelectMenu-footer"> © GeeksforGeeks </footer> </div> </div> </details> </div> </body> </html>
Producción:
Primer pie de página CSS
Ejemplo 2: Este es otro ejemplo que demuestra el uso de Primer CSS Footer.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Footer</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> </head> <body> <div class="pl-12" > <h1 style="color:green">GeeksforGeeks</h1> <h3>Primer CSS Footer</h3> <details class="details-reset details-overlay mt-3" open> <summary class="btn" aria-haspopup="true"> Choose any Events </summary> <div class="SelectMenu"> <div class="SelectMenu-modal"> <header class="SelectMenu-header"> <h3 class="SelectMenu-title"> GeeksforGeeks events </h3> </header> <div class="SelectMenu-list"> <button class="SelectMenu-item" role="menuitem"> Interview Series #46 </button> <button class="SelectMenu-item" role="menuitem"> Job-A-Thon 8: Hiring Challenge </button> <button class="SelectMenu-item" role="menuitem"> Get Hired with GeeksforGeeks at SuperK </button> <button class="SelectMenu-item" role="menuitem"> Bi-Wizard School Coding Tournament 4.0 </button> </div> <footer class="SelectMenu-footer"> © GeeksforGeeks </footer> </div> </div> </details> </div> </body> </html>
Producción:
Primer pie de página CSS
Referencia: https://primer.style/css/components/select-menu#footer
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA