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. En este artículo, vamos a aprender sobre el tipo de unidad común de publicidad.
Está equipado con componentes semánticos preconstruidos que ayudan a crear diseños receptivos utilizando HTML fácil de usar, y utiliza CSS y JQuery predefinidos para incorporar diferentes marcos. Un anuncio muestra contenido promocional de terceros y puede aparecer en tamaños de bloques de anuncios comunes.
Clase de tipo de unidad común de anuncio de interfaz de usuario semántica:
- rectángulo mediano: esta clase se utiliza para crear un lugar vacante del tamaño de un rectángulo para un anuncio.
- banner: Esta clase se utiliza para hacer un lugar vacante tipo banner para un anuncio.
- leaderboard: esta clase se utiliza para crear un lugar vacante de tipo leaderboard para un anuncio.
- rectángulo grande: esta clase se utiliza para crear un lugar vacante de tipo rectángulo grande para un anuncio.
- media página: esta clase se utiliza para hacer un lugar vacante de tipo media página para un anuncio.
Sintaxis:
<div class="ui Common-Unit-Type-Class test ad"> ... </div>
El siguiente ejemplo ilustra el tipo de unidad común de anuncio de interfaz de usuario semántica.
Ejemplo 1: en este ejemplo, crearemos los 5 tipos de anuncio de unidad común.
HTML
<!DOCTYPE html> <html> <head> <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> <h2>Semantic UI Advertisement Common Unit Type</h2> </center> <div class="ui medium rectangle test ad" data-text="Medium Rectangle"> </div> <div class="ui banner test ad" data-text="Banner"> </div> <div class="ui leaderboard test ad" data-text="Leaderboard"> </div> <div class="ui large rectangle test ad" data-text="Large Rectangle"> </div> <div class="ui half page test ad" data-text="Half Page"> </div> </body> </html>
Producción:
Tipo de unidad común de anuncio de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, crearemos un solo anuncio de tamaño mediano.
HTML
<!DOCTYPE html> <html> <head> <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> <h2>Semantic UI Advertisement Common Unit Type</h2> </center> <div class="ui medium rectangle test ad" data-text="Medium Rectangle"> </div> </body> </html>
Producción:
Tipo de unidad común de anuncio de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/advertisement.html#common-units