1.例子引入!DOCTYPE html html head meta charsetutf-8 / title/title style typetext/css *{margin: 0;padding: 0;} .top{ width: 1200px; height: 24px; margin: 0 auto; background-color: deeppink; } .botton{ width: 1200px; height: 672px; margin: 0 auto; background-color: aliceblue; overflow: hidden;/* 清除浮动 */ } .zuo{ width: 87px; height: 672px; float: left; background-color: greenyellow; } .you{ width: 1113px; height: 672px; float: left; background-color: darkgreen; } .shang{ width: 1113px; height: 168px; background-color: cornflowerblue; } .left{ width: 408px; height: 168px; background-color: yellow; float:left; } .right{ width: 705px; height: 168px; background-color:orange; float:left; } .shang2{ width: 408px; height: 111px; background-color: lightpink; } .xia2{ width: 408px; height: 57px; background-color: blueviolet; } .xia{ width: 1113px; height: 504px; background-color: deeppink; overflow: hidden; } .zuo1{ width: 651px; height: 504px; background-color: yellow; float: left; } .zuo2{ float: left; width: 30px; height: 504px; background-color: orchid; } .you2{ float: left; width: 621px; height: 504px; background-color: cornflowerblue; } .shang3{ width: 621px; height: 419px; background-color: darkgoldenrod; } .xia3{ width: 621px; height: 85px; background-color: mediumspringgreen; } .you1{ float:right; width: 462px; height: 504px; background-color: yellowgreen; } /style /head body div classtop img srcimg/index_01.jpg/ /div div classbotton div classzuo img srcimg/index_02.jpg/ /div div classyou div classshang div classleft div classshang2 img srcimg/index_03.jpg/ /div div classxia2 img srcimg/index_05.jpg/ /div /div div classright img srcimg/index_04.jpg/ /div /div div classxia div classzuo1 div classzuo2 img srcimg/index_06.jpg/ /div div classyou2 div classshang3 img srcimg/index_07.jpg/ /div div classxia3 img srcimg/index_09.jpg/ /div /div /div div classyou1 img srcimg/index_08.jpg/ /div /div /div /div /body /html2.总结注意事项①在做盒子模型时先判断结构在中先进行结构排版分清楚上下还是左右。记住结构永远大于样式