【DIV+CSS入门教程】浮动(float)页面布局

前四节的大练习大家做的怎么样？有没有难度，如果你觉着有难度没有关系，这节课，我带着大家做一下这个练习！
【第一步 整体布局与公共CSS定义】
我们先来分析一下这个页面

 

一般网站都会做到点击logo，就会回到主页，应该怎么做呢，大家首先会想到，给图片加上链接就可以了，代码一般会这么写
<a href="#" id="logoLink"><img src="#" /></a>
不过KwooJan要介绍另外一种方法，将图片做成链接a的背景，同样可以达到上面说的效果，并且HTML代码就会更精简，少了<img...>，看看下面Logo栏的页面代码，红色的为将logo.gif作为背景的链接

HTML代码：
<div id="Logo">
<a href="#" id="logoLink"></a>
</div>

CSS代码
#Logo{
height:80px;/*公共代码中没有定义高度，在这里定义*/
}
#logoLink{
display:block;/*将链接a转化成块状元素，这样才能显示出背景*/
width:173px;
height:46px;
background:url(../Images/logo.gif) no-repeat;
float:left;/*为了让ie6和ff显示效果一样，如果不加上这句话，后面的margin-top:20px;两个浏览器解析不一样，大家可以去掉这句话，看看两者显示效果差别*/
margin-top:20px;/*设置a的顶部外边距为20像素，这样才能和浏览器顶部有段距离，才能和图片中做的一样*/
}

好到这里，头部含有logo的区域已经写完。