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 rectángulo publicitario.
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 usar un tamaño de bloque de anuncio de rectángulo común.
Clase de tipo de rectángulo de anuncio de interfaz de usuario semántica:
- rectángulo vertical: esta clase se utiliza para hacer un anuncio de prueba de rectángulo vertical.
- rectángulo pequeño: esta clase se utiliza para hacer un anuncio de prueba de rectángulo pequeño.
Sintaxis:
<div class="ui Rectangle-Type-Class test ad"> .. </div>
El siguiente ejemplo ilustra el tipo de rectángulo de anuncio de interfaz de usuario semántica:
Ejemplo 1: en este ejemplo, crearemos un anuncio de rectángulo vertical
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 Rectangle Type</h2> </center> <div class="ui vertical rectangle test ad" data-text="Vertical Rectangle"> </div> <div class="ui small rectangle test ad" data-text="Small Rectangle"> </div> </body> </html>
Producción:
Ejemplo 2: en este ejemplo, crearemos un pequeño rectángulo.
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 Rectangle Type</h2> </center> <div class="ui vertical small rectangle test ad" data-text="Vertical Rectangle"></div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/views/advertisement.html#rectangle