Encabezado de contenido de elemento de interfaz de usuario semántica

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 contenido del elemento de la interfaz de usuario semántica nos ofrece diferentes contenidos como imagen, contenido, encabezado, metadatos, enlace, descripción, contenido adicional y calificación. En este artículo, discutiremos y aprenderemos sobre el contenido del encabezado que juega un papel importante en el contenido del elemento.

La clase de encabezado de contenido de elemento de interfaz de usuario semántica se usa para crear el encabezado de un elemento, que es una de las cosas más requeridas en el contenido.

Clase de encabezado de contenido de elemento de interfaz de usuario semántica:

  • header: Esta clase se utiliza para crear el encabezado de los artículos.

Sintaxis:

<a class="header">...</a>

Ejemplo: El siguiente ejemplo ilustra el encabezado de contenido del elemento de la interfaz de usuario semántica. Esto demuestra un elemento con un logotipo de imagen utilizando la clase de elemento con las clases de encabezado , contenido y descripción .  

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic-UI Item Content Header</title>
  
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
          
        <strong>Semantic-UI Item Content Header</strong>
        <br><br>
    </center>
  
    <div class="ui items">
        <div class="item">
            <a class="ui small image">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png">
            </a>
  
            <div class="content">
                <a class="header">GeeksforGeeks</a>
                <div class="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>
        </div>
    </div>
</body>
  
</html>

Producción:

Semantic-UI Item Content Header

Encabezado de contenido de elemento de interfaz de usuario semántica

Referencia: https://semantic-ui.com/views/item.html#header

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *