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

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

Vía | xyberneticos