编程练习
任务
一、在右侧代码的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属性*/ .mainBox{ width:960px; background-color:#CFF; height:300px; } .leftBox{ width:740px; background-color:#C9F; height:300px; float:left; } .rightBox{ width:210px; background-color:#FCF; height:300px; float:right; } </style> </head>
<body> <!--在此添加相应的div标签--> <div class="mainBox"> <div class="leftBox"> </div> <div class="rightBox"></div> </div> </body> </html>
或者:
<!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属性*/ .mainBox{ width:960px; background:#cff; } .leftBox{ width:740px; height:300px; background:#c9f; float:left; } .rightBox{ width:210px; height:300px; background:#fcf; float:right; } .Box{ clear:both; height:0; overflow:hidden; } </style> </head> <body> <!--在此添加相应的div标签--> <div class="mainBox"> <div class="leftBox"></div> <div class="rightBox"></div> <div class="Box"></div> </div> </body> </html>