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 la variación de la prueba de publicidad .
El componente Anuncio 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 se le puede dar formato para ayudar a verificar la ubicación. La variación de prueba se puede usar para producir anuncios de prueba que se pueden usar para probar el diseño.
Clase de variación de prueba de publicidad de interfaz de usuario semántica:
- prueba: esta clase se utiliza para hacer un anuncio de prueba del tamaño de un rectángulo.
Nota: si lo desea, puede ajustar el texto que se muestra para la ubicación de su anuncio de prueba cambiando el valor de texto de datos, y también puede cambiar el tamaño y la forma de cualquier anuncio.
Sintaxis:
<div class="ui test ad" data-text="Ad Unit"> ... </div>
El siguiente ejemplo ilustra la variación de prueba de anuncio de interfaz de usuario semántica:
Ejemplo 1:
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 Test Variation</h2> </center> <div class="ui small rectangle test ad" data-text="Ad Unit 1"> </div> <div class="ui small rectangle test ad" data-text="Ad Unit 2"> </div> </body> </html>
Producción:
Variación de prueba de publicidad de interfaz de usuario semántica
Ejemplo 2:
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 Test Variation</h2> </center> <div class="ui medium square test ad" data-text="Ad Unit 1"> </div> <div class="ui medium rectangle test ad" data-text="Ad Unit 2"> </div> </body> </html>
Producción:
Variación de prueba de publicidad de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/advertisement.html#test
Publicación traducida automáticamente
Artículo escrito por krishnanand3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA