求大神给个这章有批注的答案代码
同学代码和评论那里太多了答案了 不知道那个是对的o(╯□╰)o 而且还看不懂绝对定位和相对定位那里，为什么要填
小时候很捣蛋
2016-03-29
6 回答
<!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=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{;height:80px;background:#ccc;}
/*设置中间栏CSS样式，给.main块元素添加相对定位属性，由于没设置相对位置参数，其位置就不变动，.main块元素就处在.top块元素下方，即中间栏。添加相对定位属性的目的是使其子元素.left用绝对定位后是相对.main块来移动的*/
.main{height:600px; background:#f00; position:relative;}
/*.left块绝对定位，相对.main移动，在left:0; top:0的地方，即左边。定宽定高。由于.right先加载，且为块元素，会占满.main一行，如果不指定位置，则相当于不改变.left原先的位置，就会跑到.right所处行的下面去。*/
.left{width:200px;height:600px;background:#00f; position:absolute; left:0; top:0;}
/*给.right设置左边距210px，为.left预留位置和缝隙，由于未设定宽度，宽度自适应*/
.right{height:600px;background:#0da; margin-left:210px}
.foot{height:50px;background:#f31;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<!--先加载right-->
<div class="right">right</div>
<!--后加载left-->
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
查看2条回复
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{height:100px; background:#ccc;} //宽度自适应时不需要设定宽度
.main{height:500px; background:red; position:relative;} //main中包含一左一右两个盒子，子级盒子需绝对定 位，所以父级盒子要相对使用定位
.left{width:200px; height:500px; background:blue; position:absolute; top:0; left:0;}//左盒子上左紧贴main盒子
.right{height:500px; background:green; margin:0 0 0 220px;}margin四个值分别为上右下左，左盒子宽200px，多出20px是为了左右两个盒子的“图中红色”距离
.foot{height:50px; background:yellow;}
</style>
ps:颜色没有完全按照它的那个设置，但是整体效果出来了。希望可以帮到你。
<!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=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{background:#999; height:200px;}
.main{background:red;position:relative;}
.left{display:block;width:200px;height:500px;background:blue; position:absolute;left:0;top:0px;}
.right{display:block; height:500px;margin:0 0 0 210px; background:green;}
.foot{background:orange;height:100px;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
<div class="right">right</div>
<div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
举报
0/150
提交
取消
