搜狐新版CSS布局分析 - 最后地失望 contentA层
分析搜狐（sohu.com）首页的CSS布局已经有一些时间了，中间作了很大的停顿，本人（52CSS.com Webmaster:MrJin）感觉已经没有分析下去的必要了。若作者或SOHU前端开发团队能看到这篇文章，欢迎发表您的观点，讲述您的布局思路。在整个的布局分析中，抱着一种对门户网站的信任，以及想学习门户网站先进技术的心态来进行分析，将之视为一种榜样与楷模，非常遗憾，虽然作为国内很有影响力的门户网站，在首页的CSS布局方面却漏洞百出：标签应用不规范，容器嵌套混乱，带有强烈的表格布局思想，命名极不规范等等。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
这样很不正规的CSS布局，无疑形同虚设，没有起到CSS布局的效果，发挥其长处，这样的代码是非常不精减、内容与表现没有分离。这样的编码方式增加了文件大小，对SOHU而言是一种损失。除了有碍门户的脸面，更有实际意义，如每一组文件，文件大小增加100K。一天的访问量是一千万次。 100*10000000/1000==1000G的流量。这对服务器是很大的负担。另外还有SEO，用户体验等等方面的影响。
今天作最后的分析，看contentA层的情况。搜狐首页contentA层的分为三块：column760、column180、bBot。不包括 clear层。而且bBot的存在也没有理由。类的命名包括了表现的部分，如column180，180的宽度如果调整为190，这样的命名不伦不类了。容器嵌套关系如图所示。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
总体的布局，column760向左浮动，作为网站左侧和中部内容的容器。column180向右浮动，作为右侧内容的容器。bBot可能是为了实现底边线而单独设置的层，这样的设置是完全没有必要的，不要为外观表现增加任何不必要的标签，更重要的是，作为首页，内容在高度上都是可控的，不同于终端页存在着内容可多可少的情况。这一层的设置是完全没有必要的，直接扔掉，边线的设置直接放置在各层中进行。布局情况如图所示。
（部分大图，可以直接点击图片放大查看。）
在column760层，包括了四个主要容器，分别是：column318、column434、aBot和ad_B。它们的关系如图所示。
层column318和层column434都向左浮动，实现横向排列。aBot同样是为了实现边线效果，实在没有必要。最后是ad_B层，放置广告内容。布局情况如图所示。
在column180层，包括了六个容器，有点想要吐血的冲动，分别是：bord02、ad_C、ad_D、blank10、bord02和 titleA。两个bord02层是为了实现边框效果。且不说不要为了表现增加标签，在这样的简单布局中，为了边线而单独设置DIV是不是有必要，边框属性为何不应用呢，不清楚作者是如何考虑的。blank10是为了实现垂直间距，不清楚margin属性是不是真的很难控制，以至于产生恐惧。在传统的表格布局中，大家才会以此思路进行开发。ad_C和ad_D放置了两个广告内容。titleA作为“新版基金”列表内容，为什么这样的新闻文章类的列表，并命名为“titleA”，有点匪夷所思……各层的关系如图所示。
在布局上，基本上不会遇到什么难题，不会涉及到浏览器兼容性问题，只是想不明白作者为什么不用border和margin来合理的减少标签，这样的写法带有强烈的表格布局思想。其布局情况如图所示。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
现在回归到理性的状态来进行分析，试想我们如果进行这样的布局该如何去写。
其实contentA层是一个三列两行式的布局形式。没有必要进行多层嵌套。直接设置为四层，并在最末端清除浮动即可，如图所示。
Example Source Code [www.52css.com]
通过CSS进行定义，将它们置于合适的位置，而相互间的距离完全由CSS进行控制。（右侧边的栏目内部样式，也是同样的道理也进行编写，这里不再细化与深入了。）
CSS 网页布局的意义在于将表现与内容分离，表现部分的东西，由CSS完成。而HTML只体现内容。为了一个边线，为了一个间距，单独在HTML中增加代码是不可取的。除非遇到浏览器兼容问题，否则应该尽最大可能避免。各层的嵌套，应该力求简单，不需要多层嵌套，尽量的少嵌套以提高执行效率、精减代码。
根据上面的HTML编码，编写CSS：
Example Source Code [www.52css.com]
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
最终的效果如图所示。
我们可以运行一下，查看最终的效果。
Source Code to Run [www.52css.com]
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
补充——对overbreak评论的回复
overbreak评论：
使用 blank10 和 bord2 是不是为了将来调整方便?
如果网站中所有的间距和边框都是用 blank10 和 bord2 实现的, 以后修改起来只用修改一次 css 就可以了; 如果单独每个容器用 margin 和 border 的话, 整体修改起来会比较麻烦?
52CSS回复：
CSS网页布局及网站重构的意义在于，表现与内容分离。内容就是内容，建立具有良好结构与语义的HTML文档为基础，表现部分由CSS样式来完成。不要将表现的内容（如边框，边距等）写在HTML文档内。试想，如果遇到局部调整，右侧区域不需要边框了或者某两层之间没有间距了，那么这些层的存在就没有意义了，遇到这样的调整，不只是调整样式就可以获得新的外观表现，HTML文档也需要跟着调整。表现与内容分离的原则根本反应不出来，也没有任何实际操作意义。
或许在一定的范围内，是能够方便于开发人员的调整与编码。相同垂直间隔10px，只需要加入blank10就可以了。这样的思路与表格布局无异了。在传统的表格布局时代，大家都是这样干的。不要为了一时方便增加HTML代码（可以思考一下，为什么表现与内容相分离？）。需要注意的是，浏览器可以缓存CSS文件，而对HTML文件是需要向服务器发送请求的。将表现层的内容最大程度的分离到CSS文件里去，大大的减化了HTML文件的大小。每一次的用户请求，将下载更为精简的文件，而CSS文件下载一次，即可直接读取缓存内的文件。这将大大的提高服务器的利用率与网站性能。从另一方面减少运行成本（服务器带宽成本），也提高了用户体验（打开速度更快）。
而SOHU此次新版的布局形式与方式，将CSS网页布局的优点抹杀了很多。很遗憾。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
这样很不正规的CSS布局，无疑形同虚设，没有起到CSS布局的效果，发挥其长处，这样的代码是非常不精减、内容与表现没有分离。这样的编码方式增加了文件大小，对SOHU而言是一种损失。除了有碍门户的脸面，更有实际意义，如每一组文件，文件大小增加100K。一天的访问量是一千万次。 100*10000000/1000==1000G的流量。这对服务器是很大的负担。另外还有SEO，用户体验等等方面的影响。
今天作最后的分析，看contentA层的情况。搜狐首页contentA层的分为三块：column760、column180、bBot。不包括 clear层。而且bBot的存在也没有理由。类的命名包括了表现的部分，如column180，180的宽度如果调整为190，这样的命名不伦不类了。容器嵌套关系如图所示。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
总体的布局，column760向左浮动，作为网站左侧和中部内容的容器。column180向右浮动，作为右侧内容的容器。bBot可能是为了实现底边线而单独设置的层，这样的设置是完全没有必要的，不要为外观表现增加任何不必要的标签，更重要的是，作为首页，内容在高度上都是可控的，不同于终端页存在着内容可多可少的情况。这一层的设置是完全没有必要的，直接扔掉，边线的设置直接放置在各层中进行。布局情况如图所示。
（部分大图，可以直接点击图片放大查看。）
在column760层，包括了四个主要容器，分别是：column318、column434、aBot和ad_B。它们的关系如图所示。
层column318和层column434都向左浮动，实现横向排列。aBot同样是为了实现边线效果，实在没有必要。最后是ad_B层，放置广告内容。布局情况如图所示。
在column180层，包括了六个容器，有点想要吐血的冲动，分别是：bord02、ad_C、ad_D、blank10、bord02和 titleA。两个bord02层是为了实现边框效果。且不说不要为了表现增加标签，在这样的简单布局中，为了边线而单独设置DIV是不是有必要，边框属性为何不应用呢，不清楚作者是如何考虑的。blank10是为了实现垂直间距，不清楚margin属性是不是真的很难控制，以至于产生恐惧。在传统的表格布局中，大家才会以此思路进行开发。ad_C和ad_D放置了两个广告内容。titleA作为“新版基金”列表内容，为什么这样的新闻文章类的列表，并命名为“titleA”，有点匪夷所思……各层的关系如图所示。
在布局上，基本上不会遇到什么难题，不会涉及到浏览器兼容性问题，只是想不明白作者为什么不用border和margin来合理的减少标签，这样的写法带有强烈的表格布局思想。其布局情况如图所示。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
现在回归到理性的状态来进行分析，试想我们如果进行这样的布局该如何去写。
其实contentA层是一个三列两行式的布局形式。没有必要进行多层嵌套。直接设置为四层，并在最末端清除浮动即可，如图所示。
Example Source Code [www.52css.com]<div id="wrapA">
<div id="siderA1">siderA1</div>
<div id="mainA">mainA</div>
<div id="siderA2">siderA2</div>
<div id="adA">adA</div>
<div class="clear"></div>
</div>
<div id="siderA1">siderA1</div>
<div id="mainA">mainA</div>
<div id="siderA2">siderA2</div>
<div id="adA">adA</div>
<div class="clear"></div>
</div>
通过CSS进行定义，将它们置于合适的位置，而相互间的距离完全由CSS进行控制。（右侧边的栏目内部样式，也是同样的道理也进行编写，这里不再细化与深入了。）
CSS 网页布局的意义在于将表现与内容分离，表现部分的东西，由CSS完成。而HTML只体现内容。为了一个边线，为了一个间距，单独在HTML中增加代码是不可取的。除非遇到浏览器兼容问题，否则应该尽最大可能避免。各层的嵌套，应该力求简单，不需要多层嵌套，尽量的少嵌套以提高执行效率、精减代码。
根据上面的HTML编码，编写CSS：
Example Source Code [www.52css.com]body {
margin:0;
padding:0;
}
#wrapA {
width:950px;
margin:0 auto;
background:#ccc;}
#siderA1,#mainA,#adA {
float:left;
}
#siderA1 {
width:320px;
height:560px;
margin-right:10px;
display:inline;
background:#3399CC;
}
#mainA {
width:430px;
height:560px;
background:#009966;
}
#siderA2 {
float:right;
width:180px;
height:690px;
background:#ff6600;
}
#adA {
width:760px;
height:120px;
margin-top:10px;
background:#666666;
}
.clear {
clear:both;
}
margin:0;
padding:0;
}
#wrapA {
width:950px;
margin:0 auto;
background:#ccc;}
#siderA1,#mainA,#adA {
float:left;
}
#siderA1 {
width:320px;
height:560px;
margin-right:10px;
display:inline;
background:#3399CC;
}
#mainA {
width:430px;
height:560px;
background:#009966;
}
#siderA2 {
float:right;
width:180px;
height:690px;
background:#ff6600;
}
#adA {
width:760px;
height:120px;
margin-top:10px;
background:#666666;
}
.clear {
clear:both;
}
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
最终的效果如图所示。
我们可以运行一下，查看最终的效果。
Source Code to Run [www.52css.com]本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
补充——对overbreak评论的回复
overbreak评论：
使用 blank10 和 bord2 是不是为了将来调整方便?
如果网站中所有的间距和边框都是用 blank10 和 bord2 实现的, 以后修改起来只用修改一次 css 就可以了; 如果单独每个容器用 margin 和 border 的话, 整体修改起来会比较麻烦?
52CSS回复：
CSS网页布局及网站重构的意义在于，表现与内容分离。内容就是内容，建立具有良好结构与语义的HTML文档为基础，表现部分由CSS样式来完成。不要将表现的内容（如边框，边距等）写在HTML文档内。试想，如果遇到局部调整，右侧区域不需要边框了或者某两层之间没有间距了，那么这些层的存在就没有意义了，遇到这样的调整，不只是调整样式就可以获得新的外观表现，HTML文档也需要跟着调整。表现与内容分离的原则根本反应不出来，也没有任何实际操作意义。
或许在一定的范围内，是能够方便于开发人员的调整与编码。相同垂直间隔10px，只需要加入blank10就可以了。这样的思路与表格布局无异了。在传统的表格布局时代，大家都是这样干的。不要为了一时方便增加HTML代码（可以思考一下，为什么表现与内容相分离？）。需要注意的是，浏览器可以缓存CSS文件，而对HTML文件是需要向服务器发送请求的。将表现层的内容最大程度的分离到CSS文件里去，大大的减化了HTML文件的大小。每一次的用户请求，将下载更为精简的文件，而CSS文件下载一次，即可直接读取缓存内的文件。这将大大的提高服务器的利用率与网站性能。从另一方面减少运行成本（服务器带宽成本），也提高了用户体验（打开速度更快）。
而SOHU此次新版的布局形式与方式，将CSS网页布局的优点抹杀了很多。很遗憾。
推荐图文
 没有任何图片文章 |
数据载入中，请稍后……
