小米官网基本布局

最新推荐文章于 2025-05-16 14:01:28 发布

芋泥波波.

最新推荐文章于 2025-05-16 14:01:28 发布

阅读量443

点赞数 4

文章标签： html css 前端

本文链接：https://blog.csdn.net/2302_80058560/article/details/139026073

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>小米guangwang</title>
       <style>
           *{
               padding: 0;
               margin: 0;
           }
           .hbox{
               height: 50px;
               width: 100%;
               margin: auto;
               border: 1 px solid black;
               background-color:black;
           }
           .rbox{
               height: 50px;
               width: 1200px;
               margin: auto;
               border: 1 px solid red;
               background-color: hotpink;
               }
               .Lbox{
                   height: 50px;
                   width: 600px;
                   border: 1 px solid orange;
                   background-color: orange;
                   float:left;
                   }
                   .nbox{
                       height: 50px;
                       width: 300px;
                       border: 1 px solid skyblue;
                       background-color: skyblue;
                       float:right;
                   }
                   .qbox{
                       height: 80px;
                       width: 1200px;
                       border: 1 px solid blanchedalmond;
                       background-color: blanchedalmond;
                       margin: auto;
                       margin-top: 10px;
                   }
                   .q1Lbox{
                       height: 80px;
                       width: 100px;
                       border: 1 px solid yellow;
                       background-color: yellow;
                       float: left;
                   }
                   .q2box{
                       height: 80px;
                       width: 400px;
                       border: 1 px solid pink;
                       background-color: pink;
                       margin: auto;

                   }
                   .q3box{
                       height: 80px;
                       width: 150px;
                       border: 1 px solid plum;
                       background-color:plum;
                       float: right;
                       margin: -79px;
                   }
                   .bigbox{
                       height: 600px;
                       width: 1200px;
                       border: 1 px solid lightblue;
                       background-color:lightblue;
                       margin: auto;
                       margin-top: 10px;
                       position: relative;
                       }
                   .b1box{
                           height: 600px;
                           width: 300px;
                           border: 1 px solid green;
                           background-color:green;
                           float: left;


                       }
                       .b2box{
                           height: 600px;
                           width: 900px;
                           border: 1 px solid peru;
                           background-color:peru;
                           float: right;
                       }
                       .zbox{
                       height: 200px;
                       width: 1200px;
                       border: 1 px solid palegreen;
                       background-color:palegreen;
                       margin: auto;
                       margin-top: 10px;
                       }
                       .z1box{
                           height: 200px;
                           width: 280px;
                           border: 1 px solid rosybrown;
                           background-color:rosybrown;
                           margin-right: 10px;
                           float: left;
                       }
                       .w1box{
                           height: 70px;
                           width:70px ;
                           border:1 px solid aquamarine ;
                           background-color: aquamarine;
                           margin-top: 10px;
                           margin-right: 10px;
                           float: left;

                       }
                   .z2box{
                       height: 200px;
                       width: 300px;
                       border: 1 px solid pink;
                       background-color:pink;
                       margin-right: 10px;
                       float: left;
                   }
           .z3box{
               height: 200px;
               width: 300px;
               border: 1 px solid salmon;
               background-color:salmon;
                   float: left;

           }
           .z4box{
               height: 200px;
               width: 300px;
               border: 1 px solid lavender;
               background-color:lavender;
               float: left;
           }
           .Ybox{
               height: 200px;
               width: 1200px;
               border: 1 px solid lemonchiffon;
               background-color:lemonchiffon;
               margin: auto;
               margin-top: 10px;
           }
       </style>
   </head>
   <body>
       <div class="hbox">
           <div class="rbox">
               <div class="Lbox"></div>
               <div class="nbox"></div>
           </div>
       </div>
       <div class="qbox">
           <div class="q1Lbox"></div>
           <div class="q2box"></div>
           <div class="q3box"></div>
       </div>
       <div class="bigbox">
           <div class="b1box"></div>
           <div class="b2box"></div>
       </div>
       <div class="zbox">
           <div class="z1box">
               <div class="w1box"></div>
               <div class="w1box"></div>
               <div class="w1box"></div>
               <div class="w1box"></div>
               <div class="w1box"></div>
               <div class="w1box"></div>
           </div>
           <div class="z2box"></div>
           <div class="z3box"></div>
           <div class="z4box"></div>
       </div>
       <div class="Ybox"></div>
   </body>
</html>