<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mi</title>
<link href="new_file.css" rel="stylesheet" />
<style>
body {
background: rgba(128, 128, 128, 0.1);
position: relative;
}
.box {
width: 1226px;
height: 100%;
background-color: aqua;
border: 1px solid transparent;
margin: auto;
}
.box01 {
width: 1556px;
height: 40px;
background-color: black;
border: 1px solid transparent;
margin: auto;
margin-bottom: 10px;
}
.box02 {
width: 1226px;
height: 50px;
/* background-color: blue; */
border: 1px solid transparent;
margin: auto;
margin-bottom: 10px;
}
.box03 {
width: 1226px;
height: 100px;
/* background-color: blue; */
border: 1px solid transparent;
margin: auto;
margin-top: 10px;
}
.box04 {
width: 1500px;
height: 30px;
border: 1px solid transparent;
}
.box05 {
width: 1210px;
height: 25px;
border: 1px solid transparent;
text-align: center;
margin: auto;
float: left;
}
.box06 {
width: 340px;
height: 25px;
border: 1px solid transparent;
text-align: center;
}
.box07 {
width: 90px;
height: 50px;
border: 1px solid transparent;
}
.box08 {
width: 730px;
height: 35px;
border: 1px solid transparent;
text-align: center;
}
.box09 {
width: 280px;
height: 30px;
border: 1px solid purple;
}
.box1 {
width: 1226px;
height: 450px;
border: 1px solid transparent;
margin: auto;
}
.box2 {
width: 250px;
height: 448px;
background-color: gray;
border: 1px solid black;
float: left;
margin-top: -450px;
}
.box3 {
width: 1246px;
height: 300px;
border: 1px solid transparent;
overflow: hidden;
margin: auto;
margin-top: 30px;
}
.box4 {
width: 305px;
height: 295px;
border: 1px solid transparent;
box-sizing: border-box;
/* 确保小盒子的边框和内边距不会增加实际占据的空间,避免小盒子因浮动导致缩小后消失 */
float: right;
margin-right: 10px;
margin: 2px;
}
.box5 {
width: 1246px;
height: 850px;
border: 1px solid transparent;
overflow: hidden;
/*清除浮动*/
margin: auto;
margin-top: 50px;
}
.box6 {
width: 200px;
height: 850px;
border: 1px solid transparent;
}
.box7 {
width: 250px;
height: 406px;
background-color: white;
border: 1px solid transparent;
box-sizing: border-box;
margin-right: 5px;
float: right;
text-align: center;
}
.box8 {
width: 1226px;
height: 850px;
border: 1px solid transparent;
overflow: hidden;
/*清除浮动*/
margin: auto;
margin-top: 30px;
}
.box9 {
width: 1246px;
height: 620px;
border: 1px solid transparent;
overflow: hidden;
margin: auto;
margin-top: 50px;
}
.box10 {
width: 250px;
height: 305px;
background-color: white;
border: 1px solid transparent;
box-sizing: border-box;
margin-right: 5px;
float: right;
text-align: center;
justify-content: center;
align-items: center;
}
.box11 {
width: 200px;
height: 620px;
border: 1px solid transparent;
float: left;
}
.box12 {
width: 1226px;
height: 20px;
border: 1px sol transparent;
margin: auto;
margin-top: 5px;
margin-bottom: 0px;
}
.box17 {
width: 250px;
height: 140px;
border: 1px solid lightgray;
margin-bottom: 10px;
margin-top: 10px;
box-sizing: border-box;
float: right;
}
.box18 {
width: 1285px;
height: 620px;
border: 1px solid transparent;
overflow: hidden;
margin: auto;
margin-top: 50px;
}
.box2 li:hover{
background-color: peru;
}
a {
margin-right: 20px;
}
li {
line-height: 10px;
color: aliceblue;
font-size: 20px;
text-indent: 1px;
text-align: center;
}
h5 {
float: right;
text-align: center;
margin: 0;
}
h6 {
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
}
/* 为列表项添加样式 */
ul li {
display: flex;
align-items: center;
/* 垂直居中 */
padding: 10px 0;
/* 上下内边距 */
border-bottom: 15px solid gray;
/* 添加底部边框 */
}
/* 为链接添加样式 */
ul li a {
text-decoration: none;
/* 移除下划线 */
color: aliceblue;
/* 文本颜色 */
margin-right: 10px;
/* 与图标之间的间距 */
}
/* 最后一个列表项不需要底部边框 */
ul li:last-child {
border-bottom: none;
}
/* 为图标添加样式（假设使用字体图标） */
p del {
color: #999;
}
</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="#">
<input type="text" class="input-field" placeholder="小米14" />
<h5>🔍</h5>
</a>
</div>
</div>
<div class="box"></div>
<div class="box1">
<img src="img/米车.jpg" align="right" width="100%" height="450px">
<div class="box2">
<ul>
<li><a href="#">手机</a></li>
<li>
<a href="#">电视</a>
<i class="icon"> <!-- 假设这里是一个图标的类名 --></i>
</li>
<li>
<a href="#">家电</a>
<i class="icon"></i>
</li>
<li>
<a href="#">笔记本 平板</a>
<i class="icon"></i>
</li>
<li>
<a href="#">出行 穿戴</a>
<i class="icon"></i>
</li>
<li>
<a href="#">耳机 音箱</a>
<i class="icon"></i>
</li>
<li>
<a href="#">健康 儿童</a>
<i class="icon"></i>
</li>
<li>
<a href="#">生活 箱包</a>
<i class="icon"></i>
</li>
<li>
<a href="#">智能 路由器</a>
<i class="icon"></i>
</li>
<li>
<a href="#">电源 配件</a>
<i class="icon"></i>
</li>
</ul>
</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="box12">
手机
<h5>查看更多</h5>
</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>
<h6>第三代骁龙8 年度旗舰平台</h6>
<p>3299元起</p>
</div>
<div class="box7">
<img src="img/小14U.webp" width="125px" height="130px" />
<h3>Xiaomi 14 Ultra</h3>
<h6>徕卡全明星四摄|双向卫星通信|小米...</h6>
<p>6499元起</p>
</div>
<div class="box7">
<img src="img/米C4.webp" width="125px" height="130px" />
<h3>Xiaomi Civ 4 Pro</h3>
<h6>徕卡光学Summilux镜头|5000万徕卡...</h6>
<p>2999元起</p>
</div>
<div class="box7">
<img src="img/T3.webp" width="125px" height="130px" />
<h3>Redmi Turbo 3</h3>
<h6>性能旋风，席卷而来</h6>
<p>1999元起</p>
</div>
<div class="box7"><img src="米14 2.webp" width="125px" height="130px" />
<h3>Xiaomi 14</h3>
<h6>徕卡光学Summilux镜头|小米澎湃OS...</h6>
<p>3999元起</p>
</div>
<div class="box7">
<img src="米14pro2.webp" width="125px" height="130px" />
<h3>Xiaomi 14 Pro</h3>
<h6>徕卡Summilux可变光圈镜头|小米澎...</h6>
<p>4599元起</p>
</div>
<div class="box7">
<img src="k70e.webp" width="125px" height="130px" />
<h3>Redmi K70E</h3>
<h6>新一代旗舰焊门员</h6>
<p>1799元起</p>
</div>
<div class="box7">
<img src="k70.webp" width="125px" height="130px" />
<h3>Redmi K70</h3>
<h6>第二代骁龙8 旗舰芯</h6>
<p>2399元起
<del>2499元起</del>
</p>
</div>
</div>
<div class="box12">
智能穿戴
<h5>耳机 穿戴</h5>
</div>
<div class="box9">
<div class="box11"><img src="穿戴.webp" width="200px" height="620px" /></div>
<div class="box10">
<img src="img/耳4.webp" width="100px" height="122px" />
<h3>Redmi Buds 5</h3>
<h6>46dB深度降噪丨12.4mm镀钛动圈丨40小...</h6>
<p>179元
<del>199元</del>
</p>
</div>
<div class="box10">
<img src="img/耳3.webp" width="100px" height="122px" />
<h3>Redmi Buds 5 Pro</h3>
<h6>同轴双单元 旗舰音质 | 52dB/4kHz 旗舰降...</h6>
<p>379元
<del>399元</del>
</p>
</div>
<div class="box10">
<img src="img/耳2.webp" width="100px" height="122px" />
<h3>Xiaomi 开放式耳机</h3>
<h6>舒适稳固佩戴｜超线性发声单元｜独立防漏...</h6>
<p>649元
<del>699元</del>
</p>
</div>
<div class="box10">
<img src="img/耳1.webp" width="100px" height="122px" />
<h3>Redmi Buds 6 活力版</h3>
<h6>14.2mm超大动圈 | 内置五种调音模式 | 30...</h6>
<p>99元</p>
</div>
<div class="box10">
<div class="box17">
<img src="img/小.webp" width="70px" height="80px" />
<h3>Redmi Buds 3</h3>
<p>129元
<del>199元</del>
</p>
</div>
<div class="box17">
<img src="img/多.png" width="70px" height="80px" />
<h3>浏览更多</h3>
<h4>耳机</h4>
</div>
</div>
<div class="box10">
<img src="img/耳7.webp" width="100px" height="122px" />
<h3>Redmi Buds 4活力版</h3>
<h6>12mm大动圈 | 28小时长续航 | 触控便捷操作</h6>
<p>89元
<del>99元</del>
</p>
</div>
<div class="box10">
<img src="img/耳6.webp" width="100px" height="122px" />
<h3>Redmi Buds 4 Pro</h3>
<h6>43dB 宽频降噪旗舰|HiFi 高保真音质|59ms...</h6>
<p>329元
<del>399元</del>
</p>
</div>
<div class="box10">
<img src="img/耳5.webp" width="100px" height="122px" />
<h3>Xiaomi Buds 4 Pro</h3>
<h6>48dB智能动态降噪|骨声纹通话降噪 AI抗风噪</h6>
<p>799元
<del>1099元</del>
</p>
</div>
</div>
<div class="box12">
笔记本|平板
<h5>热门</h5>
</div>
<div class="box9">
<div class="box11"><img src="img/板子.webp" width="200px" height="620px" /></div>
<div class="box10">
<img src="img/本2.webp" width="150px" height="140px" />
<h3>Redmi Book Pro 16 2024</h3>
<h6>70w狂暴性能|3.1k 165Hz高刷高性能...</h6>
<p>6399元起</p>
</div>
<div class="box10">
<img src="img/本1.webp" width="150px" height="140px" />
<h3>Redmi Book Pro 14 2024</h3>
<h6>65 W 满血性能 | 全新酷睿 Ultra 处理器 | ...</h6>
<p>4799元起
<del>5299元</del>
</p>
</div>
<div class="box10">
<img src="img/板2.webp" width="150px" height="140px" />
<h3>Xiaomi Pad 6S Pro 12.4</h3>
<h6>第二代骁龙8旗舰处理器 | 小米澎湃OS |... </h6>
<p>3099元起
<del>3299元</del>
</p>
</div>
<div class="box10">
<img src="img/板1.webp" width="150px" height="140px" />
<h3>Redmi Pad Pro系列</h3>
<h6>12.1英寸2.5K旗舰机大屏 | 10000mAh...</h6>
<p>2299元起</p>
</div>
<div class="box10">
<div class="box17">
<img src="img/板4.webp" width="120px" height="120px" />
<h3>Xiaomi Pad 6
<br />Max 14
</h3>
<p>3499元起</p>
</div>
<div class="box17">
<img src="img/多.png" width="70px" height="80px" />
<h3>浏览更多</h3>
<h4>热门</h4>
</div>
</div>
<div class="box10">
<img src="img/板3.webp" width="150px" height="140px" />
<h3>Redmi Pad SE</h3>
<h6>高性价比千元平板｜11英寸高刷护眼...</h6>
<p>849元起
<del>999元</del>
</p>
</div>
<div class="box10">
<img src="img/本4.webp" width="150px" height="140px" />
<h3>Redmi Book 14 2024</h3>
<h6>47W 满血性能 | 小米澎湃智联</h6>
<p>4399元起
<del>4499元</del>
</p>
</div>
<div class="box10">
<img src="img/本3.webp" width="150px" height="140px" />
<h3>Redmi Book 16 2024</h3>
<h6>47W 满血性能 | 小米澎湃智联</h6>
<p>3119元起
<del>3699元</del>
</p>
</div>
</div>
<div class="box12">
家电
<h5>热门 电视影音 空调</h5>
</div>
<div class="box18">
<div class="box10">
<img src="img/空1.webp" class="moved-image" width="150px" height="80px" />
<h2>巨省电 小米空调 1.5匹新1级能效</h2>
<h6>强劲制冷 | 高效节能 | 智能互联</h6>
<p>1899元
<del>2499元</del>
</p>
</div>
<div class="box10">
<img src="img/电4.webp" width="150px" height="160px" />
<h2>小米电视S Mini LED系列</h2>
<h6>Mini LED 高分区背光分区、1200nits峰值...</h6>
<p>2999元起</p>
</div>
<div class="box10">
<img src="img/电3.webp" width="150px" height="160px" />
<h2>小米电视S Pro Mini LED系列</h2>
<h6>144Hz超高刷、4+64G大存储</h6>
<p>4999元起</p>
</div>
<div class="box10">
<img src="img/电2.webp" width="150px" height="160px" />
<h2>小米电视S系列</h2>
<h6>144HZ超高刷 3+32G 多色温色彩还原...</h6>
<p>2599元起</p>
</div>
<div class="box10">
<img src="img/电1.webp" width="100%" height="99.9%" />
</div>
<div class="box10">
<div class="box17">
<img src="img/空5.webp" width="120px" height="120px" />
<h3>米家迷你波轮
<br />洗衣机Pro 3kg
</h3>
<p>849元</p>
</div>
<div class="box17">
<img src="img/多.png" width="70px" height="80px" />
<h3>浏览更多</h3>
<h4>热门</h4>
</div>
</div>
<div class="box10">
<img src="img/空4.webp" width="190px" height="180px" />
<h2>米家波轮洗衣机 10kg 智能版</h2>
<h6>全景玻璃阻尼上盖 防夹手</h6>
<p>999元
<del>1499元</del>
</p>
</div>
<div class="box10">
<img src="img/空3.webp" width="190px" height="180px" />
<h2>米家波轮洗衣机 10kg 智能版</h2>
<h6>健康分开洗一台就够了</h6>
<p>4999元
<del>5999元</del>
</p>
</div>
<div class="box10">
<img src="img/空2.webp" width="150px" height="180px" />
<h2>米家新风空调 立式3匹</h2>
<h6>全屋快通风，就要大新风</h6>
<p>6799元
<del>7299元</del>
</p>
</div>
<div class="box10">
<img src="img/洗1.webp" width="100%" height="auto" />
</div>
</div>
<div class="box12">
生活电器
<h5>电暖器 扫地机 空净 清洁</h5>
</div>
<div class="box18">
<div class="box10">
<img src="img/暖4.webp" class="mov-image" width="180px" height="100px" />
<h2>米家踢脚线电暖器E</h2>
<h6>制暖身材小，抵御寒冬功劳大</h6>
<p>499元</p>
</div>
<div class="box10">
<img src="img/暖3.webp" width="180px" height="140px" />
<h2>米家石墨烯智能电暖器</h2>
<h6>石墨烯高导热，即开即暖无需等</h6>
<p>549元</p>
</div>
<div class="box10">
<img src="img/暖2.webp" class="move-image" width="180px" height="140px" />
<h2>米家石墨烯踢脚线电暖器 仿真火焰版</h2>
<h6>加湿+火焰效果 | 悬浮外观 | 双核石墨...</h6>
<p>1299元
<del>1599元</del>
</p>
</div>
<div class="box10">
<img src="img/暖1.webp" width="150px" height="140px" />
<h2>米家电暖器 温控版</h2>
<h6>2200W 强劲功率，对流速热，居浴两用</h6>
<p>329元</p>
</div>
<div class="box10">
<img src="img/扫1.webp" width="100%" height="99.9%" />
</div>
<div class="box10">
<div class="box17">
<img src="img/暖8.webp" width="80px" height="80px" />
<h3>米家踢脚线电
<br />暖器1S
</h3>
<p>699元</p>
</div>
<div class="box17">
<img src="img/多.png" width="70px" height="80px" />
<h3>浏览更多</h3>
<h4>电器</h4>
</div>
</div>
<div class="box10">
<img src="img/暖7.webp" width="120px" height="140px" />
<h2>米家直流变频两季扇</h2>
<h6>暖风和煦，凉风沁人</h6>
<p>799元
<del>899元</del>
</p>
</div>
<div class="box10">
<img src="img/暖6.webp" class="mo-image" width="180px" height="140px" />
<h2>米家石墨烯踢脚线电暖器</h2>
<h6>石墨烯速热取暖，快上加快</h6>
<p>749元</p>
</div>
<div class="box10">
<img src="img/暖5.webp" width="150px" height="140px" />
<h2>米家石墨烯折叠踢脚线电暖器 超薄版</h2>
<h6>0°-180°百变折叠|石墨烯速热|...</h6>
<p>899元</p>
</div>
<div class="box10">
<img src="img/净1.webp" width="100%" height="100%" />
</div>
</div>
<div class="box12">
厨房电器
<h5>净水器 烟灶 电饭煲 微蒸烤</h5>
</div>
<div class="box18">
<div class="box10">
<img src="img/净水器5.webp" width="160px" height="140px" />
<h2>米家净水器1000G</h2>
<h6>澎湃大水量，5年免换RO滤芯</h6>
<p>1499元
<del>2499元</del>
</p>
</div>
<div class="box10">
<img src="img/净水器4.webp" width="160px" height="140px" />
<h2>小米净水器H600G</h2>
<h6>纯净生活双出水，六级过滤健康直饮</h6>
<p>1099元
<del>1499元</del>
</p>
</div>
<div class="box10">
<img src="img/净水器3.webp" width="160px" height="140px" />
<h2>小米即热净水器Q600</h2>
<h6>冷热一体，1秒速热，精选调温每1℃</h6>
<p>2099元
<del>3499元</del>
</p>
</div>
<div class="box10">
<img src="img/净水器2.webp" width="160px" height="140px" />
<h2>米家净水器1600G</h2>
<h6>2.1秒一杯水，还原自来水的澎湃流速</h6>
<p>2799元
<del>4599元</del>
</p>
</div>
<div class="box10">
<img src="img/净水器1.webp" width="100%" height="99.9%" />
</div>
<div class="box10">
<div class="box17">
<img src="img/锅1.webp" width="80px" height="80px" />
<h3>米家智能快煮
<br />电饭煲5L
</h3>
<p>279元
<del>349元</del>
</p>
</div>
<div class="box17">
<img src="img/多.png" width="70px" height="80px" />
<h3>浏览更多</h3>
<h4>净水器</h4>
</div>
</div>
<div class="box10">
<img src="img/净水器8.webp" width="160px" height="140px" />
<h2>米家净水器1200G</h2>
<h6>澎湃出水 高端净水新选择</h6>
<p>1699元
<del>2799元</del>
</p>
</div>
<div class="box10">
<img src="img/净水器7.webp" width="160px" height="140px" />
<h2>小米即热净水器Q800</h2>
<h6>净水速热二合一</h6>
<p>2199元
<del>3999元</del>
</p>
</div>
<div class="box10">
<img src="img/净水器6.webp" width="160px" height="140px" />
<h2>小米净水器H800G Pro</h2>
<h6>长效过滤，鲜活好水随心出</h6>
<p>1599元
<del>1999元</del>
</p>
</div>
<div class="box10">
<img src="img/油烟机1.webp" width="100%" height="100%" />
</div>
</div>
<div class="box12">
智能家居
<h5>小爱音箱 门锁门铃 路由器 智能设备</h5>
</div>
<div class="box18">
<div class="box10">
<img src="img/音箱5.webp" width="120px" height="150px"/>
<h2>小米小爱音箱 Pro</h2>
<h6>澎湃低音，语音遥控传统家电</h6>
<p>269元
<del>299元</del>
</p>
</div>
<div class="box10">
<img src="img/音箱4.webp" width="120px" height="150px"/>
<h2>小米小爱音箱 Play</h2>
<h6>听音乐、语音遥控家电</h6>
<p>99元
<del>109元</del>
</p>
</div>
<div class="box10">
<img src="img/音箱3.webp" width="150px" 150px/>
<h2>小米小爱音箱Play 增强版</h2>
<h6>LED时钟显示，语音控制传统家电</h6>
<p>119元
<del>149元</del>
</p>
</div>
<div class="box10">
<img src="img/音箱2.webp" width="150px" 150px/>
<h2>Xiaomi智能家庭屏 10</h2>
<h6>MIUI Home | 10.1``高清大屏 | 115°超...</h6>
<p>899元
<del>999元</del>
</p>
</div>
<div class="box10">
<img src="img/音箱1.webp" width="100%" height="99.9%"/>
</div>
<div class="box10">
<div class="box17">
<img src="img/音箱9.webp" width="100px" height="100px"/>
<h3>Redmi小爱触屏
<br />音箱 8英寸
</h3>
<p>349元</p>
</div>
<div class="box17">
<img src="img/多.png" width="70px" height="80px" />
<h3>浏览更多</h3>
<h4>小爱音箱</h4>
</div>
</div>
<div class="box10">
<img src="img/音箱8.webp" width="150px" height="150px"/>
<h2>小米小爱音箱</h2>
<h6>Hi-Fi级音频芯片，支持AUX IN接口，...</h6>
<p>219元
<del>249元</del>
</p>
</div>
<div class="box10">
<img src="img/音箱7.webp" class="m-image" width="150px" height="150px"/>
<h2>小爱触屏音箱</h2>
<h6>可视化智能家居，海量视听资源</h6>
<p>209元
<del>269元</del>
</p>
</div>
<div class="box10">
<img src="img/音箱6.webp" width="100px" height="150px"/>
<h2>小米AI音箱（第二代）</h2>
<h6>低频饱满有深度，人声清晰有细节</h6>
<p>179元
<del>199元</del>
</p>
</div>
<div class="box10">
<img src="img/门锁.webp" width="100%" height="100%"/>
</div>
</div>
<div class="box03">
<img src="img/收工.webp" width="100%" height="auto"/>
</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: 8px;
margin-top: 8px;
box-sizing: border-box;
}
.box10 {
float: right;
margin-bottom: 3px;
margin-top: 3px;
box-sizing: border-box;
}
.box3::after {
content: "";
display: table;
clear: both;
}
.box9::after {
content: "";
display: table;
clear: both;
overflow: hidden;
}
.a {
text-align: center;
}
p {
color: orange;
font-size: 15px;
text-align: center;
}
h3 {
text-align: center;
}
h4 {
color: darkgray;
text-align: left;
}
h6 {
color: darkgray;
}
.input-field {
/* 设置输入框的样式，使其与盒子保持一致 */
width: 80%;
/* 使输入框宽度与盒子宽度相同 */
padding: 7px;
/* 内边距，可以与盒子不同 */
border: none;
/* 去除输入框的默认边框 */
box-sizing: border-box;
/* 确保padding和border不会增加输入框的总宽度 */
}
.box17 p {
margin-top: -2px;
text-align: left;
font-size: 15px;
margin-left: 40px;
}
.box17 h3 {
margin-top: -10px;
text-align: left;
font-size: 15px;
margin-left: 30px;
}
.box17 h4 {
color: darkgrey;
text-align: left;
margin-left: 30px;
}
.box10 .box17 img {
margin-bottom: -90px;
margin-right: -150px;
}
.box7 h6{
text-align: center;
}
.box12{
margin-bottom: -10px;
font-size: 25px;
text-align: leftf;
}
.box10 h2{
text-align: center;
font-size: 12px;
}
.moved-image {
margin-top: 40px;
margin-bottom: 40px;
/* 调整空调图片较窄导致的文本不协调的问题，可以根据需要调整这个值 */
}
.move-image {
margin-top: 16px;
margin-bottom: -15px;
}
.mov-image {
margin-top: 0px;
margin-bottom: 40px;
}
.mo-image {
margin-top: 26px;
margin-bottom: -27px;
}
运行后效果图
扫一扫
963
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
