搜狐新版CSS布局分析 - ad_TOP层
在52CSS.com前面的文章中，我们分析了搜狐（sohu.com）首页的总体CSS布局情况。loginNav顶部登录区和mainNav主导航区的布局情况。紧随着loginNav顶部登录区和mainNav主导航区的是ad_TOP区域。这一区域从名称上看，体现了搜狐首屏广告的内容。分为四列的结构。如图所示（可点击放大查看）。
搜狐的ad_TOP区域由column140、column465、column150和column180这四个div组成。请您注意，这四个称谓不是id名称，是通用类class。其中column140、column465和column150向左浮动，column180向右浮动，形成了四个层的横向排列。它们之间的关系如图所示。
标签切换效果，在52CSS.com以前的文章中也有过深入的介绍，您可以参考：
CSS布局实例：CSS标签切换代码实例教程
http://www.adobe8.net/School/200811/1287.shtml
标签切换效果的原理，主要是通过一段javascript来控制元素的隐藏与显示。鼠标动作触发javascript事件，调用不同的javascript函数，对元素进行控制。层的原理如图所示。
搜狐应用了较为精减的javascript脚本，不过写在了文档内部，而没有分离出去，这一点是可以避免的。将行为层的东西也应该分离到HTML文档以外。通过引入JS文件实现。javascript脚本如下：
Example Source Code [www.52css.com]
二、column465层
column465层占据了ad_TOP层较大的位置，基本处于中部，向左浮动。分为上下三行布局，分别由list12、ad450和list12组成。如图所示。
在这次搜狐（sohu.com）新版布局中发现了一个有趣的现象，容器与容器之间的垂直间距都单独用div来间隔，赋予了通用的类“blank8”等。我们猜出不出作者的用意是什么。只是不要在HTML文档中插入不必要的标签，为什么不通过外边距的方式来解决呢，为了间距给HTML增加DIV有点没有必要。不知道作者有何开发思路。如果作者看到此文，欢迎发表评论。
三、column150层
column150层位于ad_TOP层右侧第二个的位置，不过它是向左浮动。column150层包括了五个层。前四个层都应用类class为 txtList，并赋予ID分别为focusTable1、focusTable2、focusTable3和focusTable4。最后是 menu150R层。与前面的标签切换类似，前面的标签切换有三项，这里的标签切换有四项。focusTable1、focusTable2、 focusTable3和focusTable4层向左浮动。menu150R层向右浮动。column150层的布局情况如图所示。
关于切换的脚本与原理，与上面的内容类似，不再赘述。
四、column180层
column180层位于ad_TOP层的最右侧。column180层比较让人费解。作者将此处设置成了三个容器。在column180层内包括两层 bord04和ad_A层。bord04实现左侧边框效果。而在ad_A层内又包括TurnAD351层。在TurnAD351层内再放置内容“广告图片 ”。
下面的图片，左边为SOHU目前的布局情况。右边为优化后的布局情况。
优化后的布局减少了嵌套，只需要一个层就可以解决问题，实现同样的效果。在CSS设置时，定义右边框为1px的灰色实线。定义上下左右内边距为合适的位置。放入内容“广告图片”即可。大大减化了代码。如果页面或网站的其它地方有相似的内容，通过群组选择器来实现，而不是为HTML增加额外的代码。
至此。ad_TOP区域的布局情况分析完毕，详细的结构如下图所示。
在布局中有两个我个人认为欠妥，比较费解的地方：
1、容器与容器之间的垂直间距单独用div来间隔。
2、column180层为何要多层嵌套，边线单独用div实现。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
搜狐的ad_TOP区域由column140、column465、column150和column180这四个div组成。请您注意，这四个称谓不是id名称，是通用类class。其中column140、column465和column150向左浮动，column180向右浮动，形成了四个层的横向排列。它们之间的关系如图所示。
在末尾class类为clear的层的作用是为了清除浮动。
我们注意到，在命名上可能需要斟酌，CSS布局的初衷是为了表现与内容分离，建立具有语义，具有更强适应性的网站，也被称之为“网站重构”。而 column140、column465、column150和column180这样的命名方式，将表现部分的内容融合到了命名当中，如：column465代表了宽度为465px的列。且不说不具有语义，试想，若网站需要调整，仅通过CSS实现“网站重构”，将此列的宽度变更为 480px。此时column465的名称不但不具有任何意义，反而误导了团队成员或其它后续开发人员。
关于CSS的更多只是，你可以查看我们的DW专栏
http://www.adobe8.net/School/Dreamweaver/Index.shtml
下面我们依次分析column140、column465、column150和column180层的布局情况。
一、column140层
column140层位于ad_TOP层的最左侧。column140层向左浮动。内部有三个主要元素构成，分别是list12、menu140L和txtList。
list12位于顶部，作为文字链接。menu140L和txtList组成了标签切换元素，menu140L为标签选项向左浮动，txtList为链接内容的容器向右浮动。
请注意，txtList内部包含三个层，应用类list12，分别赋予ID为hbTable1、hbTable2和hbTable3。
这三个层在同一时刻只有一个是可视了，以实现标签切换的效果。column140层的布局情况如图所示。
标签切换效果，在52CSS.com以前的文章中也有过深入的介绍，您可以参考：
CSS布局实例：CSS标签切换代码实例教程
http://www.adobe8.net/School/200811/1287.shtml
标签切换效果的原理，主要是通过一段javascript来控制元素的隐藏与显示。鼠标动作触发javascript事件，调用不同的javascript函数，对元素进行控制。层的原理如图所示。
搜狐应用了较为精减的javascript脚本，不过写在了文档内部，而没有分离出去，这一点是可以避免的。将行为层的东西也应该分离到HTML文档以外。通过引入JS文件实现。javascript脚本如下：
Example Source Code [www.52css.com]function hbTab(n) {
for (var i = 1; i <= 3; i++) {
if (i == n) {
getObject("hbTab" + i).className = "ad_Tabopen";
getObject("hbTable" + i).style.display = "";
} else {
getObject("hbTab" + i).className = "ad_Tabclose";
getObject("hbTable" + i).style.display = "none";
}
}
}
for (var i = 1; i <= 3; i++) {
if (i == n) {
getObject("hbTab" + i).className = "ad_Tabopen";
getObject("hbTable" + i).style.display = "";
} else {
getObject("hbTab" + i).className = "ad_Tabclose";
getObject("hbTable" + i).style.display = "none";
}
}
}
二、column465层
column465层占据了ad_TOP层较大的位置，基本处于中部，向左浮动。分为上下三行布局，分别由list12、ad450和list12组成。如图所示。
在这次搜狐（sohu.com）新版布局中发现了一个有趣的现象，容器与容器之间的垂直间距都单独用div来间隔，赋予了通用的类“blank8”等。我们猜出不出作者的用意是什么。只是不要在HTML文档中插入不必要的标签，为什么不通过外边距的方式来解决呢，为了间距给HTML增加DIV有点没有必要。不知道作者有何开发思路。如果作者看到此文，欢迎发表评论。
三、column150层
column150层位于ad_TOP层右侧第二个的位置，不过它是向左浮动。column150层包括了五个层。前四个层都应用类class为 txtList，并赋予ID分别为focusTable1、focusTable2、focusTable3和focusTable4。最后是 menu150R层。与前面的标签切换类似，前面的标签切换有三项，这里的标签切换有四项。focusTable1、focusTable2、 focusTable3和focusTable4层向左浮动。menu150R层向右浮动。column150层的布局情况如图所示。
关于切换的脚本与原理，与上面的内容类似，不再赘述。
四、column180层
column180层位于ad_TOP层的最右侧。column180层比较让人费解。作者将此处设置成了三个容器。在column180层内包括两层 bord04和ad_A层。bord04实现左侧边框效果。而在ad_A层内又包括TurnAD351层。在TurnAD351层内再放置内容“广告图片 ”。
下面的图片，左边为SOHU目前的布局情况。右边为优化后的布局情况。
优化后的布局减少了嵌套，只需要一个层就可以解决问题，实现同样的效果。在CSS设置时，定义右边框为1px的灰色实线。定义上下左右内边距为合适的位置。放入内容“广告图片”即可。大大减化了代码。如果页面或网站的其它地方有相似的内容，通过群组选择器来实现，而不是为HTML增加额外的代码。
至此。ad_TOP区域的布局情况分析完毕，详细的结构如下图所示。
在布局中有两个我个人认为欠妥，比较费解的地方：
1、容器与容器之间的垂直间距单独用div来间隔。
2、column180层为何要多层嵌套，边线单独用div实现。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
推荐图文
 没有任何图片文章 |
数据载入中，请稍后……
