<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.one{
display: flex;
background-color:black;
height: 50px;
width: 1700px;
justify-content: space-around;
color: aliceblue;
}
.two{
display: flex;
width: 1700px;
height: 100px;
justify-content: space-around;
}
.two img{
width: 40px;
height: 50px;
}
.two input{
height: 30px;
}
.four{
display: flex;
height: 500px;
width: 1350px;
background-color: grey;
justify-content: space-around;
justify-content: center;
align-items: center;
}
.four img{
width: 1225px;
height: 500px;
}
.four ul{
list-style: none;
line-height: 40px;
}
</style>
<body>
<div class="one">
<p>小米官网|</p>
<p>小米商城|</p>
<p>小米澎湃OS|</p>
<p>loT|</p>
<p>云服务|</p>
<p>天星数科|</p>
<p>有品|</p>
<p>小爱开放平台|</p>
<p>资质证照|</p>
<p>协议规则|</p>
<p>下载app|</p>
<p>Select Location</p>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P> </P>
<P>登录</P>
<P>注册</P>
<p>消息通知</p>
<p>🛒购物车(0)</p>
</div>
<div class="two">
<img src="https://inews.gtimg.com/newsapp_ls/0/13772180398/0/640.jpg" alt="">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>Xiaomi手机</p>
<p>Redmi手机</p>
<p>电视</p>
<p>笔记本</p>
<p>平板</p>
<p>家电</p>
<p>路由器</p>
<p>服务中心</p>
<p>社区</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<input type="text" name="" id="" placeholder="加湿器" 🔍>
</div>
<div class="four">
<ul>
<li>手机</li>
<li>电视</li>
<li>家电</li>
<li>笔记本 平板 </li>
<li>出行 穿戴</li>
<li>耳机 音箱</li>
<li>健康 儿童</li>
<li>生活 箱包</li>
<li>智能 路由器</li>
<li>电源 配件</li>
</ul>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d7bdca7905b42672e5baf431a021afbe.png?thumb=1&w=1839&h=690&f=webp&q=90" alt="">
</div>
</body>
</html>
1.弹性盒子:display:flex
flex-direction:row-reverse(从右向左横轴排列)
flex-direction:column(从上往下纵向排列)
2.flex-direction:设置主轴方向
3.flex-wrap:wrap允许弹性盒子换行
4.justify-content:center(水平居中)
justify-content:space-around(平均分布)
justify-content:space-between(贴边分布)
align-items:center(侧轴水平居中)
align-conter:space-between(侧轴贴边居中)
5.order:越小越在前面
6.flex-grow:1/flex-grow:2(盒子占比)
7.flex-shrink:0(禁止压缩)
8.display:grid
grid-template-column:1fr 1fr
a:hover+div{}(鼠标停在a上,下一个标签变化)
1.轮廓线:<style>input{outline-style=../outline-color:../outline-width=..}</style>控制文本框轮廓线
浮动之文字环绕
1.<style>img{float:left/right}</style>文字环绕图片
2.一个元素浮动起来会不再占有位子(脱离文档流)同时发生浮动,会在同一行排列,多个元素同时左浮动,会从左往右在同一行排列
3.{clear:float}(清除浮动)
4.外边距:magin-left=20px向左移动
5.auto:overflow:auto(溢出文本加滑动)/hidden(隐藏)
6.padding-left:20px(文本距离盒子的距离)或直接用padding:上,左右,下
7.boxing-sizing:border-box(避免文本影响盒子大小)
8.外边距塌陷问题:在父盒子加border/padding
9.*{padding:0/}