html第一天div页面布局

来源：互联网发布：js防水涂料是柔性的吗编辑：程序博客网时间：2024/04/30 17:07
<!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>
1 0