* { margin: 0px; padding: 0px; } .top { width: 100%; height: 50px; background-color: antiquewhite; } .top_content { width: 75%; height: 50px; margin: 0px auto; /*上下为0，左右自适应*/ background-color: aqua; } .body { margin: 20px auto; width: 75%; height: 1500px; background-color: aquamarine; } .body_img { width: 100%; height: 400px; background-color: beige; background-image: url(http://images.cnblogs.com/cnblogs_com/ttzzyy/1076163/t_8L7BYYH7PD%606Z@3F4X]2V8H.png); } .body_content { width: 100%; height: 1100px; background-color: chartreuse; } .body_no { width: 100%; height: 50px; background-color: coral; } .footing { width: 75%; height: 400px; background-color: darkblue; margin: 0px auto; } .footing_content{ width: 100%; height: 350px; background-color: forestgreen; } .footing_subnav{ width: 100%; height: 50px; background-color: mediumturquoise; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="tzy.css" type="text/css"> </head> <body> <div class="top"> <div class="top_content"> </div> <div class="body"> <div class="body_img"></div> <div class="body_content"> <div class="body_no"></div> </div> </div> <div class="footing"> <div class="footing_content"></div> <div class="footing_subnav"></div> </div> </div> </body> </html>