html第二天div布局盒模型概念

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
<style> /*自适应: margin:0px auto;*/ /*margin特性: 1/上下相邻的普通元素,上下边距不会相加,会产生重叠现象。 2/两者重叠取最大值。 3/父子div也会发生重叠现象。 */ /*内联元素,块状元素转换: 1/display:none;//无 2/display:inline;//内联 3/displya:block;//块状 */ /*段落控制: 1/text-indent:20px;//段落缩进 2/text-align:center;//居中 */ /*字体控制: 1/font-weight:bold; 2/font-size:20px;//字体 3/line-height:46px;//行高 4/font-family:"微软雅黑";//字体 5/font:bold 23px/46px "微软雅黑"; 6/font-family:sans-serif sansif;//无衬线字体和有衬线字体 */ body { color:white; font-size:24px; } #body{ width:1002px; margin:0px auto; } #header{ width:1002px; height:100px; background:blue; } #main{ width:1002px; height:600px; background: yellow; } #lside{ width:700px; height:600px; background: yellow; float:left; } #rside{ width:302px; height:400px; float:right; } #footer{ width:1002px; height:100px; background: grey; } #lside .l_part{ width:320px; height:270px; margin:10px; background: black; float:left; border:white 5px outset; } #rside .r_part1{ width:292px; height:350px; background:pink; margin-top:10px; margin-right:10px; } #rside .r_part2{ width:292px; height:220px; background:brown; margin-top:10px; margin-right:10px; margin-bottom:10px; } </style>
</head>
<body>

<div id = "body">
    <div id = "header">头部</div>
    <div id = "main">
        <div id = "lside">
            <div class = "l_part">左上1</div>
            <div class = "l_part">左上2</div>
            <div class = "l_part">左下1</div>
            <div class = "l_part">左下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>

你可能感兴趣的:(html,div布局)