1.基础布局
行布局
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> body{margin:0;padding: 0;color:#fff; text-align: center;font-size: 16px} .header{width: 100%;height: 50px;background: #333;margin: 0 auto; line-height: 50px; position: fixed;} .banner{width: 800px;height: 300px;background: #30a457;margin: 0 auto;padding-top: 50px;} .container{width: 800px;height: 1000px;background: #4c77f2;margin: 0 auto;} .footer{width: 800px;height: 100px;background: #333;margin :0 auto;line-height: 100px;} </style> </head> <body> <div class="header">这是页面的头部</div> <div class="banner">这是页面的banner图</div> <div class="container">这是页面的内容</div> <div class="footer">这是页面的底部</div> </body> </html>
