【自己做导航栏 _属性 _属性】

自己做导航栏

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

属性属性

详细描述

截图

代码

<div class="A-4-box">
            
            <div class="A-5-box">
                <button class="button">首页</button>
                <button class="button2">在线定制</button>
                <button class="button">标准箱</button>
                <button class="button2">品质保证</button>
            </div>
          
                <div class="B-box"> 
                    <div class="B-0-box">
                        <div class="B-1-box"></div>
                        <div class="B-1-box"></div>
                        <div class="B-1-box"></div>
                    </div> 
                      <ul class="B-ul">
                    <li class="B-li">首页</li>
                    <li class="B-li">在线定制</li>
                    <li class="B-li">标准箱</li>
                    <li class="B-li">品质保证</li>
                </ul> 
                </div>
               
            
        </div>

.A-4-box {

    height: 1rem;
    padding: 0 15vw;
    background-color: #f9f9f9;
    display: flex;
    justify-content: flex-end;
}

.A-5-box {
    padding-top: .27rem;
    display: flex;


}



.button {
    font-size: .14rem;
    color: black;
    height: .46rem;
    width: .65rem;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    margin-left: .6rem;
    border-radius: 5px;

}

.button2 {
    font-size: .14rem;
    color: black;
    height: .46rem;
    width: 1rem;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    margin-left: .6rem;
    border-radius: 5px;

}

.button:focus {
    font-size: .14rem;
    color: white;
    background-color: #1d7ad9;
    border: 1px solid #1d7ad9;
    outline: none;
    border: none;

}

.button2:focus {
    font-size: .14rem;
    color: white;
    background-color: #1d7ad9;
    border: 1px solid #1d7ad9;
    outline: none;
    border: none;

}

@media only screen and (max-width:1200px) {
    .A-5-box {
        padding-top: .27rem;
        display: flex;
        width: 80%;

    }
}

.B-box {

    width: 100%;
    display: none;

}

.B-0-box {
    float: right;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: cornflowerblue;
    width: .5rem;
    height: .4rem;
    padding: 5px;
    margin: .27rem 0 .27rem 0;
    border-radius: 10%;


}

.B-1-box {
    border-bottom: 1px solid white;
    width: .3rem;


}

.B-ul {

    margin-top: 1rem;
    background-color: white;
    width: 100%;
    font-size: .2rem;
    text-align: center;
    display: none;
}

.B-li {
    padding: 5px;
    list-style: none;


}

.B-li:hover {
    background-color: #1d7ad9;
}

.B-box:hover .B-ul {
    display: block;
    margin-bottom: 0;

}

@media only screen and (max-width:900px) {
    .B-0-box {
        margin: .27rem 15vw;
    }

    .A-5-box {
        display: none;
    }

    .B-box {

        display: block;
    }


    .A-4-box {
        padding: 0;
        height: 100%;
    }

}

@media only screen and (max-width:425px) {
    .B-0-box {
        margin: .27rem 10px;
    }
}

编辑于2025-04-03