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

来源：互联网发布：淘宝30天最低价查询编辑：程序博客网时间：2024/05/16 06:04
<!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>
0 0