搜狐新版CSS布局分析 - sogouSearch层
接着前面52CSS.com的内容，继续分析搜狐（sohu.com）首页的CSS布局，现在看看sogouSearch层的情况。
今天发现搜狐根据奥运作了一些主题调整，但总体的CSS布局并未改变，页面顶部有一些变动，将在最后的文章中再加以分析。
sogouSearch层紧随着ad_TOP层出现，这一层的主要功能是实现推搜狐公司的另一种产品“搜狗”的推广。sogouSearch层是高度较小，宽度与总体布局一样，均为950px。其内部分为四列，分别是：sogouLogo、Search (txtLeft)、hot和sogouIcon 层。请注意，这四层的均是赋予的类class名称，而非id。其中Search应用了两个类class：Search和txtLeft。这样的应用方式可以灵活的出现在布局中，为一个元素同时指定多个class是CSS布局很重要的技巧之一。sogouSearch层分为四列的示意图如下（可点击放大查看）。
sogouLogo、Search (txtLeft)和hot层向左浮动，sogouIcon层向右浮动，实现容器的水平排列。
其中Search (txtLeft)层分为上下两行，上部放置标签，下部放置表单，分别是SearchTag和SearchInupt层，如图所示。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
hot层为热点内容的文字链接。作者在hot层放置两个ul无序列表来实现文字链接，一个ul其实也能解决问题，这两个ul分别是：hotA和hotB。如图所示。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
sogouSearch层布局相对简单，很容易实现。在sogouLogo层和sogouIcon层内放置空标签span，用意是为了实现页面表现，个人认为并不可取，不必为页面表现增加额外的HTML标签是HTML编码的宗旨。sogouLogo层内使用了标题标签h1，在mainNav层的 sohuLogo部分也使用了标题标签h1。同一个页面出现标题标签h1，个人认为也是很不妥当。
sogouSearch层内部的嵌套关系，如图所示。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
今天发现搜狐根据奥运作了一些主题调整，但总体的CSS布局并未改变，页面顶部有一些变动，将在最后的文章中再加以分析。
sogouSearch层紧随着ad_TOP层出现，这一层的主要功能是实现推搜狐公司的另一种产品“搜狗”的推广。sogouSearch层是高度较小，宽度与总体布局一样，均为950px。其内部分为四列，分别是：sogouLogo、Search (txtLeft)、hot和sogouIcon 层。请注意，这四层的均是赋予的类class名称，而非id。其中Search应用了两个类class：Search和txtLeft。这样的应用方式可以灵活的出现在布局中，为一个元素同时指定多个class是CSS布局很重要的技巧之一。sogouSearch层分为四列的示意图如下（可点击放大查看）。
sogouLogo、Search (txtLeft)和hot层向左浮动，sogouIcon层向右浮动，实现容器的水平排列。
其中Search (txtLeft)层分为上下两行，上部放置标签，下部放置表单，分别是SearchTag和SearchInupt层，如图所示。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
hot层为热点内容的文字链接。作者在hot层放置两个ul无序列表来实现文字链接，一个ul其实也能解决问题，这两个ul分别是：hotA和hotB。如图所示。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
sogouSearch层布局相对简单，很容易实现。在sogouLogo层和sogouIcon层内放置空标签span，用意是为了实现页面表现，个人认为并不可取，不必为页面表现增加额外的HTML标签是HTML编码的宗旨。sogouLogo层内使用了标题标签h1，在mainNav层的 sohuLogo部分也使用了标题标签h1。同一个页面出现标题标签h1，个人认为也是很不妥当。
sogouSearch层内部的嵌套关系，如图所示。
本文作者：www.52CSS.com 如需转载请建立本站链接并明确注明出处！
推荐图文
 没有任何图片文章 |
数据载入中，请稍后……
