Tipo de rascacielos de publicidad 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 el anuncio tipo Rascacielos.

Clases de rascacielos de anuncios de interfaz de usuario semántica:

  • rascacielos: esta clase se utiliza para crear un anuncio en tamaño de bloque de anuncios rascacielos.
  • ancho: esta clase se utiliza para hacer que los anuncios de rascacielos sean más anchos.

Sintaxis:

<div class="ui skyscraper test ad">
...
</div>

Los siguientes ejemplos ilustran el tipo de rascacielos de anuncios de IU semántica:

Ejemplo 1: En este ejemplo, usaremos el anuncio de un rascacielos.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Advertisement Skyscraper Type</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 skyscraper Type</strong>
    </center>
    <strong>Skyscraper :</strong>
    <div class="ui skyscraper test ad"
         data-text="Skyscraper">
    </div>
</body>
</html>

Producción:

Semantic UI Advertisement Skycrapper Type

Tipo de rascacielos de anuncio de interfaz de usuario semántica

Ejemplo 2: En este ejemplo, usaremos el ancho rascacielos.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI Advertisement Skyscraper Type</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 skyscraper Type</strong>
    </center>
    <strong>Wide Skyscraper :</strong>
    <div class="ui wide skyscraper test ad"
         data-text="wide Skyscraper">
    </div>
</body>
</html>

Producción:

Semantic UI Advertisement Skycrapper Type

Tipo de rascacielos de anuncio de interfaz de usuario semántica

Referencia: https://semantic-ui.com/views/advertisement.html#skyscraper

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 *