Web标准实战CSS网页布局.docVIP

本文《Web标准实战CSS网页布局 豆瓣首页 - 网页制作 - web标准》关键词：网页制作,web标准 前言　　◎?下文中的例子以豆瓣用户登录后的页面为基础，各人显示的内容可能有所差别；?　　◎?这次并不强求像素级的一致，特别是行距、间距部分可能有细微出入；?　　◎?理解本文需要你对?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?前面，如下：Example Source Code []div?id=hd/div?div?id=bd?div?id=main/div?div?id=sidebar/div?/div?div?id=ft/div?　　样式表怎么写呢？#hd、#ft可以先不管，#bd?因为其内部有浮动，不能自适应高度，所以需要清除浮动，方法有很多。如果不清除浮动，那么?#ft?的内容就会“见缝插针”的显示在你不想见到它的地方。本文的例子，可以给?#ft?设定?clear:?both;，或者为?#bd?进行?easy?clearing。　　因为?#main?的宽度是自适应的，#sidebar?的宽度又固定为?350px，在?HTML?里面又是?#main?在前，所以不能用简单的浮动（浮动的元素必须设定宽度，否则会根据内容取宽度），也不能用绝对定位，因为你不知道两者的高度。根据屏幕宽度不同，有时候是?#sidebar?比较高，有时候是?#main?比较高，使用绝对定位的话，下面的?#ft?显示就会有问题。所以我用了一种不常用的办法（我不太喜欢这种负值?margin?的写法），如下：Example Source Code []#bd{?padding-right:?410px;?/*?因为有?padding?所以?clear?float?不能简单地将?#bd?设置为浮动?*/?}?#main{?width:?100%;?float:?left;?}?#sidebar{?width:?350px;?float:?left;?/*?如果float?right，在?IE?下有问题，这里?fix?一下?*/? margin-left:?60px;?/*?栏间距，即?gutter?*/?margin-right:?-410px;?/*?这一句很重要?*/?}?查看至今为止的效果　　如果我们在?HTML?里面先写固定宽度的?#sidebar，那么?CSS?