css行布局

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>0</title>
<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;line-height: 300px; 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>

相关推荐