Como crea un menú horizontal y
vertical sin css
En primer lugar hay que crear un menú HTML usando la
lista desordenada:
|
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contacts</a></li>
</ul>
|
Luego hay que crear un nuevo fichero CSS y adjuntarlo a la página HTML:
|
<link href="style.css" rel="stylesheet" type="text/css" />
|
También puede utilizar los estilos en línea (inline).
|
<style
type="text/css">
...here
goes your CSS styles...
</style>
|
Como resultado debe obtener el siguiente código HTML:
|
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</body>
</html>
|
La lista desordenada tiene sus propios estilos, así que sin los cambios
adicionales obtiene un menú vertical.
Para obtener el menú horizontal es necesario hacer algunos cambios en HTML y CSS.
En primer lugar hay que añadir un nuevo clase a la lista, reemplace
<ul> con <ul class="horizontal">
Ahora en el fichero CSS vamos a crear el menú horizontal. La lista
desordenada tiene valores de margen y relleno (margin and padding) asignados
por defecto. Tenemos que limpiar ellos:
|
|
ul.horizontal{
margin:0;
padding:0;
}
|
Luego haga los cambios para que sus elementos de la lista se muestren de
manera horizontal:
|
ul.horizontal li{
display:block;
float:left;
padding:0 10px;
}
|
Hemos añadido el valor de relleno horizontal (padding) a los elementos
de la lista para que luego no se peguen unas a otras. Ahora su menú está listo,
asigne enlaces, añada un poco de colores y fondo y ya.
No hay comentarios:
Publicar un comentario