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 Banner. Podemos manipular el tipo de banner de publicidad.
Clase de banner publicitario de interfaz de usuario semántica:
- banner: esta clase se utiliza para crear anuncios normales de tipo banner.
- arriba: esta clase se utiliza para crear anuncios de tipo banner ancho, aquí la clase de banner es imprescindible con el.
- vertical: esta clase se utiliza para crear anuncios verticales delgados tipo banner.
- half: esta clase se utiliza para crear anuncios de tipo medio banner.
Sintaxis:
<div class="ui banner-class test ad"> .... </div>
Los siguientes ejemplos ilustran el tipo de banner publicitario de IU semántica:
Ejemplo 1: En este artículo, usaremos un banner normal y un banner superior.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Advertisement Banner 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 Banner Type</strong> </center> <strong>Banner:</strong> <div class="ui banner test ad" data-text="Banner"> </div> <strong>Top Banner:</strong> <div class="ui top banner test ad" data-text="Top Banner"> </div> </body> </html>
Producción:
Tipo de banner publicitario de interfaz de usuario semántica
Ejemplo 2: En este artículo usaremos banner vertical y medio.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Advertisement Banner 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 Banner Type</strong> </center> <strong>Vertical Banner:</strong> <div class="ui vertical banner test ad" data-text="Vertical Banner"> </div> <strong>Half Banner:</strong> <div class="ui half banner test ad" data-text="Half Banner"> </div> </body> </html>
Producción:
Tipo de anuncio de IU semántica
Referencia: https://semantic-ui.com/views/advertisement.html#banner
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA