En este artículo, sabremos cómo crear la barra de navegación usando la etiqueta <div> en HTML. La barra de navegación es un encabezado de navegación que contiene los enlaces para navegar a las diferentes páginas o secciones del sitio que ayuda a que el sitio web sea interactivo. La barra de navegación es un componente importante y fundamental para cualquier formato de sitio, ya que representa los múltiples datos de manera organizada y permite acceder rápidamente a los recursos más útiles. La barra de navegación se puede implementar más comúnmente en la barra lateral o en el encabezado de la página o se puede alinear de forma horizontal, vertical, fija o dinámica.
Sintaxis:
<div class="navbar">
<div class="brand">
<h3>GeeksforGeeks</h3>
</div>
<div class="menu">
<a href="#">Tutorials</a>
<a href="#">Student</a>
</div>
</div>
Enfoque: crearemos una sección div y le daremos un nombre de clase como barra de navegación. Luego creamos dos div más bajo el div definido por la barra de navegación, el primer div secundario se denomina clase de marca para el logotipo y el otro menú definido por div secundario para la navegación. Hemos utilizado la propiedad display flex en la barra de navegación div principal para alinear en línea. Luego creamos otra clase div principal que define el cuerpo para más contenido.
Ejemplo: Este ejemplo describe la barra de navegación usando la etiqueta HTML <div>.
HTML
<!DOCTYPE html>
<html lang="en">
<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">
<style>
* {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
background-color: #0eb358;
font-size: 2rem;
height: 2.5rem;
}
.menu {
margin: 0 3rem;
justify-content: space-around;
font-family: 'Franklin Gothic Medium',
'Arial Narrow',
Arial, sans-serif;
}
.body {
display: flex;
background-color: aquamarine;
}
h3 {
color: #fff;
}
h4 {
font-size: 1.5rem;
padding: 0 1rem;
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 1rem;
padding: 0 1rem;
font-family: cursive;
}
a {
text-decoration: none;
color: #fff;
padding: 0 4rem;
}
</style>
</head>
<body>
<div class="navbar">
<div class="brand">
<h3>GeeksforGeeks</h3>
</div>
<div class="menu">
<a href="#">Tutorials</a>
<a href="#">Student</a>
<a href="#">Jobs</a>
<a href="#">Courses</a>
</div>
</div>
<hr>
<div class="body">
<div>
<h4>7 Best Tips To Speed Up Your Job</h4>
<p>
Hunting down a relevant job requires
proper techniques for showcasing your
potential to the employer. But with
the advent of COVID-19, it has become
a bit challenging and competitive to
reach out for your dream job.
</p>
</div>
<div>
<h4>Top 7 Game Development Trends For 2022</h4>
<p>
Estimating what the future scope of
game development will be till we reach
the year 2025 or any other? Yes, you
should because to date, there are more
than 3 billion users playing games online.
</p>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por gurjeetsinghvirdee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA