Tipos de anuncios de interfaz de usuario semántica

La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos. La publicidad de interfaz de usuario semántica nos ofrece 10 tipos de anuncios publicitarios, unidades comunes, móvil, rectángulo, botón, rascacielos, pancarta, tablas de clasificación, panorama y netboard. En este artículo, conoceremos todo sobre ellos brevemente, tenemos artículos individuales para ellos.

Tipos de anuncios de IU semántica:

  • Anuncio: este tipo se utiliza para mostrar un anuncio estándar.
  • Unidades comunes: este tipo se usa para hacer anuncios de manera que puedan aparecer en tamaños de unidades de anuncios comunes.
  • Móvil: este tipo se utiliza para mostrar anuncios según las dimensiones del móvil.
  • Rectángulo: este tipo se utiliza para hacer un anuncio de prueba de rectángulo.
  • Botón : este tipo se usa para que el anuncio pueda usar el tamaño del bloque de anuncios de botón.
  • Rascacielos : este tipo se usa para que el anuncio pueda usar un tamaño de bloque de anuncios rascacielos.
  • Banner este tipo se usa para que el anuncio pueda usar el tamaño del bloque de anuncios de banner.
  • Tablas de clasificación: este tipo se utiliza para hacer un anuncio de prueba de tabla de clasificación.
  • Panorámica este tipo se utiliza para que el anuncio pueda utilizar el tamaño del bloque de anuncios panorámico.
  • Netboard este tipo se usa para que el anuncio pueda usar el tamaño del bloque de anuncios de netboard.

Sintaxis:

<div class="ui Advertisement-Type ad">
...
</div>

Los siguientes ejemplos ilustran los tipos de anuncios de IU semántica:

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Advertisement Types</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 Advertisement Type</strong>
    </center>
    <strong>Ad & Rectangle:</strong>
    <div class="ui medium rectangle test ad"
         data-text="Medium Rectangle">
    </div>
    <strong>Button:</strong>
    <div class="ui button test ad"
         data-text="Button">
    </div>
    <strong>Leaderboard:</strong>
    <div class="ui leaderboard test ad"
         data-text="Leaderboard">
    </div>
    <strong>Common Units:</strong>
    <div class="ui half page test ad"
         data-text="Half Page">
    </div>
</body>
</html>

Producción:

Semantic UI Advertisement Types

Tipos de anuncios de IU semántica

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic-UI Advertisement Types</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 Advertisement Type</strong>
    </center>
    <strong>Panorama:</strong>
    <div class="ui panorama test ad"
         data-text="Panorama">
    </div>
    <strong>Netboard:</strong>
    <div class="ui netboard test ad"
         data-text="Netboard ">
    </div>
    <strong>Banner:</strong>
    <div class="ui banner test ad"
         data-text="Banner">
    </div>
</body>
</html>

Producción:

Semantic UI Advertisement Types

Tipos de anuncios de IU semántica

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

Deja una respuesta

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