html传统前端布局制作（以小米商城为例，该文章仅学习交流使用）

枕梦东栏

已于 2024-05-12 19:03:54 修改

阅读量531

点赞数 19

文章标签：前端 html 学习

于 2024-05-12 19:02:28 首次发布

本文链接：https://blog.csdn.net/2401_83334819/article/details/138763609

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>mi</title>
       <link href="new_file.css" rel="stylesheet" />
       <style>
           .box {
               width: 1226px;
               height: 100%;
               background-color: aqua;
               border: 1px solid black;
               margin: auto;
           }

           .box01 {
               width: 1556px;
               height: 40px;
               background-color: black;
               border: 1px solid black;
               margin: auto;
               margin-bottom: 10px;
           }

           .box02 {
               width: 1226px;
               height: 50px;
               /* background-color: blue; */
               border: 1px solid black;
               margin: auto;
               margin-bottom: 10px;
           }

           .box03 {
               width: 1226px;
               height: 100px;
               /* background-color: blue; */
               border: 1px solid black;
               margin: auto;
               margin-top: 10px;
           }

           .box04 {
               width: 1500px;
               height: 30px;
               border: 1px solid red;
           }

           .box05 {
               width: 1210px;
               height: 25px;
               border: 1px solid green;
               text-align: center;
               margin: auto;
               float: left;
           }

           .box06 {
               width: 340px;
               height: 25px;
               border: 1px solid green;
               text-align: center;

}

           .box07 {
               width: 90px;
               height: 50px;
               border: 1px solid greenyellow;
           }

           .box08 {
               width: 730px;
               height: 35px;
               border: 1px solid aquamarine;
               text-align: center;
           }

           .box09 {
               width: 280px;
               height: 35px;
               border: 1px solid purple;
           }

           .box1 {
               width: 1226px;
               height: 450px;
               border: 1px solid black;
               margin: auto;
           }

           .box2 {
               width: 250px;
               height: 450px;
               background-color: gray;
               border: 1px solid black;
           }

           .box3 {
               width: 1226px;
               height: 300px;
               border: 1px solid black;
               overflow: hidden;
               margin: auto;
               margin-top: 15px;
           }

           .box4 {
               width: 300px;
               height: 295px;
               border: 1px solid black;
               box-sizing: border-box;
               /* 确保小盒子的边框和内边距不会增加实际占据的空间,避免小盒子因浮动导致缩小后消失 */
               float: right;
               margin: 2px;
           }

           .box5 {
               width: 1226px;
               height: 850px;
               border: 1px solid black;
               overflow: hidden;/*清除浮动*/
               margin: auto;
               margin-top: 3px;
           }

           .box6 {
               width: 200px;
               height: 850px;
               border: 1px solid red;
           }

           .box7 {
               width: 250px;
               height: 406px;
               border: 1px solid black;
               box-sizing: border-box;
               float: right;
               text-align: center;

}

           a {
               margin-right: 20px;
           }

           h5 {
               line-height: 10px;
           }

           h6 {
               float: right;
               text-align: center;
               margin: 0;
           }
       </style>
   </head>
   <body>
       <div class="box01">
           <div class="box04">
               <div class="box05">
                   <a href="#">小米官网</a>
                   <a href="#">小米商城</a>
                   <a href="#">小米澎湃OS</a>
                   <a href="#">小米汽车</a>
                   <a href="#">云服务</a>
                   <a href="#">loT</a>
                   <a href="#">有品</a>
                   <a href="#">小爱开放平台</a>
                   <a href="#">资质证照</a>
                   <a href="#">协议规则</a>
                   <a href="#">下载app</a>
                   <a href="#">Select Location</a>
               </div>
               <div class="box06">
                   <a href="#">登录</a>
                   <a href="#">注册</a>
                   <a href="#">消息通知</a>
                   <a href="#">购物车（0）</a>
               </div>
           </div>
       </div>
       <div class="box02">
           <div class="box07"><img src="img/logo.png" width="90px" height="50px"/></div>
           <div class="box08">
               <a href="#">Xiaomi手机</a>
               <a href="#">Redmi手机</a>
               <a href="#">电视</a>
               <a href="#">笔记本</a>
               <a href="#">平板</a>
               <a href="#">家电</a>
               <a href="#">路由器</a>
               <a href="#">服务中心</a>
               <a href="#">社区</a>
           </div>
           <div class="box09">
               <a href="#">
                   <h6>🔍</h6>
               </a>
           </div>
       </div>

       <div class="box"></div>
       <div class="box1">
           <img src="img/米车.jpg" align="right" width="976px" height="450px">
           <div class="box2">
               <h5>手机</h6>
                   <h5><br />电视</h5>
                   <h5><br />家电</h5>
                   <h5><br />笔记本平板</h5>
                   <h5><br />出行穿戴</h5>
                   <h5><br />耳机音箱</h5>
                   <h5><br />健康儿童</h5>
                   <h5><br />生活箱包</h5>
                   <h5><br />智能路由器</h5>
                   <h5>电源配件</h5>
           </div>
       </div>
       <div class="box3">
           <div class="box4"><img src="img/耳机.png" width="300px" height="295px" /></div>
           <div class="box4"><img src="img/米电视.jpg" width="300px" height="295px" /></div>
           <div class="box4"><img src="img/米14.png" width="300px" height="295px" /></div>
           <div class="box4"><img src="img/屏幕截图 2024-05-12 141713.png" width="300px" height="295px" /></div>
       </div>
       <div class="box03"><img src="img/小米14pro.webp" width="1226px" height="100px" /></div>
       <div class="box5">
           <div class="box6"><img src="img/米14U.webp" width="200px" height="850px" /></div>
           <div class="box7">
               <img src="img/k70pro.webp" width="125px" height="130px" />
               <h3>Redmi K70pro</h3>
               <h4>第三代骁龙8 年度旗舰平台</h4>
               <p>3299元起</p>
           </div>
           <div class="box7">
               <img src="img/小14U.webp" width="125px" height="130px" />
               <h3>Xiaomi 14 Ultra</h3>
               <h4>徕卡全明星四摄|双...</h4>
               <p>6499元起</p>
               </div>
           <div class="box7">
               <img src="img/米C4.webp" width="125px" height="130px"/>
               <h3>Xiaomi Civ 4 Pro</h3>
               <h4>徕卡光学Summilux镜头|5000万...</h4>
               <p>2999元起</p>
           </div>
           <div class="box7">
               <img src="img/T3.webp" width="125px" height="130px"/>
               <h3>Redmi Turbo 3</h3>
               <h4>性能旋风，席卷而来</h4>
               <p>1999元起</p>
           </div>
           <div class="box7"><img src="米14 2.webp" width="125px" height="130px" />
               <h3>Xiaomi 14</h3>
               <h4>徕卡光学Summilux镜头|小米澎湃O...</h4>
               <p>3999元起</p>
           </div>
           <div class="box7">
               <img src="米14pro2.webp" width="125px" height="130px"/>
               <h3>Xiaomi 14 Pro</h3>
               <h4>徕卡Summilux可变光圈镜头|小米...</h4>
               <p>4599元起</p>
           </div>
           <div class="box7">
               <img src="k70e.webp" width="125px" height="130px"/>
               <h3>Redmi K70E</h3>
               <h4>新一代旗舰焊门员</h4>
               <p>1799元起</p>
           </div>
           <div class="box7">
               <img src="k70.webp" width="125px" height="130px"/>
               <h3>Redmi K70</h3>
               <h4>第二代骁龙8 旗舰芯</h4>
               <p>2399元起
               <del>2499元起</del>
               </p>
           </div>
       </div>
   </body>
</html>

/*css部分

.box01 {
   width: 1556px;
   height: 40px;
   background-color: black;
   border: 1px solid black;
   margin: auto;
   margin-bottom: 10px;
   display: flex;
   /*flex：弹性盒子布局模式，代替浮动和定位解决复杂的布局和对齐 */
   align-items: center;
   /* align-items用于弹性容器内的子元素在交叉轴上的对
   齐方式主轴元素排列的方向，交叉轴与主轴垂直*/
   justify-content: center;
   /* 在CSS中，justify-content属性用于控制弹性容器（flex container）
中的子元素（flex items）在主轴（main axis）上的对齐方式。
这里的“主轴”取决于flex-direction属性的值，
默认为水平方向（即行方向）。水平居中 */
}

.box04 {
   width: 1500px;
   height: 30px;
   display: flex;
   /* 使用Flexbox */
   border: 1px solid red;
   align-items: center;
   float: right;
   /* 垂直居中 */
   justify-content: space-between;
   /* 使box05和box06之间有空间，并且box06右对齐 */
}

.box05 {
   width: 1210px;
   height: 25px;
   border: 1px solid green;
   justify-content: space-between;
   float: left;
   /* box05会自动在box04中左对齐，因为它在flex容器的开始位置 */
}

.box06 {
   width: 340px;
   height: 25px;
   border: 1px solid green;
   /* box06会自动在box04中右对齐，因为justify-content: space-between; */
}

.box02 {
   width: 1226px;
   height: 50px;
   /* background-color: black; */
   border: 1px solid black;
   margin: auto;
   margin-bottom: 1px;
   display: flex;
   /* 启用Flexbox布局 */
   justify-content: space-between;
   /* 让子元素在主轴上分散对齐 */
   align-items: center;
   /* 让子元素在交叉轴上居中对齐 */
}

.box07 {
   width: 90px;
   height: 45px;
   border: 1px solid greenyellow;
   /* 不需要额外的对齐设置，因为justify-content: space-between已经实现了左对齐 */
}

.box08 {
   width: 730px;
   height: 35px;
   border: 1px solid aquamarine;
   /* 不需要额外的对齐设置，因为align-items: center已经实现了垂直居中对齐 */
}

.box09 {
   width: 280px;
   height: 35px;
   border: 1px solid purple;
   /* 不需要额外的对齐设置，因为justify-content: space-between已经实现了右对齐 */
}
.box6{
   float: left;
}
.box7{
   float: right;
   margin-bottom: 8pxpx;
   margin-top: 8px;
   box-sizing: border-box;
}
.box3::after {
content: "";
display: table;
clear: both;
}
.box5::after {
content: "";
display: table;
clear: both;
   overflow: hidden;
}
.a{
   text-align: center;
}
p{
   color: orange;
   font-size: 24px;
   text-align: center;
}
h3{
   text-align: center;
}