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

這幾項具體怎么實現呢

任務2：中間分為2兩欄，其中，左側（left）寬度為200px，右側（right）寬度自適應

任務3：要求右側（right）先加載，左側（left）后加載

任務4：編寫的代碼要兼容ie6

resharpe

2016-06-18

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

關注問題我要回答

611

操作

收起

2 回答

Mr_Viker 回答被采納 +3 積分
2016-06-21

<!DOCTYPE?html>
<html>
????<head>
????????<mata?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????????<title>混合布局編程挑戰</title>
????????<style?type="text/css">
????????????body{
????????????????margin:0;
????????????????padding:0;
????????????????background:#000;
????????????}
????????????div{
????????????????background:#ccc;
????????????????font-size:24px;
????????????????text-align:center;
????????????}
????????????.top{
????????????????background:gray;
????????????????width:100%;
????????????????height:60px;
????????????????line-height:60px;
????????????}
????????????.main{
????????????????background:red;
????????????????line-height:500px;
????????????}
????????????.right{
????????????????background:green;
????????????????height:500px;
????????????????margin:0?0?0?210px;
????????????}
????????????.left{
????????????????background:blue;
????????????????width:200px;
????????????????height:500px;
????????????????position:absolute;
????????????????top:60px;
????????????????left:0;
????????????}
????????????.foot{
????????????????background:pink;
????????????????width:100%;
????????????????height:48px;
????????????????line-height:48px;
????????????}
????????</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>

并未考慮任務4.