web 一列布局制作

最新推荐文章于 2022-10-13 11:27:10 发布

说来世事不如闲

最新推荐文章于 2022-10-13 11:27:10 发布

阅读量379

点赞数

分类专栏： WEB 文章标签：前端

本文链接：https://blog.csdn.net/caopuwisdom/article/details/52744071

版权

WEB 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           body{margin:0;padding:0;/*清除默认样式*/}
           .top{
               height:100px;
               /*不定义宽度，则充满整个浏览器*/
               background:blue;
           }
           .main{
               width:800px;
               height:300px;
               background:green;
               margin: 0 auto;/*0代表上下方向，auto代表左右，目的是居中*/
               }
           .foot{
               width: 800px;
               height: 100px;
               background: red;
               margin: 0 auto;
           }
       </style>
   </head>
   <body>
   <div class="top"></div>
   <div class="main"></div>
   <div class="foot"></div>
   </body>
</html>