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 elemento de interfaz de usuario semántica presenta una gran colección de tipos de datos similares en un sitio web. El elemento puede contener una imagen, encabezado, descripción, botones, fecha, etc. El elemento es la colección de elementos en la interfaz de usuario semántica.
La variación dividida de elementos de la interfaz de usuario semántica ayuda a dividir los elementos para distinguirlos más claramente. Esto ayuda a separar elementos agrupados. Aparece una línea divisoria entre cada elemento para distinguirlos correctamente.
Clases de variación divididas de elementos de interfaz de usuario semántica:
- dividido : esta clase se agrega al contenedor de elementos y luego se coloca una línea divisoria entre cada componente.
Sintaxis : agregue la clase dividida al contenedor de elementos para dividir los elementos de la siguiente manera:
<div class="ui divided items">
...
</div>
Ejemplo : en el siguiente ejemplo, hemos creado los elementos divididos utilizando la clase dividida .
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet"
/>
<style>
body {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<div class="ui container">
<center>
<div class="ui header green">
<h1> GeeksforGeeks </h1>
</div>
<strong> Semantic UI Item Divided Variation </strong>
</center>
<div class="ui divided items">
<div class="item">
<div class="ui small image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"
/>
</div>
<div class="middle aligned content">
<div class="header">
Data Structures and Algorithms
</div>
<div class="meta">
<i class="like icon"></i>
<span class="likes">
31 Likes
</span>
</div>
</div>
</div>
<div class="item">
<div class="ui small image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220204210810/avatar-200x200.png"
/>
</div>
<div class="middle aligned content">
<div class="header">
Machine Learning
</div>
<div class="meta">
<i class="favorite icon"></i>
<span class="likes">
123 Favourites
</span>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Variación dividida del elemento de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/views/item.html#divided
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA