盒子模型应用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>盒子模型应用</title> <style type="text/css"> * { margin: 0; padding: 0; } .top { width: 100%; height: 50px; background-color: black; } .top_content { width: 75%; height: 50px; margin: 0px auto; background-color: blue; } .body { margin: 20px auto; width: 75%; height: 1500px; background-color: blanchedalmond; } .body_img { width: 100%; height: 400px; background-color: darkorange; } .body_content { width: 100%; height: 111px; background-color: blueviolet; } .body_no { width: 100%; height: 50px; background-color: aqua; } .footing { width: 75%; height: 400px; background-color: indigo; margin: 0px auto; } .footing_content { width: 100%; height: 330px; background-color: darkseagreen; } .footing_subnav { width: 100%; height: 70px; background-color: black; } </style> </head> <body> <div class="top"> <div class="top_content"> </div> </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> </body> </html>