编程练习，企业网站综合布局实战教程-慕课网

编程练习

小伙伴们，根据所学知识，实现如下图所示的简单两列布局，整个页面宽度为960px，背景颜色为#CFF。左侧盒子宽度为740px，背景颜色为#C9F，右侧盒子宽度为210px，背景颜色为#FCF。左侧和右侧盒子的高度均为300px。

效果图:

温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。

任务

一、在右侧代码的body标签中添加一个div，设置其class属性为mainBox。

二、在mainBox中添加两个div，其class属性分别为leftBox和rightBox。

三、在右侧代码的</head>之前，分别定义类选择器mainBox、leftBox、rightBox，并按照题目要求定义其CSS样式。

提示:
  1．根据任务要求设置相关CSS样式
  2. leftBox和rightBox需要嵌套在mainBox中

注意：leftBox和rightBox设置浮动之后脱离了普通的文档流，不再占用原来文档中的位置，因此无法把父div撑开。

解决的方法：

①可以给父div也设置高度为300px，使页面中的leftBox和rightBox看起来“好像”还在原来的位置；
②定义一个类选择器，并设置clear:both；清除浮动，同时为了解决IE6中div有高度的问题可以增加属性height:0;overflow:hidden;
其他解决方法可以参照上面的评测题

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
/*在此定义相应的类选择器，并根据要求设置相关CSS属性*/
</style>
</head>
<body>
</body>
</html>