Web 标准实践系列（二）：解析豆瓣的首页 (1)

最大的难点。因为书名长短不一致，导致浮动的块高度并不能够统一（如果不设置的话），这样对于第二排的浮动就会有影响。我没想出有什么好的办法可以解决这个问题，所以只能给一个不完美的写法（但这很常用）：

1. <ul>
2. <li>
3. <div><img src="..." alt="..." /></div>
4. <p>书或其他 item 的名字</p>
5. </li>
6. ...
7. </ul>

在图片周围增加一个 <div> 方便控制（看下面的 CSS）。豆瓣上的图片是大小不一的（真是灾难），本例简化为图片大小相同，这样不会耽误太多时间。

我把图片周围的 <div> 高度和 <p> 的高度分开，这样在放大文字的时候，可以保持相对良好的可读性（但还是有不足的地方）。样式表如下：

1. .itemlst{
2. width: 350px;
3. margin: 0;
4. padding: 0;
5. }
6. .itemlst li{
7. width: 100px;
8. padding: 0 8px; /* 使用 margin 在 IE 下会有 double margin 的 Bug */
9. float: left;
10. text-align: center;
11. list-style: none;
12. }
13. .itemlst li img{
14. padding: 10px;
15. }
16. .itemlst li div{
17. width: 100%;
18. height: 120px; /* 这样把图像所处的块高度统一在 120px */
19. }
20. .itemlst li p{
21. float: left;
22. height: 6em; /* 最多显示四行文字，再放大就不行了 */
23. line-height: 1.5em;
24. }

查看至今为止的效果

五、其他

• 因为 FF 和 IE 对于 border: 1px dotted #DDD 显示的效果不一致。所以一般我会用背景代替（本例没有这么做）。
• 文字大小的控制，在 body 中设置基准值 small，然后使用百分比控制其他所有的文字大小。具体可以参考Bulletproof Web Design，中文版图书也已经上市。另，这只是习惯而已，在国内制作网页请根据实际情况量力而为。
• 关于第四部分的写法，在另外的文章内有说明。
• 在 CSS 的一开始，设定 *{margin: 0;padding: 0}，统一各个浏览器的细微的差别。
• 最后设置各部分的字体和元素间的间距，完成整个页面的制作。

查看最终效果（通过 Strict 验证，不过没什么意思 -_-）

IE 下会有些局部的差异，大家有兴趣的话，可以研究一下，这里仅为 Firefox 服务。

六、我们学到了什么

• 利用 float 进行布局，特别是第二部分里面的第二种写法很常用；
• 利用 position: absolute; 和 position: relative; 进行局部定位；
• 列表项（<li>）的浮动块状显示；
• 在制作符合标准的页面时，需要考虑 resizing window 和 change font size 的问题。