¿Cómo se puede utilizar Flexbox para crear una barra de navegación??
Flexbox es la mejor opción para crear una barra de navegación, especialmente cuando se trata de capacidad de respuesta. Flexbox hace que los elementos sean fáciles de alinear dentro del contenedor, proporcionan espacios y permiten automáticamente elementos adoptar cambios de acuerdo con el espacio disponible. Debido a la compatibilidad de su navegador cruzado, el estilo sigue siendo el mismo en múltiples versiones de los navegadores.
Este artículo demuestra cómo crear una barra de navegación utilizando el diseño de FlexBox que incluirá:
- Estructura de barra de navegación
- Estilización de Navbar y logotipo
- Estilo de elementos de menú
- Estilización del botón y botón de búsqueda
¿Cómo se puede utilizar Flexbox para crear una barra de navegación??
La barra de navegación permite al usuario atravesar múltiples páginas web en el sitio web. Contiene una barra de búsqueda, íconos sociales y muchos más. Siga los pasos detallados a continuación para crear una barra de navegación utilizando el diseño de FlexBox:
Paso 1: Estructura de barra de navegación
El primer paso es crear una estructura para la barra de navegación utilizando HTML. Por ejemplo, la barra de navegación contiene "logotipo "," elementos de menú "y" barra de búsqueda"Con un envío"botón":
La explicación del código anterior es la siguiente:
- Primero, crea un ""Etiqueta dentro del"" etiqueta. Tiene todos los elementos que se convierten en parte de la barra de navegación.
- Para sostener el "logo"De la empresa/sitio web, cree un""Etiqueta y asigna una clase de"logotipos". Más adelante, esta clase se utiliza para agregar estilo al logotipo.
- Después de eso, use la lista desordenada "
- Al final, crea el "aporte"Campo que tiene un tipo"texto", Y usa un"botón"Eso está envuelto dentro del""Etiqueta de clase"buscar".
Después de ejecutar el código anterior, la página web aparece así:
La salida muestra que la estructura de Navbar se ha mostrado en la pantalla.
Paso 2: Estilización de Navbar y logotipo
Primero, seleccione el "navegación"Selector de elementos que selecciona el""Etiqueta del archivo HTML. Después de eso, seleccione la imagen del logotipo y DIV accediendo a ella a través del "logotipos"Clase y aplique las propiedades de CSS como se muestra a continuación:
NavPantalla: Flex;
Justify-Content: Space-between;
Alineación de ítems: Centro;
Color de fondo: #333;
relleno: 10px;
.Logos
margen-derecha: auto;
.Logos img
Ancho: 100px;
La explicación del fragmento de código anterior es:
- Primero el "doblar" y "espacio entre"Los valores se establecen en"mostrar" y "Justify-Content" propiedades. Estas propiedades alinean el Div lado a lado y establecen el "navegación"Etiqueta como un"doblar" disposición.
- Luego, los valores de "Center", "#333" y "10px"Se asignan al"ítems alineados","color de fondo", y "relleno"Propiedades, respectivamente. Estas propiedades de CSS se utilizan para un mejor proceso de visualización.
- Al final, seleccione la imagen del logotipo y dale un "ancho"De 100px y establece el"auto"Valor para el"margen de derecha" propiedad.
Después de la ejecución del código anterior, la página web se ve así:
La salida anterior muestra que el diseño FLEX se establece en el "navegación"Etiqueta, y la imagen del logotipo se establece en el lado izquierdo.
Paso 3: Estilización de elementos de menú
Para aplicar estilos en los botones de menú, seleccione las clases DIV correspondientes y aplique las siguientes propiedades CSS:
.menúPantalla: Flex;
Estilo de lista: Ninguno; Margen: 0;
relleno: 0;
.opción del menú
margen: 0 10px;
.Menuitem A
Color: #fff;
Decoración de texto: ninguna;
La explicación del código anterior es:
- Primero, configure los elementos del menú como elementos flexibles proporcionando los valores de "doblar" y "ninguno" hacia "mostrar" y "estilo de lista" propiedades.
- A continuación, asigne cero como valor para el CSS "relleno" y "margen" propiedades. Esto elimina todos los márgenes y relleno predefinidos aplicados a los elementos de la lista.
- Después de eso, seleccione el "opción del menúClase "y la"ancla"Elemento reside en él. Además, establezca el color del elemento en "#fff".
- Al final, proporcione "ninguno"Como un valor para eliminar los estilos predefinidos al CSS"decoración de texto" propiedad.
Después de agregar el código anterior, la página web ahora aparece así:
La salida muestra que los elementos del menú ahora están diseñados.
Paso 4: Estilización del botón y botón de búsqueda
Usando selectores de elementos directos, seleccione el "aporte" y "botón"Elementos HTML en el archivo CSS. Y aplique las siguientes propiedades de CSS para mejorar la visibilidad del usuario:
aporterelleno: 5px;
borde: ninguno;
Border-Radius: 3px 0 0 3px;
botón
Color de fondo: #555;
Color: #fff;
borde: ninguno;
relleno: 5px 10px;
Border-Radius: 0 3px 3px 0;
cursor: puntero;
La explicación del código anterior se da a continuación:
- Utilizar el "relleno","borde", y "radio fronterizo"Para aplicar el estilo al campo de entrada.
- Establezca el valor de "#555" y "#fff" hacia "fondo" y "color de texto"Propiedades para el elemento del botón.
- Después de eso, configure el "puntero" y "ninguno"Como un valor para el"cursor" y "borde" propiedades.
- También se pueden utilizar otras propiedades de CSS para hacer que el diseño sea más receptivo y llamativo.
Después de ejecutar el fragmento de código anterior, la salida se ve así:
La salida muestra que la barra de navegación ahora se crea correctamente utilizando FlexBox.
Conclusión
Para crear una barra de navegación con FlexBox, establezca el "doblar" y "espacio entre"Valores para el"mostrar"Y propiedades" justify-contento "dentro del"" etiqueta. Después de eso, proporcione "doblar"Como valor para la propiedad de visualización para la lista desordenada"". Al final, las propiedades CSS se aplican para diseñar los elementos HTML que residen dentro del "" etiqueta. Este artículo ha explicado el uso de Flexbox para crear una barra de navegación.