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:
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:
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