章节
问答
课签
笔记
评论
占位
占位

编程练习

小伙伴们,根据所学知识,实现如下图所示的简单两列布局,整个页面宽度为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;
其他解决方法可以参照上面的评测题
?不会了怎么办

小伙伴们,可以在右下角的"源代码下载"区,下载参考代码。

||
1
<!DOCTYPE html
    PUBLIC "
    -//W3C//DTD
    XHTML 1.0
    Transitiona
    l//EN"
    "http://www
    .w3.org/TR
    /xhtml1/DTD
    /xhtml1
    -transition
    al.dtd">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 马鸿蕾
overflow:hidden;可以将超过父元素的部分隐藏

最新回答 / 慕田峪4402732
overflow:visible;这个是啥意思呀,没太明白

已采纳回答 / 慕梦前来
这就不好看出来 ,你可以复制到代码编译器里看一下,有些明显的错误还是可以识别的

最新回答 / 無奈枫葉
我错了, 是因为你的 .mainBox  设置 height 为 0 了。

已采纳回答 / qq_慕容2449471
<div class='mainBox'></div>应该包含<div class='leftBox'></div><div class='rightBox'></div>这俩,你给写成并列了

最新回答 / 慕妹2309061
不写高度   父元素高度会是auto   撑开他可以让父元素也左浮动   如.mainBox{width:960px;background:#CFF;float: left;}
clear:both 是清除左右浮动   overflow:hidden是隐藏超出部分   比如页面出现因为宽度问题导致的拉条
用这个可以隐藏超出部分解决该问题以上为个人见解,若有错误还请指正

已采纳回答 / 陈坚泓
div如果不漂浮就会独占一行,你第一个例子:第一个div没有漂浮  后面的div不管漂不漂浮 都只能在第一个div的下一行排列你第二个例子:前连个div漂浮了  只要宽度够 就会显示在一行上 相当于从一楼到了二楼  第三个div虽然没有漂浮 但是还是会显示在第一行 也就是会去一楼   如果前面两个div有重叠的地方 第三个div在下层 

已采纳回答 / 慕哥9344498
你想做成什么效果?<...图片...>是这样的吗

已采纳回答 / wjxjswn
<!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=gb23...

已采纳回答 / orangecat00
左右指的是子DIV吗? 如果不设置子div高度,那它的高度由其内容撑开并影响

最新回答 / l默l
可以,margin是外边距,是盒子模型的一部分,而浮动是作用在整个盒子模型上的

最新回答 / 迎风向上乀
把height去掉结果也一样的。我习惯写的时候不写height=0; 那么这个divmain的高度就是随着内部高度自由变化的。

最新回答 / 慕移动9181930
使用#会返回到页首.用###就不会有任何反应.折叠属性之后,如何展开呢??谢谢分享

已采纳回答 / qq_紫星幻月_0
leftbox 写成lefebox了
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言