                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

这几项具体怎么实现呢

任务2：中间分为2两栏，其中，左侧（left）宽度为200px，右侧（right）宽度自适应

任务3：要求右侧（right）先加载，左侧（left）后加载

任务4：编写的代码要兼容ie6

resharpe

2016-06-18

源自：如何用CSS进行网页布局 5-3

关注问题我要回答

585

操作

收起

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.