La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
El contenido del elemento de la interfaz de usuario semántica nos ofrece 8 tipos de contenido que se pueden usar como un elemento en la interfaz de usuario semántica, como imagen, contenido, encabezado, metadatos, enlace, descripción, contenido adicional y calificación. Para cada tipo de contenido, tenemos diferentes artículos.
Contenido del elemento de la interfaz de usuario semántica:
- Imagen: Esto se usa para agregar el contenido de la imagen en el elemento.
- Contenido: Esto se utiliza para agregar el contenido en el artículo.
- Encabezado : se utiliza para agregar el contenido del encabezado en el artículo.
- Metadatos: Esto se utiliza para agregar el contenido de metadatos en el elemento.
- Enlace: Esto se utiliza para agregar el contenido del enlace en el artículo.
- Descripción: Esto se usa para agregar el contenido de la descripción en el artículo.
- Contenido Extra: Esto se utiliza para agregar el contenido extra en el Elemento.
- Calificación: Esto se usa para agregar el contenido de calificación en el artículo.
Sintaxis:
<div class="ui item-variations-class item-type-class">
<div class="item">
<div class=" item-content-class">
..
</div>
</div>
</div>
Los siguientes ejemplos ilustran el contenido del elemento de la interfaz de usuario semántica:
Ejemplo 1: En este ejemplo usaremos 4 contenidos como imagen, encabezado, contenido y contenido de metadatos.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">GeeksforGeeks</h1> <strong>Semantic-UI Item Content</strong> </center> <br><br> <div class="ui divided items container"> <div class="item"> <div class="image" title="Image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </div> <div class="content" title="Header, Content"> <a class="ui header green"> Geeksforgeeks </a> </div> <div class="meta" title="Metadata"> <span class="estd">Estd: 2009</span> </div> </div> </div> </body> </html>
Producción:
Contenido del elemento de la interfaz de usuario semántica
Ejemplo 2: En este ejemplo también cubrimos otro contenido.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui header green">GeeksforGeeks</h1> <strong>Semantic-UI Item Content</strong> </center> <br><br> <div class="ui divided items container"> <div class="item"> <div class="image" title="Image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"> </div> <div class="content" title="Header, Content & Link"> <i class="heart icon" title="Rating"></i> <a class="ui header green" href="https://www.geeksforgeeks.org/"> Geeksforgeeks </a><br><br> <div class="description" title="Description"> <p> This is where GeeksforGeeks comes into picture - A computer science portal for geeks, by geeks. ... GeeksforGeeks. </p> </div> </div> <div class="meta" title="Metadata"> <span class="estd">Estd: 2009</span> </div> </div> <div class="description" title="Description"> <p> Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> </div> </div> </body> </html>
Producción:
Contenido del elemento de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/item.html
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA