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.
Las tarjetas en la interfaz de usuario semántica son una forma de representar el contenido web como si fueran naipes. Usando Semantic UI, podemos representar la información en forma de tarjetas de una manera muy simple. La interfaz de usuario semántica proporciona tarjetas en muchas variaciones y muestra diferentes tipos de contenido. Proporciona una tarjeta que incluye un encabezado que es el contenido del encabezado de la tarjeta.
En este artículo, conoceremos el contenido del encabezado de la tarjeta y los conocimientos para implementarlo mediante ejemplos de código. La tarjeta en la que se incluye el encabezado se conoce como contenido de encabezado de tarjeta. El diseño del contenido del encabezado de la tarjeta puede contener lo siguiente.
Encabezado de tarjeta de IU semántica Clase de contenido:
- header: Se utiliza para establecer el encabezado de la tarjeta.
Sintaxis:
<div class="card">
<div class="content">
<div class="header">
....
</div>
</div>
</div>
Ejemplo: en la tarjeta, incluya un div HTML que contenga el contenido de la clase y, para el encabezado, incluya el encabezado de la clase , para la descripción, use la descripción de la clase y, para obtener información adicional, use el nombre de la clase meta.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<center>
<h1 class="header ui green">GeeksforGeeks</h1>
<strong>Semantic UI Card header content</strong>
</center><br>
<div class="ui cards">
<div class="card">
<div class="content">
<div class="header">Interviews</div>
<div class="meta">
A website for interview preparation</div>
<div class="description">
As the placement season is back,
GeeksforGeeks is here to help you
crack the interview.
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Contenido del encabezado de la tarjeta de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/views/card.html#header
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA