html 첫날div 페이지 레이아웃

11220 단어 html배치
<!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>

좋은 웹페이지 즐겨찾기