今天的代码放在教室里就不先不用代码演示了；
这些先说说用浮动布局来实现酷狗的推荐主页。
要用到的HTML和CSS代码主要是 div(盒子模型)和flaot（浮动）关键字，和position（定位）；利用这三个知识点就能实现布局了；
我们先来看看要实现的布局的效果图，截图来自酷狗音乐网；
要实现这样的布局。我们先分析一下结构，这样我们便于在body里写出结构；首先我们看看主要结构，左边是一个盒子，右边是四个盒子分布均匀，格子状排列；这样在body里写一个大盒子（div）,大盒子里包含两个盒子（div）;由于div是行内元素，具有独占一行的特性，我们利用浮动将左边的盒子左浮动，右边的盒子右浮动，这样两个盒子都脱离了文档流，如果不对右边的盒子做右浮动的话，由于左边的盒子脱离了文档流，不占据之前的空间，但是依然占有原来的位置，如果要做到横向排列的话，就必须要对右边的盒子右浮动了，这样右边的盒子就会停留在左边盒子的右边。这样我们就实现了两个大盒子的主要布局。接下来，我们分析左边盒子的内容分，由背景图和覆盖层组成，顶部和底部都链接。我们设置好背景图片之后，顶部的图片我们用定位(position)使他固定在顶部，底部也是这样。最后我们的覆盖层也是一个盒子，但是我们用隐藏的方式让其不显示，并给他透明。我们在通过伪类连接和定位，当鼠标移到以背景图为盒子上时，覆盖层覆盖到背景图的盒子上。这样我们就实现了左边盒子的效果。
