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 de interfaz de usuario semántica proporciona un breve resumen del contenido y nos ofrece diferentes variaciones del encabezado, como variantes divididas, bloqueadas, adjuntas, flotantes, alineación de texto, coloreadas e invertidas. Aquí, en este artículo, conoceremos la variante adjunta del encabezado.
Variaciones de encabezado de interfaz de usuario semántica Clase de variante adjunta del divisor:
- adjunto: esta clase se usa para que el encabezado se pueda adjuntar a otro contenido, como un segmento.
- adjunto superior: esta clase se usa para que el encabezado se pueda adjuntar encima del otro contenido.
- adjunto en la parte inferior: esta clase se usa para que el encabezado se pueda adjuntar en la parte inferior del otro contenido.
Sintaxis:
<element class="ui block header">
...
</element>
Ejemplo 1:
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"/>
<style>
div {
margin-left: 15px;
margin-right: 15px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Semantic UI Header Variations Attached</strong>
<br><br>
</center>
<div>
<h3 class="ui attached header">
Geeksforgeeks<sub>Attached</sub>
</h3>
<div class="ui attached segment">
<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>
</div>
</body>
</html>
Producción:
Variaciones de encabezado de interfaz de usuario semántica Divisor Variante adjunta
Ejemplo 2: el siguiente ejemplo ilustra la variante adjunta de variaciones de encabezado de interfaz de usuario semántica
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"/>
<style>
div {
margin-left: 15px;
margin-right: 15px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Semantic UI Header Variations Attached</strong>
<br><br>
</center>
<div>
<h3 class="ui top attached header">
Geeksforgeeks<sub>Top Attached</sub>
</h3>
<div class="ui attached segment">
<p>
With the idea of imparting programming knowledge,
Mr. Sandeep Jain, an IIT Roorkee alumnus started
a dream, GeeksforGeeks. Whether programming excites
you or you feel stifled, wondering how to prepare
for interview questions or how to ace data structures
and algorithms, GeeksforGeeks is a one-stop solution.
</p>
</div>
<h3 class="ui attached header">
Geeksforgeeks<sub>Attached</sub>
</h3>
<div class="ui attached segment">
<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>
<h3 class="ui bottom attached header">
Geeksforgeeks<sub>Bottom Attached</sub>
</h3>
</div>
</body>
</html>
Producción:
Variaciones de encabezado de interfaz de usuario semántica Divisor Variante adjunta
Referencia: https://semantic-ui.com/elements/header.html#attached
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA