求大神給個這章有批注的答案代碼
同學代碼和評論那里太多了答案了 不知道那個是對的o(╯□╰)o ?而且還看不懂絕對定位和相對定位那里，為什么要填
小時候很搗蛋
2016-03-29
6 回答
舉報
0/150
提交
取消
2016-03-29
<!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>
2022-03-23
是每種課程內的WIKI內嗎？怎么找不到?。?a >其他三個組件是在后邊的課程講，在這里知道是在配置文件中注冊組件的
2016-04-04
這里為什么不能用浮動那，看你們都是用定位來實現，有大神能解釋下嗎
2016-03-29
<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:顏色沒有完全按照它的那個設置，但是整體效果出來了。希望可以幫到你。
2016-03-29
使用 絕對定位position:absolute;需要 父級元素 相對定位position:relative;使用，否則絕對定位相對最外側的定位元素定位（沒有則相對body）
2016-03-29
<!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>