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. La mejor parte de este marco es que crea diseños hermosos y receptivos, ya que contiene componentes semánticos preconstruidos.
Un anuncio se utiliza para mostrar el contenido de un tercero. Su objetivo es promocionar al tercero mostrando su contenido. Un patrocinador de partidos es un ejemplo de la forma en que se promociona el contenido de terceros. El nombre del patrocinador siempre se toma durante ese partido específico que se está jugando.
La interfaz de usuario semántica nos proporciona este componente publicitario que puede ser muy esencial en nuestro sitio web. Hay muchos tipos diferentes de anuncios que se pueden crear con la ayuda de la interfaz de usuario semántica.
Clase de tipo de botón de anuncio de interfaz de usuario semántica:
- button: Es una clase que se utiliza para crear un anuncio en forma de botón. Este botón puede tener diferentes formas como cuadrado, rectángulo, etc.
Sintaxis:
<div class="ui button test ad" data-text="..."> ... </div>
Ejemplo 1: en el siguiente programa, crearemos un solo botón de publicidad.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Semantic-UI Advertisement Button Type</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <br> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui big header"> Advertisement Button Type </div> <!--Advertisement Button--> <div class="ui button test ad" data-text="Ad Button"></div> </body> </html>
Producción:
Tipo de botón de anuncio de interfaz de usuario semántica
Ejemplo 2: en el siguiente programa, crearemos un solo botón de publicidad.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> </head> <body> <br> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui big header"> Normal Button </div> <!--Advertisement Button--> <div class="ui button test ad" data-text="Normal Button"> </div> <div class="ui big header"> Square Button </div> <div class="ui square button test ad" data-text="Square Button"> </div> <div class="ui big header"> Small Button </div> <div class="ui small button test ad" data-text="Small Button"> </div> <div class="ui big header"> Big Button </div> <div class="ui big button test ad" data-text="Big Button"> </div> </body> </html>
Producción:
Tipo de botón de anuncio de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/advertisement.html#button
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA