css3 自适应大屏端切换移动端

最新推荐文章于 2023-06-07 01:17:44 发布

战斗中的老段

最新推荐文章于 2023-06-07 01:17:44 发布

阅读量322

点赞数

分类专栏： flex 文章标签： css3 大屏端 css

本文链接：https://blog.csdn.net/qq_48203828/article/details/126040455

版权

flex 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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、苹果官网