1、效果图
2、源码
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/appleStyle.css">
</head>
<body>
<div class="nav">
<div class="navList">
<div class="nav-item logo"><a href=""></a></div>
<div class="nav-item"><a href="">商店</a></div>
<div class="nav-item"><a href="">Mac</a></div>
<div class="nav-item"><a href="">iPad</a></div>
<div class="nav-item"><a href="">iPone</a></div>
<div class="nav-item"><a href="">Watch</a></div>
<div class="nav-item"><a href="">AirPods</a></div>
<div class="nav-item"><a href="">家居</a></div>
<div class="nav-item"><a href="">Apple独家</a></div>
<div class="nav-item"><a href="">配件</a></div>
<div class="nav-item"><a href="">技术支持</a></div>
<div class="nav-item search"><a href=""></a></div>
<div class="nav-item cart"><a href=""></a></div>
</div>
</div>
<div class="nav-mobie">
<div class="nav-item list">
<!-- hidden就是不显示我们这个输入框 -->
<input type="checkbox" id="list" hidden>
<!-- for什么 就是点击了我们的输入框 -->
<label for="list">
<a>
<span class="line1"></span>
<span class="line2"></span>
</a>
</label>
</div>
<div class="nav-item logo"><a href=""></a></div>
<div class="nav-item cart"><a href=""></a></div>
</div>
</body>
</html>
css部分
*{
margin: 0;
height: 0;
}
.nav{
height: 44px;
background-color: rgba(0,0,0,0.92);
}
.navList{
width: 1024px;
height: 44px;
display: flex;
/* 均匀排列每个元素 首个元素放置于起点,末尾元素放置于终点 */
justify-content: space-between;
/* 侧轴居中 无法使用 */
/* align-items: center; */
line-height: 44px;
/* 设置对象上下间距为0,左右自动。 就是整体居中*/
margin: 0 auto;
}
/* 改超链接的透明度 */
.navList a:hover{
opacity: 0.6;
}
.logo>a,.search>a,.cart>a{
/* 允许在元素上设置宽度和高度。 */
display: inline-block;
width: 30px;
height:44px ;
/* 设置尺寸大小 */
background-size: 100% 100%;
}
.logo>a{
background-image: url(../img/logo.svg);
/* 改图标位置 0是x轴 2px是上下 y轴 */
background-position: 0 2px;
}
.search>a{
background-image: url(../img/seach.svg);
/* 设置图片大小 */
background-size: 100%;
background-position: 0 -20px;
}
.cart>a{
background-image: url(../img/cart.svg);
background-position: 0 2px;
}
.nav-item >a{
color: aliceblue;
text-decoration:none;
font-size: 14px;
}
/*-------------------------------移动端 */
.nav-mobie{
height: 48px;
/* width: 48px; */
display: flex;
justify-content: space-between;
/* align-items: center; */
background-color: rgba(0,0,0,0.92);
/* 不显示 */
display: none;
}
.nav-mobie>.nav-item a{
width: 48px;
height: 48px;
text-decoration: none;
color: #fff;
display: inline-block;
position: relative;
}
.nav-mobie>.list span{
width: 17px;
height: 1px;
background-color: white;
position: absolute;
/* 默认 */
transform: translateY(0px) rotate(0deg);
/* 过渡3秒 */
transition: all 0.3s;
}
.nav-mobie>.list .line1{
left: 50%;
margin-left: -8.5px;
top: 20px;
}
.nav-mobie>.list .line2{
left: 50%;
margin-left: -8.5px;
bottom: 20px;
}
/* 鼠标触发事件旋转 */
/* .nav-mobie > .list:hover .line1{ */
/* translateY定义转换,只是用 Y 轴的值。 rotate定义 2D 旋转,在参数中规定角度。 */
/* transform: translateY(4px) rotate(30deg);
} */
/* .nav-mobie > .list:hover .line2{
transform: translateY(-4px) rotate(-30deg);
} */
#list:checked~label .line1{
transform: translateY(4px) rotate(30deg);
}
#list:checked~label .line2{
transform: translateY(-4px) rotate(-30deg);
}
/* media规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。 */
/* 注意and后边有个空格才显示 and关键字将媒体特性与媒体类型或其他媒体特性组合在一起。 */
@media screen and (max-width:768px){
.nav-mobie{
display: flex;
}
.nav{
display: none;
}
}
3、苹果官网