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

发布时间:2007年02月12日      浏览次数:834 次
前言
下文中的例子以豆瓣用户登录后的页面为基础,各人显示的内容可能有所差别;
这次并不强求像素级的一致,特别是行距、间距部分可能有细微出入;
理解本文需要你对 HTML 和 CSS 有所了解,最好能够手写 HTML 和 CSS 代码;
详细阅读本文可能会花上你 15 分钟以上时间;
本文遵循 Code for the best, fix for the rest 原则。
  一、分析结构
  布局难点
  豆瓣的首页是典型的三行两栏的布局,不过有特殊之处。除去头尾,中间的两栏,左栏是自适应,右栏是固定宽度(350px)。这样的布局,如果不考虑先加载哪部分内容(及语义),有相当简便的写法。另外如果两栏都是百分比宽度,那么也好处理。不过事实是右栏的宽度是固定的(并且我计划让左栏先加载)。固定宽度(或高度)是一件很危险的事,除非你也固定了文字大小,不然当文字被放大显示后,很容易出错(不过用表格的话就不用考虑这么多)。
  其他难点
左栏的新评论列表
我觉得那是一个有序列表(Ordered List),所以在代码中用 <ol> 标签;也可以用 <dl> 或者直接写 <div>
列表左侧的图片,是用户的头像而不是书的封面。所以我把 <img> 和用户名那一行写在一起。
右栏的豆瓣推荐和友邻的样式
我们常见的是固定高度的块依次浮动排列,但是这里书名的长度不一、图片大小不一且底部对齐,浮动块的高度未知,我没办法,只能暂时限定高度。谁有办法请不吝告知。
  在分析结构的时候,我们一定要知道,我们需要先写什么,然后再写什么。这直接影响到后面样式表的写法。并且我的建议是,当结构确定下来之后,不要轻易改动。
文章来源:http://www.divcss.org/Article/cg/200701/36502.html
免责声明:本站相关技术文章信息部分来自网络,目的主要是传播更多信息,如果您认为本站的某些信息侵犯了您的版权,请与我们联系,我们会即时妥善的处理,谢谢合作!