Mostrando entradas con la etiqueta Diseño Web. Mostrar todas las entradas
Mostrando entradas con la etiqueta Diseño Web. Mostrar todas las entradas

martes, 15 de julio de 2014

Imagen como fondo de pagina web con tamaño ajustable


Vamos a explicar como utilizando CSS podemos colocar una imagen como fondo de nuestra web y que el tamaño de dicha imagen se ajuste automáticamente a la resolución de cada monitor o al tamaño de la ventana del explorador. El resultado no es perfecto pero es un método bastante sencillo.


 Lo primero una consideración sobre las imágenes a utilizar y es que como van  a cubrir toda la pantalla manteniendo su proporción pues nos encontramos que teniendo en cuenta las pantallas anchas actuales será mejor usar imágenes de tipo rectangular en lugar de cuadradas. Para utilizar una imagen cuadrada deberemos asegurarnos que lo que deseamos que se vea quede justo en el centro.

jueves, 19 de junio de 2014

Crear un un Menu Desplegable con CSS y HTML

En esta entrada del blog vamos a explicar como crear un sencillo menú desplegable utilizando  html y css similar al que tengo colocado en este blog.


  • Empezamos con el código html del menú .Utilizamos  las etiquetas <ul> para crear una lista y <li> para cada punto de esa lista. Estos puntos serán los elementos superiores del menú y dentro de ellos será donde creamos otras listas anidadas que serán el contenido desplegable

<div id="contenedor">
<ul class="desplegable">
     <li><a href="apart">Apartado A </a> </li>
     <li><a href="apre"> Apartado B </a>
           <ul>
                 <li> <a href="primero"> Primero </a> </li>
                 <li><a href="segundo">Segundo </a></li>
                 <li><a href="tercero"> Tercero </a>  </li>
                 
           </ul>
     </li>
      <li> <a href="apartadoc">Apartado C </a></li>
      <li> <a href="apartadod">Apartado D </a>
           <ul>          
                 <li> <a href="tre">despues </a> </li>
                 <li> <a href="r"> entrada </a></li>
                 <li> <a href="f"> salida </a>  </li>
           </ul>
     </li>
     <li> <a href="apartadoe"> Apartado E </a> </li>
</ul>
</div>