今天我要带领大家使用DIV+CSS切一个普通企业网站的首页，同时也是考量大家对之前所学CSS知识的一个理解程度。
我们先分析一下这个网页布局，大的部分我们可以分为头部，导航部分，BANNER部分，然后是主体内容区，最后是尾部，如下图。而在主体内容区域按照布局是一个典型的两列布局，然后在左侧内容区域又分为一个两列布局。我们可以把它理解为两列套两列
第一步:大家可能都知道我们的HTML标记在没有添加任何样式的时候，默认是有间距的，所以我们要先把把所有标记归置内（padding）外(margin)边距归置为0.
还有一种偷懒的办法你也可以先用*（代表所有）重置为0，最后等你完成所有了HTML编码在根据BODY中所使用的标记进行重置。
如:我们BODY标记中使用了,div,p那我们的选择符就写 body,div,p就可以了.不需要写*了.
其实这个地方还应该在加一个内容就是背景图片居顶平铺显示。那么咱们也不知道网页到底有高。剩下的部分怎么办。多数部分是。取渐变背景最下方的颜色进行填充。那么写法就如下：
通过PS测量得知,这五部分占据950宽,而且居中.我们可以使用CSS群组选择符,先让这五个DIV居中.
LOGO：一般这个部分有两个要求.1点击LOGO可以返回网站首页.2要注意SEO方面的？所以我们采用了如下HTML代码：
大家可以可以先想一下。然后在看我下边写CSS代码的，其实这个地方采用的是CSS以图换字技巧。CSS代码如下
为了避免问题，可以让UL也浮动。大家可以试一下，如果不设置浮动在IE各版本，火狐中表现的是否一致
总结：其实通过这边的讲解大家应该不难发现。这就是一个典型的两列布局。只不过内容换成了一个是H1,一个是UL。他们两个标记都是块元素。所以直接使用FLOAT属性即可
大家现在看一下，是不是解决了上边的问题呢。其实如果大家按照标准的盒模型计算，如果计算得当，不会出现这个问题。
默认li是块元素，是占据整行显示的,所以通过左浮动.使其在一行同行显示。之后在设置A的状态，达到咱们想要的鼠标悬停时整个背景发生变化这个结果 试验下:让LI具备宽高,然后A设置背景,能不能达到咱们效果,A不让变成块
display:block;让A元素变成块状，然后好为其设置宽高背景。这里面还有一个要点就是line-height:56px，同高度56px对应，可以实现什么效果呢。同学们想一下？
接着这个状态和鼠标悬停时是一致的，所以很简单，只需要在鼠标悬停状态后边在添加一个#nav ul li a#current选择符即可。你完成没
第六步：产品宣传banner图片，公司网站的话一般会为一个动画或者是js/jquery的特效。目前咱们直接就放置一个图片
第八步：内容的主体区域编码：通过上边的效果的图片，大家可以先想一下HTML如何编写。我是使用的DLDD的方式，大家一定要学会这个标记的用法，很常用，叙述产品时经常性用到。
