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>css网页布局
原文地址：https://www.cnblogs.com/code1992/p/8372839.html