图像列表装饰

　　如果列出的列表项有与之相关的图像，那么列表可以通过显示这些图像来帮助用户清楚地识别这些条目。这可以在设备上做的看起来很自然，特别是在操作系统使用其内置菜单图标的地方。

　　然而，使用图标来装饰列表还仍然存在一些挑战。其一是要确保图标的大小适合于屏幕。屏幕的大小不应该是导致图像占据列表过多的横向宽度的必然原因。利用一些设备的像素宽度的只是（不用管设备的当前方向），可以大大提高该技术的审美平衡。

　　另一个问题是要寻找一种可靠的装饰样式，从而使图像和主要列表项文本（以及在其下方显示的任何元数据）可以流畅地显示。在桌面网站上使用CSS的float和clear属性可能是一个简单的事情，但在一系列的设备中也可能会有缺乏可靠的CSS支持的设备，而这一类就会显得使用会比较繁琐，而且还需要很高的技巧才行。

　　网站的设计和列表中的项的性质，自然会影响实现装饰的方式。但在这个例子的目的是假设在你的羽翼未丰的博客网站上的每篇文章有一个主要图像与之相关，你已经调整了大小并对每一个版本进行了裁剪：分别对应低分辨率和高分辨率的屏幕。

　　如果想要内嵌的图像，则可以对每个列表项使用各种类型的标记。图限购一个CSS类，可以通过样式设置将其放置在列表项的左侧。但是要注意，也要在标记中使用一个显示的高度和宽度，这有助于一些浏览器确定页面流，并在完成下载前对图像进行布局。

　　图像向左浮动，并给定了一个不对称边界，这样文字就不会靠他太近（同样第，二行的元数据也会变得比较清楚）。边界创建了一个简单的插图效果。这在一个具有良好的CSS支持的高分辨设备商可以很好的实现。在Windows模拟器中也是可以接受的。