Crear una barra de navegación con tres alineaciones diferentes usando CSS

En este artículo, vamos a crear una barra de navegación con tres posiciones diferentes, es decir, izquierda, derecha y centro. Para comprender este artículo, debemos comprender algunos conceptos básicos de HTML y CSS.

Acercarse:

Aquí vamos a hacer una barra de navegación para sitios web de libros electrónicos.
Las etiquetas que vamos a usar para la barra de navegación son encabezado, imagen, navegación, botón. Aquí vamos a apuntar a cada etiqueta individualmente.
Aquí vamos a probar 3 posiciones diferentes para la barra de navegación, es decir, izquierda, derecha y centro.
Después de escribir HTML, nos enfocaremos en CSS, o usaremos una etiqueta de estilo en HTML para hacer que la barra de navegación del sitio web sea atractiva.

1. Barra de navegación alineada a la izquierda: en la barra de navegación posicionada a la izquierda, toda la lista de enlaces está en el lado derecho, es decir, alineado a la izquierda, y la imagen está en el lado izquierdo, que está alineada a la derecha.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        @import url(
'https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
  
        /* First make all margin and padding 0 */
        * {
            margin: 0px;
            padding: 0px;
            background-color: rgb(19, 6, 6);
        }
  
        /* Second work on image*/
        header img {
            display: block;
            height: 84px;
            cursor: pointer;
            margin-right: auto;
        }
  
        /* Changes the styling of links if necessary */
        li,
        a,
        button {
            font-family: "Montserrat", sans-serif;
            font-weight: 800;
            font-size: 16px;
            color: whitesmoke;
            text-decoration: none;
        }
  
        /* Now start positioning the links and images 
           according to your convinence */
        header {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 30px 10%;
        }
  
        .navigate_links {
            list-style: none;
        }
  
        .navigate_links li {
            display: inline-block;
            padding: 10px 20px;
        }
  
        .navigate_links li a {
            transition: all 0.3s ease-in-out 0s;
        }
  
        /* Add some transition to make navigation 
           bar attractive */
        .navigate_links li a:hover {
            color: greenyellow;
            border: 2px solid blue;
            box-shadow: 3px 3px 3px red, 3px 3px 3px blue;
            border-radius: 8px;
            margin: 10px;
            padding: 12px;
        }
  
        button {
            margin-left: 70px;
            padding: 9px 12px;
            border-radius: 15px;
            background-color: rgb(89, 61, 248);
            color: rgb(243, 236, 236);
            border: none;
            cursor: pointer;
            transition: all 0.3s ease-in-out 0s;
        }
  
        button:hover {
            background-color: rgb(219, 221, 81);
            color: black;
        }
    </style>
</head>
  
<body>
    <header>
        <img class="logo"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210401193733/geeksforgeeks.png"
            alt="Loading image">
        <nav>
            <ul class="navigate_links">
                <li><a href="#">Popular</a></li>
                <li><a href="#">New</a></li>
                <li><a href="#">Ebook</a></li>
                <li><a href="#">Reading-List</a></li>
                <li><a href="#">Topics</a></li>
            </ul>
        </nav>
        <a class="signin" href="#"> 
            <button>Get it for free</button> 
        </a>
    </header>
</body>
  
</html>

Producción:

2. Barra de navegación alineada al centro: en la barra de navegación alineada al centro, todos los enlaces están en el centro, el logotipo está alineado a la derecha y el botón está alineado a la izquierda; todas estas cosas se pueden hacer solo desde una línea de código.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        @import url(
'https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
  
        * {
            margin: 0px;
            padding: 0px;
            background-color: rgb(7, 6, 6);
        }
  
        header img {
            display: block;
            height: 84px;
            cursor: pointer;
        }
  
        li,
        a,
        button {
            font-family: "Montserrat", sans-serif;
            font-weight: 800;
            font-size: 16px;
            color: whitesmoke;
            text-decoration: none;
        }
  
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px 10%;
        }
  
        .navigate_links {
            list-style: none;
        }
  
        .navigate_links li {
            display: inline-block;
            padding: 0px 20px;
        }
  
        .navigate_links li a {
            transition: all 0.3s ease-in-out 0s;
        }
  
        button {
            padding: 9px 12px;
            border-radius: 15px;
            background-color: rgb(89, 61, 248);
            color: rgb(243, 236, 236);
            border: none;
            cursor: pointer;
            transition: all 0.3s ease-in-out 0s;
        }
  
        .navigate_links li a:hover {
            color: greenyellow;
            border: 2px solid blue;
            box-shadow: 3px 3px 3px red, 3px 3px 3px blue;
            border-radius: 4px;
            margin: 10px;
            padding: 12px;
        }
  
        button:hover {
            background-color: rgb(219, 221, 81);
            color: black;
        }
    </style>
</head>
  
<body>
    <header>
        <img class="logo"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210401193733/geeksforgeeks.png"
            alt="Loading image">
  
        <nav>
            <ul class="navigate_links">
                <li><a href="#">Popular</a></li>
                <li><a href="#">New</a></li>
                <li><a href="#">Ebook</a></li>
                <li><a href="#">Reading-List</a></li>
                <li><a href="#">Topics</a></li>
            </ul>
        </nav>
          
        <a class="signin" href="#"> 
            <button>Get it for free</button> 
        </a>
    </header>
</body>
  
</html>

Producción:

3. Barra de navegación alineada a la derecha: en la barra de navegación alineada a la derecha, los enlaces de navegación están alineados a la derecha y todos los demás enlaces, como el botón y el logotipo, dependen de la elección de los desarrolladores.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        @import url(
'https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');
  
        * {
            margin: 0px;
            padding: 0px;
            background-color: rgb(12, 9, 9);
        }
  
        header img {
            display: block;
            height: 84px;
            cursor: pointer;
            /* margin-right: auto; */
            order: 3;
            margin-left: auto;
        }
  
        li,
        a,
        button {
            font-family: "Montserrat", sans-serif;
            font-weight: 800;
            font-size: 16px;
            color: whitesmoke;
            text-decoration: none;
        }
  
        header {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding: 30px 10%;
            order: 1;
        }
  
        .navigate_links {
            list-style: none;
        }
  
        .navigate_links li {
            display: inline-block;
            padding: 0px 20px;
        }
  
        .navigate_links li a {
            transition: all 0.3s ease-in-out 0s;
        }
  
        button {
            margin-left: 20px;
            padding: 9px 12px;
            border-radius: 15px;
            background-color: rgb(89, 61, 248);
            color: rgb(243, 236, 236);
            border: none;
            cursor: pointer;
            transition: all 0.3s ease-in-out 0s;
        }
  
        .navigate_links li:nth-child(1) {
            padding: 0px 20px 0px 0px;
        }
  
        .navigate_links li a:hover {
            color: greenyellow;
            border: 2px solid blue;
            box-shadow: 3px 3px 3px red, 3px 3px 3px blue;
            border-radius: 4px;
            margin: 10px;
            padding: 12px;
        }
  
        button:hover {
            background-color: rgb(219, 221, 81);
            color: black;
        }
    </style>
</head>
  
<body>
    <header>
        <img class="logo"
            src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210401193733/geeksforgeeks.png"
            alt="Loading image">
  
        <nav>
            <ul class="navigate_links">
                <li><a href="#">Popular</a></li>
                <li><a href="#">New</a></li>
                <li><a href="#">Ebook</a></li>
                <li><a href="#">Reading-List</a></li>
                <li><a href="#">Topics</a></li>
            </ul>
        </nav>
        <a class="signin" href="#"> 
            <button>Get it for free</button> 
        </a>
    </header>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por archies y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta