Publicado el Martes, 16 de Octubre del 2007 por Alan

Listas en miniatura para publicidad o secciones de tu página web

Listas_iconos

Entre las técnicas de diseño web, existen algunas como crear listas en la parte izquierda o derecha superior para colocar iconos pequeños con la liga y una pequeña descripción.

Así se puede conseguir una lista con la cual se puede aprovechar mas el espacio y el contenido queda mejor estructurado, pues la gente se fija en el cuadro y sabe que eso es especial y le pone un poco mas de atención y si es de su agrado, posiblemente entre. Esto hace que la gente que quiera publicarse en tu sitio, se anime de manera mas rápida.

El Ejemplo muestra un código en dos lenguajes distintos, en CSS y HTML.

En CSS

dl {

width: 250px;

font-size: 80%;

}

dt {

float: right;

width: 190px;

font-weight: bold;

font-family: Georgia, “Times New Roman”, Times, serif;

}

dd {

margin: 0 0 15px 60px;

color: #666666;

font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;

}

dd.image {

float: left;

margin: 0;

}

En HTML

<dl>

<dt><a href=”http://www.elserver.com/”>El Server</a></dt>

<dd class=”image”><img src=”icon_css.gif” alt=”" width=”50″ height=”50″ /></dd>

<dd> Hosting WEB 2.0 que sobrepasa todas las expectativas… </dd>

<dt> <a href=”http://POOLDIGITAL.net”>POOLDIGITAL </a> </dt>

<dd class=”image”><img src=”icon_html.gif” alt=”" width=”50″ height=”50″ /></dd>

<dd>Empresa de diseño web. Brasil. </dd>

<dt> </dt>

<dt><a href=”http://www.spiga.com.mx/”>SPIGA </a></dt>

<dd class=”image”><img src=”icon_accessibility.gif” alt=”" width=”50″ height=”50″ /></dd>

<dd> Diseño Web Profesional Desarrollamos blogs, portales, podcast, e-mail marketing, etc… </dd>

</dl>