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 (la web ya no funciona) 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

  1. dl {
  2. width: 250px;
  3. font-size: 80%;
  4. }
  5. dt {
  6. float: right;
  7. width: 190px;
  8. font-weight: bold;
  9. font-family: Georgia, «Times New Roman», Times, serif;
  10. }
  11. dd {
  12. margin: 0 0 15px 60px;
  13. color: #666666;
  14. font-family: «Trebuchet MS», Arial, Helvetica, sans-serif;
  15. }
  16. dd.image {
  17. float: left;
  18. margin: 0;
  19. }

En HTML

  1.   <dt><a href=»http://www.elserver.com/»>El Server</a></dt>
  2.   <dd class=»image»><img src=»icon_css.gif» alt=»» width=»50″ height=»50″ /></dd>
  3.   <dd>  Hosting WEB 2.0 que sobrepasa todas las expectativas… </dd>
  4.   <dt> <a href=»http://POOLDIGITAL.net»>POOLDIGITAL </a> </dt>
  5.   <dd class=»image»><img src=»icon_html.gif» alt=»» width=»50″ height=»50″ /></dd>
  6.   <dd>Empresa de diseño web. Brasil. </dd>
  7.   <dt>&nbsp;</dt>
  8.   <dt><a href=»http://www.spiga.com.mx/»>SPIGA </a></dt>
  9.   <dd class=»image»><img src=»icon_accessibility.gif» alt=»» width=»50″ height=»50″ /></dd>
  10.   <dd> Diseño Web Profesional Desarrollamos blogs, portales, podcast, e-mail marketing, etc… </dd>
  11. </dl>

Vía | xyberneticos