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. Utiliza una clase para agregar CSS a los elementos.
El anuncio muestra contenido promocional de terceros.
Así es como se ve un simple código de publicidad.
<HTML>
<head>
<title>Semantic UI</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<div class="ui banner ad">
<!-- Banner
<ins class="adsbygoogle"
style="display:inline-block;width:468px;height:60px"
data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
data-ad-slot="XXXXXXXXXXXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
!-->
</div>
</div>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</body>
</html>
Ejemplo 1: este ejemplo crea anuncios de diferentes tamaños.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <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> </body> </html>
Producción:
Puede agregar clase 'half page'en lugar de banner o cualquier anuncio grande de media página.
Ejemplo 2: anuncio del tamaño de un rascacielos.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <div class="ui skyscraper test ad" data-text="Skyscraper"> </div> </div> </body> </html>
Puede agregar la clase «Anuncio de prueba de rascacielos ancho de interfaz de usuario» para hacer que el rascacielos sea ancho.
Producción:
Ejemplo 3: anuncio de tamaño de banner
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div style="margin-top: 10px" class="ui container"> <div class="ui banner test ad" data-text="Banner"> </div> <div class="ui vertical banner test ad" data-text="Vertical Banner"> </div> <div class="ui top banner test ad" data-text="Top Banner"> </div> </div> </body> </html>
Producción:
Ejemplo 4: anuncio de tamaño de tabla de clasificación
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div style="margin-top: 10px" class="ui container"> <div class="ui leaderboard test ad" data-text="Leaderboard"> </div> <div class="ui large leaderboard test ad" data-text="Large Leaderboard"> </div> <div class="ui billboard test ad" data-text="Billboard"> </div> </div> </body> </html>
Producción:
Ejemplo 5: tamaño de la red
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div style="margin-top: 10px" class="ui container"> <div class="ui netboard test ad" data-text="Netboard"> </div> </div> </body> </html>
Producción:
Ejemplo 6: anuncio centrado
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div style="margin-top: 10px" class="ui container"> <div class="ui centered banner test ad"></div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA