Mostrando entradas con la etiqueta barra de navegacion. Mostrar todas las entradas
Mostrando entradas con la etiqueta barra de navegacion. Mostrar todas las entradas

sábado, 12 de enero de 2019

12 Html Css. Formato barra de navegacion

Dando formato a la barra de navegacion (nav) de nuestra web.


Hoja de estilos CSS

*{
margin:0 auto;
padding:0px;
font-family:Arial;
}
header{
background:#FF5733;
color:#FFFFFF;
font-size:3em;
width:95%;
padding:10px;
margin:5px 5px;
display:inline-block;
border:solid 1px #ccc;
border-radius:25px;
}
header figure{
float:left;
}
header h1{
float:right;
}
nav{
font-size:1em;
width:95%;
padding:5px;
margin:1px 1px;
text-align:center;
}
nav ul{
list-style-type:none;
}
nav li{
display:inline;
text-align:center;
margin:0 15px 0 0;
}
nav li a{
padding:2px 7px 2px 7px;
color:#FF5733;
background-color:#FFFFFF;
border:1px solid #ccc;
text-decoration:none;
}
nav li a:hover{
background:#FF5733;
color:#FFFFFF;
}

domingo, 17 de enero de 2016

Html5 - 3. Nav

Hoy introducimos la etiqueta "nav", con dicha etiqueta indicamos al navegador que vamos a poner la tipica barra de navegacion del sitio web, enlace a inicio, acerca de, etc.
Para ello introduciremos dentro de esta etiqueta una lista, que en html se forma con "ul" (unorder list) y dentro de esta los items que queramos con la etiqueta "li" (item list).
Para que estas listas sean enlaces a otro sitio ya sea externo o interno de nuestra web, le pondremos la etiqueta "a" con su atributo "href".
Hay que tener claro el cierre de cada etiqueta </>.
Tomamos el codigo del apartado anterior y añadimos "nav" con lo que el codigo quedaria de la siguiente forma:
<!DOCTYPE html><html>
<head>
<title>Mi primera Web</title>
</head>
<body>
<header>
<h1>Cabecera de Mi Web</h1>
<figure><img src="milogo.jpeg"/></figure>
</header>

<nav>
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="acercade.html">Acerca de</a></li>
</ul>
</nav>
</body>
</html>
Introducir este codigo en notepad ++ y grabarlo por ejemplo como ejemplonav.html, abrirlo despues con el navegador web para ver el resultado.
Aun no tiene diseño, porque estamos estableciendo la base o la estructura, en cuanto terminemos con este inicio procedere a empezar con CSS para dar formato a la web, colores, estilo, posicion, etc.