|
在前面的文章中，我们分析了搜狐（sohu.com）首页的总体CSS布局情况。现在开始深入分析各模块的布局情况，loginNav顶部登录区和mainNav主导航区位于最上部，从这两个区域开始。这两个区域的主容器是两个DIV，id分别是loginNav和mainNav。赋予它们宽度950px，用margin实现居中对齐即可。这两个容器在页面中的位置如图所示：（可点击图片放大查看）
loginNav由三个区域组成。分别是loginPP通行通登录、setIndex设为首页、navRight右侧链接条。设置loginPP和setIndex向左浮动。而navRight向左浮动。实现容器的横向排列。在设置中注意外边距的控制，以及需要避免IE6的双倍边距的BUG，关于IE6双倍边距，
mainNav由两大区域组成。分别是sohuLogo搜狐LOGO和navList导航列表构成。而navList设置了三组ul列表，上下共三行列出来导航链接。这样操作比较方便。如果读者的网站导航较少，完全可以合并为一个ul进行编写。sohuLogo和navList均向左浮动，实现容器的横
向排列。
细心的读者或许弄不清各层的嵌套关系。我们要以看下面的图片，您将能一目了然的理解它们的编码。
在编码中我们特别注意到clear层的存在，此层是为了清除浮动。在firefox浏览器的，不清除浮动可能会带来混乱，破坏页面CSS布局。关于浮动与清除浮动的相关知识
|
