                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /如何用CSS進行網頁布局

5-3編程挑戰

任務三中<body>中按照標準文檔流特征，本來也是先加載right層（它在前），后加載left層（它在后），為什么還要特意要求？編寫的代碼要兼容ie6，怎么做？謝謝！

另，我寫的代碼。幫我看看，懂得同學幫我改正一下，謝謝了！

body{ margin:0; padding:0; _padding:0;font-size:30px;color:#fff}
.top{width:100%;height:100px;background:#ccc;margin:}
.main{width:100%; height:500px;background:red;margin:0 auto;position:relative; overflow:hidden;}
.left{width:200px;height:500px;background:blue;float:left;left:0;top:0;}

.right{width:100%;height:500px;background:green;position:absolute;margin-left:210px;}
.foot{width:100%;background:yellow;clear:both;}

慕粉4340077

2016-11-12

源自：如何用CSS進行網頁布局 5-3

關注問題我要回答

456

操作

收起

2 回答

雨夜屠夫
2016-11-14

<!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:100px;margin:0?auto;background:#ccc;}
.main{background:red;}
.left{?width:200px;height:500px;background:blue;position:absolute;left:0;top:100px;}
.right{height:500px;margin-left:210px;background:green;}
.foot{height:50px;margin:0?auto;background:#f90;}
</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 回復有任何疑惑可以回復我~

收起回答

慕粉4340077 提問者

你的代碼我試了試，確實可以達到效果圖中的樣子，只是我還有幾個不明白的，如下：問一：top層和foot層寬度自適應不是應該設置為width:100%嗎？你的直接margin:0 auto;這個好像是水平自動居中的吧問二：right層寬度自適應怎么做的？你的代碼中沒有設置寬度啊，怎么回事？問三：right層要比left層先加載，這個按照標準文檔流的特點來說，不需要人為干涉也應該是這樣的?。ㄒ驗閞ight層在left層前面，所以先加載），為什么任務中要特意要求？問四：兼容ie6怎么做？好吧我的問題多了些，哈哈，給你添麻煩了！如果知道的話，懇請不吝賜教，謝謝了！！

2016-11-14 回復有任何疑惑可以回復我~

雨夜屠夫回復慕粉4340077 提問者

不指定寬度，默認是父級元素的100%吧，設定外邊距為0，意思就是充滿了整個頁面，也就是整個瀏覽器寬度了；答二：right層寬度自適應要求是其可以隨著瀏覽器大小變化寬度，所以不能指定寬度；答三：按照我的理解是，最后效果是left在左，right在右，按標準文檔流，left類標簽應該是在right的上方的，這樣也容易實現，但是實際的標簽中，right類標簽在上方，會麻煩一點；答四：不知道，我用IE6打開沒問題就沒管了，據說要寫hack腳本

2016-11-15 回復有任何疑惑可以回復我~

慕粉4340077 提問者回復雨夜屠夫

謝謝，你的回答很好。

2016-11-15 回復有任何疑惑可以回復我~