搜狐新版CSS布局分析 - loginNav和mainNav
在前面的文章中，我们分析了搜狐（sohu.com）首页的总体CSS布局情况。现在开始深入分析各模块的布局情况，loginNav顶部登录区和 mainNav主导航区位于最上部，从这两个区域开始。这两个区域的主容器是两个DIV，id分别是loginNav和mainNav。赋予它们宽度 950px，用margin实现居中对齐即可。这两个容器在页面中的位置如图所示：（可点击图片放大查看）
loginNav由三个区域组成。分别是loginPP通行通登录、setIndex设为首页、navRight右侧链接条。设置loginPP和 setIndex向左浮动。而navRight向左浮动。实现容器的横向排列。在设置中注意外边距的控制，以及需要避免IE6的双倍边距的BUG，关于 IE6双倍边距，您可以参考这里：http://www.52css.com/article.asp?id=144。最终实现这样的效果。
mainNav由两大区域组成。分别是sohuLogo搜狐LOGO和navList导航列表构成。而navList设置了三组ul列表，上下共三行列出来导航链接。这样操作比较方便。如果读者的网站导航较少，完全可以合并为一个ul进行编写。sohuLogo和navList均向左浮动，实现容器的横向排列。
loginNav和mainNav在页面中的位置及浮动关系如图如示：（可点击图片放大查看）
细心的读者或许弄不清各层的嵌套关系。我们要以看下面的图片，您将能一目了然的理解它们的编码。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
在编码中我们特别注意到clear层的存在，此层是为了清除浮动。在firefox浏览器的，不清除浮动可能会带来混乱，破坏页面CSS布局。关于浮动与清除浮动的相关知识，您可以参考下面的文章：
闭合浮动元素（clearing float）的简单方法
http://www.52css.com/article.asp?id=132
CSS中Float（浮动）相关文摘
http://www.52css.com/article.asp?id=534
CSS浮动float属性详解
http://www.52css.com/article.asp?id=576
CSS浮动布局基础
http://www.52css.com/article.asp?id=556
在下面的教程中，我们会继续深入分析细部的CSS布局情况，敬请关注52CSS.com教程更新！
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
loginNav由三个区域组成。分别是loginPP通行通登录、setIndex设为首页、navRight右侧链接条。设置loginPP和 setIndex向左浮动。而navRight向左浮动。实现容器的横向排列。在设置中注意外边距的控制，以及需要避免IE6的双倍边距的BUG，关于 IE6双倍边距，您可以参考这里：http://www.52css.com/article.asp?id=144。最终实现这样的效果。
mainNav由两大区域组成。分别是sohuLogo搜狐LOGO和navList导航列表构成。而navList设置了三组ul列表，上下共三行列出来导航链接。这样操作比较方便。如果读者的网站导航较少，完全可以合并为一个ul进行编写。sohuLogo和navList均向左浮动，实现容器的横向排列。
loginNav和mainNav在页面中的位置及浮动关系如图如示：（可点击图片放大查看）
细心的读者或许弄不清各层的嵌套关系。我们要以看下面的图片，您将能一目了然的理解它们的编码。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
在编码中我们特别注意到clear层的存在，此层是为了清除浮动。在firefox浏览器的，不清除浮动可能会带来混乱，破坏页面CSS布局。关于浮动与清除浮动的相关知识，您可以参考下面的文章：
闭合浮动元素（clearing float）的简单方法
http://www.52css.com/article.asp?id=132
CSS中Float（浮动）相关文摘
http://www.52css.com/article.asp?id=534
CSS浮动float属性详解
http://www.52css.com/article.asp?id=576
CSS浮动布局基础
http://www.52css.com/article.asp?id=556
在下面的教程中，我们会继续深入分析细部的CSS布局情况，敬请关注52CSS.com教程更新！
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
推荐图文
 没有任何图片文章 |
数据载入中，请稍后……
