Web 标准实践——豆瓣的首页

四、右栏豆瓣推荐

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

<ul>
<li>
<div><img src="..." alt="..." /></div>
<p>书或其他 item 的名字</p>
</li>
...
</ul>

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

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

.itemlst{
width: 350px;
margin: 0;
padding: 0;
}
.itemlst li{
width: 100px;
padding: 0 8px; /* 使用 margin 在 IE 下会有 double margin 的 Bug */
float: left;
text-align: center;
list-style: none;
}
.itemlst li img{
padding: 10px;
}
.itemlst li div{
width: 100%;
height: 120px; /* 这样把图像所处的块高度统一在 120px */
}
.itemlst li p{
float: left;
height: 6em; /* 最多显示四行文字，再放大就不行了 */
line-height: 1.5em;
}

（通过 Strict 验证，不过没什么意思 -_-）

五、其他

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

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

六、我们学到了什么

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