作业
<!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>
* {
margin: 0;
padding: 0;
}
.nav {
position: fixed;
width: 1705px;
height: 40px;
border-bottom: 1px solid #070707;
background-color: #000;
border-top-left-radius: 10px;
}
.ul1{
margin: 0 auto;
height: 20px;
text-align: center;
list-style: none;
}
.ul1 li {
float: left;
border-right: 1px solid #ccc;
box-sizing: border-box;
line-height: 40px;
text-align: center;
}
.ul1 .last {
border-right: none;
float: right;
border-right: 1px solid #ccc;
box-sizing: border-box;
line-height: 40px;
text-align: center;
}
.ul1 li a {
display: block;
height: 40px;
text-decoration: none;
color: white
}
.ul1 li .app {
position: relative;
}
.ul1 li .app .code1 {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 40px;
border: 1px solid #ccc;
}
.app img{
display: none;
}
.app:hover img{
display: block;
}
.box{
position: relative;
top: 50px;
position: fixed;
width: 1534.5px;
height: 100px;
border-bottom: 1px solid white;
}
.logo{
position: absolute;
top: 11px;
width: 71px;
height: 71px;
}
.ul2{
position: absolute;
left: 110px;
right: 434px;
margin: 0 auto;
width: 887.5px;
height: 100px;
text-align: center;
list-style: none;
}
.ul2 li {
float: left;
width: 98.6px;
box-sizing: border-box;
line-height: 80px;
text-align: center;
}
.ul2 li a {
display: block;
height: 100px;
text-decoration: none;
color: #000;
}
.box1{
position: relative;
top: 160px;
position: fixed;
width: 1534.5px;
height: 460px;
background-color: white;
}
.bg{
position: absolute;
top: 35px;
left: 234px;
height: 460px;
width: 1074.5px;
opacity: 90%;
}
.ul3{
position: absolute;
width: 234px;
height: 460px;
margin: 0 auto;
text-align: center;
list-style: none;
top: 25px;
}
.ul3 li{
width: 234px;
height: 65px;
box-sizing: border-box;
text-align: center;
background-color: black;
opacity: 80%;
}
.ul3 li a {
display: block;
height: 234px;
height: 65px;
text-decoration: none;
color: white;
}
</style>
</head>
<body>
<div class="nav">
<ul class="ul1">
<li><a href="#">小米官网 </a></li>
<li><a href="#">小米商城 </a></li>
<li><a href="#">小米澎湃OS</a></li>
<li><a href="#">IoT</a></li>
<li><a href="#">云服务</a></li>
<li><a href="#">天星数科</a></li>
<li><a href="#">有品</a></li>
<li><a href="#">小爱开放平台</a></li>
<li><a href="#">资质证照</a></li>
<li><a href="#">协议规则</a></li>
<li><a href="#" class="app">下载app<img src="" alt="" class="code1"></a></li>
<li><a href="#">Select Location</a></li>
<li class="last"><a href="#">购物车</a></li>
<li class="last"><a href="#">消息通知</a></li>
<li class="last"><a href="#">注册</a></li>
<li class="last"><a href="#">登录</a></li>
</ul>
</div>
<div class="box">
<div class="logo"><img src=""></div>
<ul class="ul2">
<li><a href="#">Xiaomi手机</a></li>
<li><a href="#">Redmi手机</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">平板</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">服务中心</a></li>
<li><a href="#">社区</a></li>
</ul>
</div>
<div class="box1">
<div class="box2">
<div class="bg"><img src="./tup.png"></div>
<ul class="ul3">
<li><a href="#">手机</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">家电</a></li>
<li><a href="#">笔记本 平板</a></li>
<li><a href="#">出行 穿戴</a></li>
<li><a href="#">耳机 音箱</a></li>
<li><a href="#">健康 儿童</a></li>
<li><a href="#">生活 箱包</a></li>
<li><a href="#">智能 路由器</a></li>
<li><a href="#">电源 配件</a></li>
</ul>
</div>
</body>
</html>
笔记
display: flex; 排成一行(主轴)默认从左到右
flex-direction: row-reverse; 改变方向
flex-direction: column; 改变主轴方向 从上至下
flex-direction: column-reverse; 从下至上
justify-content:center; 水平居中
justify-content: space-around; 把剩余的空间平均分给每个元素
justify-content: space-between; 两边元素贴边,剩余平分
justify-content:end;
justify-content:flex-end; 结尾
align-items:center;
align-content:space-between贴边
align-content:space-around 平均分配
align-self:flex-start;只改变自己的对齐方式
order:-2 排列顺序
flex-grow:1;占盒子比例
flex-shrink:0;不被压缩
flex:1;