文章描述了小米官网的HTML结构，重点介绍了使用CSS弹性盒子（Flexbox）进行页面布局的技术，包括display、flex-direction、justify-content、align-items等属性的应用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{background-color: pink;
width: 1500px;
}
.box2{width: 1200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box1">
<span>小米官网</span>
<span>小米商城</span>
<span>小米澎湃OS</span>
<span>lot</span>
<span>云服务</span>
<span>天星数科</span>
<span>有品</span>
<span>小爱开放平台</span>
<span>资质证照</span>
<span>协议规则</span>
<span>下载APP</span>
<span>selectlocation</span>
<span class="one">登录</span>
<span>注册</span>
<span>消息通知</span>
<span>购物车</span>
</div>
<div><img src="./1701096798334.png" class="mi" alt"">
<span>xiaomi手机</span>
<span>Redmi手机</span>
<span>电视</span>
<span>笔记本</span>
<span>平板</span>
<span>家电</span>
<span>路由器</span>
<span>服务中心</span>
<span>社区</span>
<input type="text">
</div>
<div class="box2">
<div>手机</div>
<div>电视</div>
<div>家电</div>
<div>笔记本平板</div>
<div>出行穿戴</div>
<div>耳机音箱</div>
<div>健康儿童</div>
<div>生活箱包</div>
<div>智能路由器</div>
<div>电源配件</div>
</div>
</body>
</html>
1.css弹性盒子 display：flex
flex-direction：设置主轴方向
row-reverse 从右往左
column纵轴变成主轴
flex-wrap ：wrap允许弹性盒子子项换行
justify-content：space-around剩余的空间平均分配给每个元素
space-between 两边贴边 中间平分
align-items：center交叉轴居中
align-content:控制多轴对齐方式
order设置顺序
flex-grow设置宽高
flex-shrink：0不压缩
align-self 改变自己的对齐方式
扫一扫
6731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
