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 su uso y tiene diferentes elementos para hacer que su sitio web se vea más sorprendente. En este artículo, aprenderemos sobre el contenido de la descripción de la tarjeta.
Está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar, y utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
Una tarjeta muestra el contenido del sitio web de manera similar a un naipe y puede contener una descripción con uno o más párrafos.
Tarjeta de IU semántica Descripción Clase de contenido:
- description: Esta clase se utiliza para establecer descripciones con uno o más párrafos.
Sintaxis:
<div class="ui card">
<div class="content">
..
<div class="description">
<p>....</p>
</div>
</div>
</div>
Ejemplo 1: el siguiente ejemplo ilustra el contenido de la descripción de la tarjeta de IU semántica.
HTML
<!DOCTYPE html> <html> <head> <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 Card Description Content</strong> <div class="ui card"> <div class="content"> <div class="header"> competitive programming </div> <div class="meta">2 days ago</div> <div class="description"> <p> Whether you are looking to be a programmer for a top company or wishing to top the charts of leading coding competitions, you have come to the right place! </p> <p> This live course will help you enhance your problem-solving skills, one code at a time. </p> </div> </div> </div> </center> </body> </html>
Producción:
Contenido de la descripción de la tarjeta de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo ilustra el contenido de la descripción de la tarjeta de IU semántica de 2 tarjetas.
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 {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 class="ui header green">GeeksforGeeks</h1>
<strong>Semantic UI Card Description Content</strong>
<br /><br />
<div class="ui cards">
<div class="ui card">
<div class="content">
<div class="header">
competitive programming
</div>
<div class="meta">2 days ago</div>
<div class="description">
<p>
Whether you are looking to be a
programmer for a top company or
wishing to top the charts of
leading coding competitions, you
have come to the right place!
</p>
<p>
This live course will help you
enhance your problem-solving
skills, one code at a time.
</p>
</div>
</div>
</div>
<div class="ui card">
<div class="content">
<div class="header">DSA course</div>
<div class="meta">3 days ago</div>
<div class="description">
<p>
A LIVE classroom program designed
for SDEs looking to switch to top
product-based companies. Mentored
by industry experts and complimentary
DSA course content made by the CEO,
practice questions, doubt assistance,
contests & more!
</p>
<p>
This live course will help you
enhance your problem-solving
skills, one code at a time.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Contenido de la descripción de la tarjeta de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/card.html#description
Publicación traducida automáticamente
Artículo escrito por volumezero9786 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA