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. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
Una imagen de interfaz de usuario semántica es similar a las imágenes utilizadas en los documentos HTML . Una imagen es una representación gráfica de algún objeto. La interfaz de usuario semántica ofrece 2 tipos de imágenes. Estos son Image y Image Link.
El enlace de la imagen se usa para agregar enlaces a las imágenes, de modo que cuando se haga clic en la imagen, redirigirá la página a la ruta especificada.
Clase de tipo de enlace de imagen de interfaz de usuario semántica: no hay ninguna clase para la que necesitemos colocar la imagen dentro de la etiqueta de anclaje.
Nota: para esta imagen, debemos incluir la clase de imagen dentro de la etiqueta de anclaje. También podemos definir el tamaño también.
Sintaxis:
<a href="..." class="ui image">
<img src="...">
</a>
Ejemplo 1: el siguiente código demuestra el tipo de enlace de imagen. Cuando ejecutemos el código dado y hagamos clic en la imagen, seremos redirigidos al sitio web de GeeksforGeeks.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic-UI Label Image Content</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<strong> Semantic UI Image Link Type </strong>
<br /><br/>
<a href="https://www.geeksforgeeks.org/"
class="ui medium image">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
</a>
</body>
</html>
Producción:
Tipo de enlace de imagen de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra el tipo de enlace de imagen de varias imágenes en forma de lista .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic-UI Label Image Content</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
body
{
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<strong> Semantic UI Image Link Type </strong>
<br/><br/>
<ol>
<li>
<a href="https://www.geeksforgeeks.org/"
class="ui medium image">
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
height="100"
width="100"/>
</a>
</li>
<li>
<a href="https://www.geeksforgeeks.org/"
class="ui medium image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190809013546/gfg_350X350.png"
height="100"
width="100"/>
</a>
</li>
</ol>
</body>
</html>
Producción:
Tipo de enlace de imagen de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/image.html#image-link
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA