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 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

Posts relacionados

• 22books muestras tus preferidos
• Averigua cómo está hecha una página web con Builtwith
• JiwaMusic, crea playlists de audio y video y compártelas
• Only2Clicks, página de inicio personalizada
• Quita la publicidad de los videos de YouTube

1 Comentario

Deje un comentario