El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
El anuncio de IU semántica ayuda a crear contenedores para mostrar anuncios de servicios de terceros como Google Ads, Media.net, etc. El elemento Anuncio ayuda a dar una forma adecuada utilizando solo clases HTML.
Anuncio de IU semántica El tipo móvil se usa para dispositivos móviles que pueden usar tamaños de anuncios comunes. Los anuncios solo serán visibles para los dispositivos móviles y se ocultarán cuando el dispositivo se convierta en una computadora de escritorio.
Anuncio de interfaz de usuario semántica Clases de tipo móvil:
- móvil : agregue esta clase antes de cualquier nombre de anuncio y el anuncio se mostrará de acuerdo con las dimensiones móviles.
Sintaxis : agregue el móvil antes del nombre del anuncio y el anuncio se modificará en consecuencia.
<div class="ui mobile banner ad" data-text="Mobile Banner Ad">
<!-- Ad code -->
</div>
Ejemplo : en el siguiente ejemplo, tenemos diferentes tipos de anuncios para móviles.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
body {
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<center>
<div class="ui header green">
<h1> GeeksforGeeks </h1>
</div>
<strong> Semantic UI Advertisement Mobile type</strong>
</center>
<div class="ui segment">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<div class="ui mobile leaderboard test ad"
data-text="Mobile Leaderboard Ad"></div>
<div class="ui mobile banner test ad"
data-text="Mobile Banner Ad">
</div>
<div class="ui mobile large rectangle test ad"
data-text="Large Rectangle Ad">
</div>
<div class="ui mobile medium rectangle test ad"
data-text="Medium Rectangle Ad">
</div>
<div class="ui mobile small rectangle test ad"
data-text="Small Rectangle Ad" ></div>
<div class="ui mobile half page test ad"
data-text="Half Page Ad">
</div>
</div>
</body>
</html>
Producción:
Anuncio de interfaz de usuario semántica tipo móvil
Referencia: https://semantic-ui.com/views/advertisement.html
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA