<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子上下布局案例</title> <style> .top, .banner, .main, .footer{ width: 900px; background-color: #eeeeee; border: 1px dashed #cccccc; margin: auto; } .top{ height: 80px; } .banner{ height: 120px; margin: 5px auto 0; } .main{ height: 500px; margin: 5px auto; } .footer{ height: 100px; } </style> </head> <body> <div class="top">top</div> <div class="banner">banner</div> <div class="main">main</div> <div class="footer">footer</div> </body> </html>
转载于:https://www.cnblogs.com/axianz/articles/10660812.html