布局基础：三行两列布局(课后作业：三行三列布局)
发布时间：2010年4月21日 文章分类：xhtml+css 文章作者：Hitomi 浏览次数：次
上节课讲了最简单的两列布局，还没有学习过的朋友请看这里【两列布局教程】
今天延伸一下，多两横行：页眉和页角，让中间分成左右两列，效果图如下：
根据图中效果写XHTML，因为三横行有个共同的样式：宽度一样，所以我们这次用一个class属性
XML/HTML代码
- <div id="wrap">
- <div class="sub_wrap" id="head"></div>
- <div class="sub_wrap" id="main">
- <div id="left"></div>
- <div id="right"></div>
- </div>
- <div class="sub_wrap" id="foot"></div>
- </div>
id="wrap"同样还是大外套，它控制整个网页的宽度，居左，居中或居右，我们这里只控制宽度，默认就是居左。
class="sub_wrap"是id="head"、id="main"、id="foot"样式一样的部分，所以让他们三个用一个class，这样同样的样式就不用重复写三次了
最后id="left"和id="right"就是昨天讲的两列布局
布局思路说完了，下面写CSS代码：
CSS代码
- #wrap{
- width:400px;
- padding:5px;
- background:#99FF00;
- }
- .sub_wrap{
- width:400px;
- float:left;
- }
- #head,#foot{
- background:#666666; /* 这里用,表示#head和#foot共用此CSS */
- height:80px;
- }
- #foot{
- height:40px; /* #foot的高度和#head不同，所以单独定义一次 */
- }
- #main{
- background:#006699;
- width:390px;
- padding:5px;
- }
- #left{
- float:left;
- background:#FF99FF;
- width:155px;
- height:300px;
- }
- #right{
- float:rightright;
- background:#FF9966;
- width:230px;
- height:300px;
- }
本节课CSS属性部分没有新鲜东西，都是上节课用到的，而#head,#foot选择符这里有个逗号,需要讲解一下，这里的,是让#head和#foot共用一个CSS样式的一种简写，不需要重复写两次同样的属性了。
本节课没有太多新的内容，主要就是消化上节课的内容，并且扩展以下，下面说一下这节课的作业：三行三列布局，布局图片我放在下面了，具体思路如何写xhtml和css请同学们自己思考吧，希望看过的朋友认真完成作业~~
