Contenido del encabezado de la 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 encabezado Semantic-UI proporciona un breve resumen del contenido y puede contener 3 imágenes, íconos y subencabezados de contenido. El componente Contenido de la interfaz de usuario semántica es importante, ya que sin el encabezado/resumen, el procedimiento de búsqueda de contenido matará muchas veces. En este artículo, ahora hablaremos sobre los diferentes contenidos del encabezado.

Contenido del encabezado de la interfaz de usuario semántica: en el encabezado del encabezado de la interfaz de usuario semántica tenemos 3 contenidos como se menciona y describe a continuación.

Imagen : se utiliza para contener una imagen.
Icono : se utiliza para contener un icono.
Subtítulo : Esto se utiliza para contener subtítulos.

Sintaxis:

<element class="ui header">
  <img src="...">
  <i class="...icon"></i>
  <element class="ui subheader">
  ...
  </element >
</element >

Ejemplo 1: El siguiente ejemplo ilustra el contenido del encabezado de la interfaz de usuario semántica:

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 Header Content
    </strong>
  </center>
  <br>
  <div class="ui segment">
    <strong class="ui header">
      Geeksforgeeks:<sub>header</sub>
    </strong>
     
<p>
        Free Tutorials, Millions of Articles, Live,
        Online and Classroom Courses ,Frequent Coding
        Competitions ,Webinars by Industry Experts,
        Internship opportunities and Job Opportunities.
    </p>
 
 
    <br>
    <i class="book icon"></i>
    <strong class="ui subheader">
      A Computer Science Portal for
      Geeks<sub>Subheader</sub>
    </strong>
  </div>
</body>
 
</html>

Producción:

Contenido del encabezado de la interfaz de usuario semántica

Ejemplo 2: El siguiente ejemplo ilustra el contenido del encabezado de la interfaz de usuario semántica con la imagen:

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 Header Content
    </strong>
  </center>
  <br>
  <div class="ui segment">
    <strong class="ui header">
      Geeksforgeeks:<sub>header</sub>
    </strong>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220119210822/GFG-100x100.jpg"
         class="ui circular image">
     
<p>
        Free Tutorials, Millions of Articles, Live,
        Online and Classroom Courses ,Frequent Coding
        Competitions ,Webinars by Industry Experts,
        Internship opportunities and Job Opportunities.
    </p>
 
 
    <br>
    <i class="book icon"></i>
    <strong class="ui subheader">
      A Computer Science Portal for
      Geeks<sub>Subheader</sub>
    </strong>
  </div>
</body>
 
</html>

Producción:

Contenido del encabezado de la interfaz de usuario semántica

Referencia: https://semantic-ui.com/elements/header.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

HTML

HTML

Deja una respuesta Cancelar la respuesta