Web标准实战CSS网页布局豆瓣首页

2024-07-11 08:40:31

字体：大中小

来源：转载

供稿：网友

前言

　　◎ 下文中的例子以豆瓣用户登录后的页面为基础，各人显示的内容可能有所差别；
　　◎ 这次并不强求像素级的一致，非凡是行距、间距部分可能有细微出入；
　　◎ 理解本文需要你对 HTML 和 CSS 有所了解，最好能够手写 HTML 和 CSS 代码；
　　◎ 具体阅读本文可能会花上你 15 分钟以上时间；
　　◎ 本文遵循 Code for the best, fix for the rest 原则。

一、分析结构

　　布局难点

　　豆瓣的首页是典型的三行两栏的布局，不过有非凡之处。除去头尾，中间的两栏，左栏是自适应，右栏是固定宽度（350px）。这样的布局，假如不考虑先加载哪部分内容（及语义），有相当简便的写法。另外假如两栏都是百分比宽度，那么也好处理。不过事实是右栏的宽度是固定的（并且我计划让左栏先加载）。固定宽度（或高度）是一件很危险的事，除非你也固定了文字大小，不然当文字被放大显示后，很轻易出错（不过用表格的话就不用考虑这么多）。

其他难点

　　◎ 左栏的新评论列表
　　　　◎ 我觉得那是一个有序列表（Ordered List），所以在代码中用 <ol> 标签；也可以用 <dl> 或者直接写 <div>
　　　　◎ 列表左侧的图片，是用户的头像而不是书的封面。所以我把 <img> 和用户名那一行写在一起。
　　◎ 右栏的豆瓣推荐和友邻的样式
　　　　◎ 我们常见的是固定高度的块依次浮动排列，但是这里书名的长度不一、图片大小不一且底部对齐，浮动块的高度未知，我没办法，只能暂时限定高度。谁有办法请不吝告知。
　　在分析结构的时候，我们一定要知道，我们需要先写什么，然后再写什么。这直接影响到后面样式表的写法。并且我的建议是，当结构确定下来之后，不要轻易改动。

二、基本布局代码

　　参照 Yahoo! UI Lib Grids，我把上中下三行分别命名为 #hd、#bd、#ft，是 #header、#body 和 #footer 的缩写。关于 id 和 class 的命名，各自有各自的习惯。在 CSS 里面，一般习惯用中划线法（如 comment-list）、下划线法（如 comment_list）、骆驼命名法（如 commentList）和帕斯卡命名法（如 CommentList），我个人比较倾向于使用下划线法。

　　中间的两栏我命名为 #main 和 #sidebar。哪部分先显示呢？我想左侧的新评论先显示可能更好一些，究竟在大部分情况下它的宽度都大于右侧。于是在 HTML 里面 #main 要写在 #sidebar 前面，如下：

示例代码 [www.CuoXIn.com]

上一篇：CSS实例：Unobtrusive页签切换符合Web标准具有html语义

下一篇：Web标准实战CSS网页布局Google首页