Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
El elemento de interfaz de usuario semántica nos ayuda a presentar grandes colecciones de contenido del sitio para su visualización. Un elemento puede contener cualquier contenido como imágenes, texto, encabezado, metadatos, enlace, descripción y calificaciones. En este artículo, aprenderemos sobre el enlace de contenido del elemento de la interfaz de usuario semántica . Un enlace puede aplicarse a imágenes, encabezados o contenido interno.
Clase de enlace de contenido de elemento de IU semántica: no hay una clase predefinida para hacer que el contenido del elemento se pueda vincular. Solo necesitamos poner ese contenido dentro de la etiqueta de anclaje con un atributo href válido.
Sintaxis:
<div class="ui items">
<div class="item">
<a class="..." href="">
...
</a>
</div>
</div>
El siguiente ejemplo ilustra el enlace de contenido del elemento de la interfaz de usuario semántica:
Ejemplo: En este ejemplo, usaremos la imagen y el contenido del encabezado como contenido del enlace.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1 style="color:green"> GeeksforGeeks </h1> <strong>Semantic UI Item Content Link</strong> <br><br> </center> <div class="ui items"> <div class="item"> <a class="ui small image" href="https://www.geeksforgeeks.org/"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </a> <div class="content"> <a class="header" href="https://www.geeksforgeeks.org/"> GeeksforGeeks </a> <div class="description"> <p> Free Tutorials, Millions of Articles, Live, Online and Classroom Courses , Frequent Coding ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> </div> </div> </div> </div> </body> </html>
Producción:
Enlace de contenido de elemento de IU semántica
Referencia: https://semantic-ui.com/views/item.html#link
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA