2021-02-28-CSDN博客

本文链接：https://blog.csdn.net/weixin_46840701/article/details/114241290

美图手机（css练习11）

效果截图

代码部分

运用响应式布局及媒体查询

html主体部分

<!DOCTYPE html>
<html lang="ch">
<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">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./fa/css/font-awesome.css">
    <link rel="stylesheet" href="./meitu/style.css">
    <title>Document</title>
</head>
<body>
<div class="top-bar-wrapper">
    <div class="top-bar">
        <!-- 左侧菜单 -->
        <div class="left-menu">
            <!-- 菜单图标 -->
            <ul class="menu-icon">
                <li></li>
                <li></li>
                <li></li>
            </ul>
    
            <!-- 菜单 -->
            <ul class="nav">
                    <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="#"><i class="fa fa-search"></i></a>
                        <span>搜索Meitu.com</span>
                    </li>
                </ul>
        </div>
        <!-- logo -->
        <h1 class="logo">
            <a href="/">美图手机</a>
        </h1>
    
        <!-- 用户信息 -->
        <div class="user-info">
            <a href="#">
                <i class="fa fa-user"></i>
            </a>
        </div>
    
    </div>
</div>
    
</body>
</html>

less css代码部分

.top-bar-wrapper{
    background-color: #000;
}

.top-bar{
    height: 48px;    
    margin: 0 auto;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

a{
    text-decoration: none;
    color: #fff;
    &:hover{
        color: rgb(194, 192, 192);
    }
}

// 左侧导航图标
.left-menu{

    // 菜单图标
    .menu-icon{
        width: 18px;
        height: 48px;
        position: relative;

        // 图标三条线
        li{
            width: 18px;
            height: 1px;
            background-color: #fff;
            position: absolute;
            // 修改变形原点
            transform-origin: left center;
            transition: .5s;
        }
        li:nth-child(1){
            top: 18px;
        }
        li:nth-child(2){
            top: 24px;
        }
        li:nth-child(3){
            top: 30px;
        }

        &:hover{
            li:nth-child(1){
                transform: rotate(42deg);
            }
            li:nth-child(2){
                opacity: 0;
            }
            li:nth-child(3){
                transform: rotate(-42deg);
            }
        }
    }
    
    // 菜单
    .nav{
        display: none;
        position: absolute;
        background-color: #000;
        top: 48px;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: 60px;

        li{
            width: 80%;
            margin: 0 auto;
            border-bottom: 1px solid #4e4e4e;
            a{
                display: block;
                line-height: 44px;
                font-size: 14px;               
            }

            &:last-child a{
                display: inline-block;
            }
            span{
                color: #fff;
                font-size: 14px;
            }
        }
    }
    &:hover{
        .nav{
            display: block;
        }
    }
    
}
// logo
.logo{
    a{
        text-indent: -999px;
        display: block;
        width: 122px;
        height: 33px;
        background-image: url(./13/sprite@2x.77a333d4.png);
        background-position: -100px 0;
        background-size: 240px 350px;
    }
}

// 设置媒体查询
@media only screen{
    @media (min-width:768px) {
    .top-bar{
        max-width: 1200px;
        .left-menu{
            order: 2; 
            // 链接均匀分布
            flex: auto;
            .menu-icon{
                display: none;
            }    
            .nav{
                display: flex;
                position: static;
                padding: 0;
                justify-content: space-around;
                
                li{
                    width: auto;
                    border-bottom: none;
                    a{
                        line-height: 48px;
                    }
                    span{
                        display: none;
                    }
                }
            }
            
        }
        .logo{
            order: 1;
            margin-right:20px ;
        }
        .user-info{
            order: 3;
            margin-left:20px ;
        }
    }
}
}