前言:
这组件菜单,可以快速开发,这部分主要用的的就是css布局,还有scss的嵌套,这个如果没有前端的基础写的就会很蒙,比如说塌陷,浮动,伪类什么的,还有css布局,div,span,class,类选择器 标签选择器 伪类选择器等.

布局:

<template>
    <div class="header">
        <!-- 顶部 -->
        <div class="nav-topbar">
             <!-- 布局div -->
            <div class="container">
                <!-- 菜单 -->
                <div class="topbar-menu">
                    <!-- a标签javascrips:;代表不刷新 -->
                    <a href="javascrips:;">小米商城</a>
                    <a href="javascrips:;">MUI</a>
                    <a href="javascrips:;">云服务</a>
                    <a href="javascrips:;">用户手册</a>
                </div>

                <!-- 用户登陆 -->
                <div class="topbar-user">
                     <a href="javascrips:;">登陆</a>
                     <a href="javascrips:;">注册</a>
                     <a href="javascrips:;" class="my-cart"><span class="icon-cart"></span>购物车</a>
                     
                </div>
            </div>
        </div>

        <!-- 头部导航条 -->
        <div class="nav-head">
                <!-- 布局 -->
                <div class="container">
                    <!-- logo -->
                    <div class="head-logo">
                        <a href="/#/index"></a>
                    </div>
                    
                    <!-- 中部菜单 -->
                    <div class="head-menu">
                        
                        <!-- 导航栏 -->
                        <div class="item-meun">
                            <span>小米手机</span>
                            <div class="chlidren"></div>
                        </div>
                        <!-- 导航栏 -->
                         <div class="item-meun">
                            <span>RedMi红米</span>
                            <div class="chlidren"></div>
                        </div>
                        <!-- 导航栏 -->
                         <div class="item-meun">
                            <span>电视</span>
                            <div class="chlidren"></div>
                        </div>

                    </div>
                
                    <div class="head-search"></div>
                </div>
        </div>
    </div>
</template>

示例:
![JW0DU4LRFKV6J}@H`{[8]IK.png][1]

8@7T%G)%VP~_U(%[$%BAEBG.png

MHJ18[3]
布局这块用的最多的就是嵌套div什么时候嵌套,什么div放在那里,标签如何选择等

css样式可以说是不简单,比较绕并且记得东西很多,还有嵌套,选择器,包括重复元素抽取出来做成scss:

<style lang="scss">
    .header{
        //顶部条
        .nav-topbar{
            height: 39px;  //高度跟行高是一样的
            line-height: 39px;
            background-color: #333333;
            color: #b0b0b0;

            //顶部布局容器
            .container{
            display: flex; //flex布局
            justify-content: space-between; //水平剧中
            align-items: center; //垂直剧中

            //a标签
            a{
                display: inline-block;
                color: #b0b0b0;
                margin-right: 17px;
            }
                //购物车
                .my-cart{
                    width: 110px;  //宽度
                    background-color: #FF6600;  //背景色
                    text-align: center;  //剧中
                    color: #ffffff;

                    //购物车图标
                    .icon-cart{
                        margin-right: 5px;
                        display: inline-block;
                        width: 16px;
                        height: 12px;
                        background: url('/imgs/cart.png') no-repeat center; //引入图标 剧中 
                        background-size: contain;
                    }
                }
            }
        }
    
    .nav-head{

        //布局容器
        .container{
            height: 112px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

                //logo
                 .head-logo{
                     display: inline-block;
                     width: 55px;
                     height: 55px;
                     background-color: #FF6600;

                    //a标签
                    .a{
                        display: inline-block; //行内转块标签
                        width: 110px;
                        height: 55px;
                    }

                    //给a标签设置伪类css原生a::befor
                    &:before{
                        content: " "; //占位如果没有伪类不生效
                        display: inline-block; //行内转块
                        width: 55px;
                        height: 55px;
                        background: url('/imgs/mi-logo.png') no-repeat center;
                        background-size: 55px;
                        transition: margin.2s; //动画的延迟
                    }

                    //鼠标放上去执行
                    &:after{
                        content: " "; //占位如果没有伪类不生效
                        display: inline-block; //行内转块
                        width: 55px;
                        height: 55px;
                        background: url('/imgs/mi-home.png') no-repeat center;
                        background-size: 55px;
                    }

                    //执行动作
                    &:hover:before{
                        margin-left: -55px;
                        transition: margin.2s;
                    
                    //hover
                    }
        //head-logo
        }

    //nav-head    
    }

    //中部菜单
    .head-menu{
        display: inline-block;
        width: 200px;
        padding-left: 209px;

        //菜单内的文字
        .item-meun{
            display: inline-block;
            color: #333333;
            font-weight: bold; //加粗
            font-size: 16px;
            line-height: 112px;
            span{
                cursor: pointer; //鼠标放上去会变成小手
            }
        }
    

    //nav-menu
    }
//总header
}

</style>

推荐把每一个便选择器都写注释尤其是底部,不然到时候都找不到哪个对应哪个,还有a before after hover 这些不用全部嵌套要写成闭合的,不然可能会照成伪类不生效,content: " ";伪类必写表示占位

示例:
![5(JN]0S2ZZE}O}%X`%A{U0Y.png][4]

![R8CPMZP~]}S5AEZQ30H8I9Y.png][5]

M{I1H(5I137B6G77(5DVNPO.png

{FX)VW%9IZ`O5560THXJOES.png

7W}OQ}@$](6XHD4{)0GH6$K.png

最后修改:2021 年 06 月 01 日 11 : 28 AM
感谢您的,打赏!