> Faqs > Barra HTML y CSS

Barra HTML y CSS

¿Como puedo crear una barra en html y en css codigo y etiquetas que debo utilizar para poder hacerla ?

Respuestas

Hola, pues tu pregunta podría tener innumerables respuestas, dado que el concepto de barra es un poco difuso. Entiendo que puede ser una barra como de cabecera del sitio ¿como para navegación?

Además, en cualquier caso dependería mucho del diseño que quieras conseguir y lo complejo que sea el sitio porque podría necesitar albergar unos pocos enlaces o decenas de ellos. En definitiva, tu pregunta es demasiado abierta.

Te voy a pasar un código por el que podrías comenzar tu barra, si es que he acertado en lo que estabas pensando al usar se término.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barra en HTML y CSS</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Estilo para la barra */
        .barra {
            background-color: #333;
            overflow: hidden;
        }

        /* Estilo para los elementos de la barra */
        .barra a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* Cambiar el color al pasar el mouse por encima */
        .barra a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
<body>
    <div class="barra">
        <a href="#home">Home</a>
        <a href="#services">Services</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </div>

    <div style="padding: 20px;">
        <h1>Bienvenido a mi sitio web</h1>
        <p>Contenido de ejemplo...</p>
    </div>
</body>
</html>
María
187 4 17 10