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.
El encabezado Semantic-UI proporciona un breve resumen del contenido y puede contener 3 imágenes, íconos y subencabezados de contenido. El componente Contenido de la interfaz de usuario semántica es importante, ya que sin el encabezado/resumen, el procedimiento de búsqueda de contenido matará muchas veces. En este artículo, ahora hablaremos sobre el contenido de la imagen.
Clase de contenido de imagen de encabezado de interfaz de usuario semántica:
- image : Esta clase se utiliza para incluir la imagen en el encabezado.
Sintaxis: la forma y el tamaño de la imagen se pueden manipular
<img class="ui image" src="...">
Los siguientes ejemplos ilustran el contenido de la imagen del encabezado de la interfaz de usuario semántica:
Ejemplo 1: en este ejemplo, adjuntaremos una imagen como contenido de encabezado en forma de círculo.
HTML
<!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" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic-UI Header Image Content </strong> </center> <br> <div class="ui segment"> <strong class="ui header"> Geeksforgeeks: </strong> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220119210822/GFG-100x100.jpg" class="ui circular image"> <p> Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> </div> </body> </html>
Producción:
Contenido de la imagen del encabezado de la interfaz de usuario semántica
Ejemplo 2: en este ejemplo, adjuntaremos una imagen como contenido de encabezado en forma cuadrada.
HTML
<!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" /> </head> <body> <center> <h1 class="ui header green"> GeeksforGeeks </h1> <strong> Semantic-UI Header Image Content </strong> </center> <br> <div class="ui segment"> <strong class="ui header"> Geeksforgeeks: </strong> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220119210822/GFG-100x100.jpg" class="ui image"> <p> Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> </div> </body> </html>
Producción:
Contenido de la imagen del encabezado de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/header.html#image
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA