Adobe Tutorials | Web Resources | mgloob: CSS | Desde cero | Parte 2
0

CSS | Desde cero | Parte 2

   Category ,

Continuando con los tutoriales de CSS, practicaremos un poco lo aprendido en el tutorial anterior, crearemos un menú para páginas web, el cual podán verlo desde aqui.
que vamos a crear son las capas [DIV], con conocimientos básicos de HTML empezaremos creando dos capas con sus respectivos "id", muy importane aclarar que el "id" es con lo que identificara el CSS a la capa, asi que mucho cuidado con colocar los mismos "id". [A menos que sea lo que se quiere]

<html>
<head><title>Demo | CSS</title>
</head>
<body>
<div id="content">
<div id="menu">
</div>
</div>
</body>
</html>

Después pondremos el texto de nuestro menú de la siguiente manera: 
<html>
<head><title>Demo | CSS</title>
</head>
<body>
<div id="content">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Queda de más decir que el vínculo debe cambiarse a la página deseada. Hasta el momento no se parece en lo absoluto al menu, ya que no hemos agregado todavía la hoja de estilos. 
#content {
 position:relative; 
} 

#menu {
 background: #ccc;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 color: #333;
 padding: 5px ;
 margin-bottom: 22px; 
} 

#menu li a {
 text-decoration: none;
 color: #272900;
 padding:10px; 
} 

#menu li a:hover{
 color: #fff; 
 text-decoration: none;
 background-color: #000; 
} 

#menu ul {
 margin: 0 0 0 20px;
 padding: 0;
 border-left: 1px solid #000; 
}

 #menu li { 
  display: inline;
  padding: 0 10px;
  border-right: 1px solid #000; 
}
Con este código crearemos la apariencia total del menu. Si hemos seguido los pasos correctamente el resultado será el mismo, cualquier duda haganla saber y para descargar los archivos trabajados, abajo.

Post comment