html第一天div页面布局

最新推荐文章于 2022-08-20 15:21:27 发布

qq_28629495

最新推荐文章于 2022-08-20 15:21:27 发布

阅读量479

点赞数 1

分类专栏： html/css/div 文章标签： html 布局

本文链接：https://blog.csdn.net/qq_28629495/article/details/51305470

版权

html/css/div 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
<style>
    #body{
        width:1002px;
    }
    #header{
        width:1002px;
        height:100px;
        background:blue;
    }
    #main{
        width:1002px;
        height:400px;
        background:red;
    }
    #lside{
        width:700px;
        height:400px;
        background: yellow;
        float:left;
    }
    #rside{
        width:302px;
        height:400px;
        background: pink;
        float:right;
    }    
    #footer{
        width:1002px;
        height:100px;
        background: grey;        
    }
    #lside .l_part1{
        width:280px;
        height:200px;
        background: purple;
        float:left;
    }
    #lside .l_part2{
        width:280px;
        height:200px;
        background: green;
        float:right;
    }    
    #lside .l_part3{
        clear:left;
        width:280px;
        height:200px;
        background: orange;
        float:left;
    }
     #lside .l_part4{
        width:280px;
        height:200px;
        background: red;
        float:right;
    }   
    #rside .r_part1{
        width:302px;
        height:190px;
        background:snow;
        float:left;

    }
    #rside .r_part2{
        clear:left;
        width:302px;
        height:187px;
        background:brown;         
    }
</style>
</head>
<body>

<div id = "body">
    <div id = "header">头部</div>
    <div id = "main">
        <div id = "lside">主体 左
            <div class = "l_part1">左上1</div>
            <div class = "l_part2">左上2</div>
            <div class = "l_part3">左下1</div>
            <div class = "l_part4">左下2</div>
        </div>
        <div id = "rside">主体 右
            <div class = "r_part1">右上</div>
            <div class = "r_part2">右下</div>
        </div>
    </div>
    <div id = "footer">脚部</div>
</div>

</body>
</html>