好~！第一行搞定！
下面的两行红色的QQ群信息怎么做？其实这个有很多办法
方法一：ul、li或者dl、dt、dd来布局
方法二：表格(Table)来布局
方法三：用单纯的标签来布局比如<p>、<span>、<div>等标签
其实在这里，我最推荐第二种方法，可能大家看到这里挺想不透的，或者觉着用Table很丢人，好似没有什么技术含量似的，其实这时候如果你不用Table，反而认为你的技术含量低，自己给自己找麻烦，为什么这么说呢
首先你必须知道DIV和Table的诞生目的不一样，DIV的诞生就是用来布局页面，而Table的诞生就是为了放数据，大家看KwooJan所有写的代码，只有布局页面大板块的时候才用，还记得上节课一开始布局页面板块的时候代码么
<div id="Logo"></div>
<div id="Nav"></div>
<div id="Banner"></div>
<div id="Content"></div>
<div id="Footer"></div>
整个页面就这5个DIV，其他地方一般不用，因为DIV的使命就是布局页面！
大家经常会进入一个误区，会认为在Web2.0时代，只要页面中用了Table就是没有技术含量，就是丢人，要是页面中没有一个table，所有元素全部用DIV做，那就是牛人！大家注意了，要是某人对你说，我的整个网站没有应用一个Table，这时候你就可以认为这个人做页面没有什么技术含量，并且CSS代码相当庞杂，根本不能算是一个高手，顶多是一个DIV的狂热分子，做的页面也能说是标准，很多用Table就可以简简单单实现的效果，非要用DIV去实现，不仅使CSS文件相当的臃肿，而且使页面加载速度变慢。
所以在这里KwooJan提醒大家，一定一定要走出这个误区！
好了说了这么多，这块的代码如下：
HTML代码：
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="36%" height="20">1群：5505810</td>
<td width="64%">2群：87951377</td>
</tr>
<tr>
<td height="20">3群：73513641</td>
<td>4群：72263578</td>
</tr>
</table>
CSS代码：
#Content #ContentR table{
font-size:12px;
color:#900;
}
最后一句话就更简单了，代码如下
HTML代码：
<span>希望有强烈进取精神和互助精神的朋友请加入！一块探讨一块交流一块学习！</span>
CSS代码：
#Content #ContentR span{
font-size:12px;
}
至此我们每个版块均以布局完毕，但是却有两点瑕疵：
1）IE6和FF中有一点却显示的却不一样，底部版权在FF中却跑到了的右侧ContentR的下面，如图：
产生原因：是因为id为Content的div，没有自动适应里面ContentL的高度
解决方法：最简便的方法是设置Content的CSS属性overflow:hidden;
怎么样问题解决了吧~
2）因为ContentR的高度没有ContentL的高度高，所以在ContentR的下面留有一块空白，如图：
解决方法：只需要把Content的背景颜色设置成和ContentR背景颜色一样就OK了
这个问题也解决了吧~
最终效果
至此，整个页面算是布局完成了，感觉怎么样？有不懂的就回复帖子告诉我
顺便说一下：最终代码其实还可以进行精简，这个算是给大家一个思考题了
- 上一篇:用float布局页面(3)
- 下一篇:CSS命名规则