简易的盒子模型

最新推荐文章于 2024-09-12 18:02:32 发布

cv小战士

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量69

点赞数

分类专栏： div块盒子模型

本文链接：https://blog.csdn.net/c210604/article/details/118527063

版权

html

div块同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

盒子模型

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           body{
               margin: 0 auto;/* 上面是0,左右居中...上右下左 */
               width: 1200px;/* 将此区域居中 */
           }
           /* 设置顶部区块 */
           .bTop{
               height: 70px;
               width: 1200px;
               background-color: #AAFFFF;
           }
           .bTopbotton{
               height: 30px;
               width: 1200px;
               background-color: #000000;
           }
           /* 设置中间区块 */
           .bMid{
               height: 400px;
               width: 1200px;
               background-color: cyan;
           }
           /* 设置底部区块 */
           .bBotton{
               height: 200px;
               width: 1200px;
               background-color: lightblue;
           }
           /* 设置中间区块左边部分 */
           .bMidleft{
               height: 400px;
               width: 200px;
               background-color: #00ff00;
               float: left;

           }
           /* 设置中间区块中部部分 */
           .bMidmid{
               height: 400px;
               width: 800px;
               background-color: bisque;
               float: left;
           }
           /* 设置中间区块右边部分 */
           .bMidright{
               height: 400px;
               width: 200px;
               background-color: deepskyblue;
               float: left;
           }
       </style>
   </head>
   <body> <div class="bTop">这是顶部</div>
           <div class="bMid">
               <div class="bMidleft">这是中左</div>
               <div class="bMidmid">这是中</div>
               <div class="bMidright">这是中右</div>
           </div>
           <div class="bBotton">这是底部</div>
       </div>
   </body>
</html>