Variaciones del bloque de encabezado 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 encabezado de interfaz de usuario semántica proporciona un breve resumen del contenido y nos ofrece diferentes variaciones del encabezado, como variantes divididas, bloqueadas, adjuntas, flotantes, alineación de texto, coloreadas e invertidas. Aquí, en este artículo, conoceremos la variante Bloquear del encabezado.

Clase de variante de bloque divisor de variaciones de encabezado de interfaz de usuario semántica:

  • block: esta clase se usa para que el encabezado se pueda formatear para que aparezca dentro de un bloque de contenido.

Sintaxis:

<element class="ui block header">
  ...
</element >

Ejemplo: el siguiente ejemplo ilustra la variante del bloque de variaciones 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" />
  
  <style>
    div {
      margin-left: 15px;
      margin-right: 15px;
    }
  </style>
</head>
  
<body>
  <center>
    <h1 style="color:green">
      GeeksforGeeks
    </h1>
  
    <strong>
      Semantic UI Header Variations Block
    </strong>
    <br><br>
  </center>
  
  <div>
    <h1 class="ui block header">
      Geeksforgeeks
    </h1>
      
    <p>
      With the idea of imparting programming knowledge,
      Mr. Sandeep Jain, an IIT Roorkee alumnus started
      a dream, GeeksforGeeks. Whether programming excites
      you or you feel stifled, wondering how to prepare 
      for interview questions or how to ace data structures
      and algorithms, GeeksforGeeks is a one-stop solution.
    </p>
  </div>
</body>
  
</html>

Producción:

Semantic-UI Header Variations Divider Block Variant

Variaciones de encabezado de interfaz de usuario semántica Variante de bloque divisor

Referencia: https://semantic-ui.com/elements/header.html#block

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 *