项目头部样式

最新推荐文章于 2024-10-04 06:11:34 发布

依墨~

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量48

点赞数

文章标签： servlet html 前端

本文链接：https://blog.csdn.net/m0_62073591/article/details/126045550

版权

<!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>头部</title>
    <!-- <link rel="stylesheet" href="./css/reset.css"> -->
    <link rel="stylesheet" href="./css/header.min.css">
</head>
<body>
    <header>
        <div class="head_1">
            <!-- 头部标签 -->
            <img src="./img/head/log.png" alt="">
            <ul>
                <li><a href="#">官方微博</a>
                    <img src="./img/head/weibo.png" alt="">
                </li>
                <li><a href="#">关注微信</a>
                    <img src="./img/head/weixin.jpg" alt="">
                </li>
                <li><a href="#">购物须知</a></li>
            </ul>
        </div>
        <div class="head_2">
            <!-- 中间搜索框 -->
            <!-- logo -->
            <img src="./img/head/logo.png" alt="" class="yy">
            <!-- 搜索框 -->
            <div class="search">
                <input type="text" placeholder="搜索偶像、商品">
                <a href="#"></a>
            </div>
            <!-- 列表 -->
            <ul>
                <li>
                    <img src="img/head/avatar.png" alt="">
                    <a href="#" style="margin-right: 0px;">登录</a>
                </li>
                <li>
                    <a href="#">我的订单</a>
                </li>
                <li>
                    <img src="img/head/cart.png" alt="">
                    <a href="#" style="margin-right: 0px;">购物车</a>
                </li>
            </ul>
        </div>
    </header>
        <div class="head_3">
            <ul>
                <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="#">个护美妆</a></li>
                <li><a href="#">影漫周边</a></li>
                <li><a href="#">食品</a></li>
                <li><a href="#">服装配饰</a></li>
            </ul>
        </div>

</body>
</html>

*{
    margin: 0;
    padding: 0;
}
ul li{
    list-style: none;
}
a{
    text-decoration: none;
}
header{
    width: 100%;
    overflow: auto;
    background-color: #222222;
    align-items: center;
    .head_1{
        display: flex;
        justify-content: space-between;
        padding-left: 50px;
        background-color: #000;
        ul{
            li{
                display: inline-block;
                width: 150px;
                // border: 1px solid gainsboro;
                text-align: center;
                line-height: 30px;
                a{
                    color: #fff;
                    &:hover{
                        color: #222222;
                    }
                }
                img{
                    width: 130px;
                    height: 130px;
                    border: 10px solid white;
                    display: none;
                    justify-content: center;
                    position: absolute;
                    margin: 0 auto;
                }
                //给li标签添加一个鼠标悬停效果 目的是让对应的二维码显示出来
                &:hover img{
                    display: block;
                }
                &:hover{
                    background-color: white;
                }
                &:nth-child(3):hover{
                    background-color: #222222;
                }
                &:nth-child(3):hover a{
                    color: #fd02e4;
                }
            }
        }
    }

    .head_2{
        height: 90px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .yy{
            margin-left: 120px;
        }
        .search{
            position: relative;
            // margin-top: 22px;
            input{
                width: 435px;
                height: 42px;
                outline: none;
                border: 0;
                padding-left: 25px;
                background: url(../img/head/search_icon.png) 0 -44px;
                &:focus{
                    // :focus用来获取元素的焦点
                    background: url(../img/head/search_icon.png) 0px 0px;
                }
                &:focus+a{
                    background: url(../img/head/search_icon.png) -464px -45px;
                }
            }
            a{
                display: inline-block;
                width: 20px;
                height: 30px;
                // border: 1px solid white;
                position: absolute;
                top: 2.5px;
                right: 20px;
                background: url(../img/head/search_icon.png) -464px -5px;
            }
        }
        ul{
            // margin-right: 100px;
            li{
                display: inline-block;
                margin-right:20px;
                img:first-child{
                   width: 20px;
                }
                a{
                    color: #fff;
                }
            }
        }
    }
}

.head_3{
    width: 100%;
    height: 50px;
    background-color: #222222;
    margin-top: 2px;
    ul{
        display: flex;
        justify-content: center;
        li{
            list-style: none;
            text-align: center;
            height: 50px;
            line-height: 50px;
            &:first-child{
                margin-right: 100px;
            }
            &:nth-child(2){
                color:rgb(245,42,110);
                border-bottom: 2px solid rgb(245,42,110);
            }
            }
            a{
                color: #fff;
                display: inline-block;
                width: 130px;
                height: 50px;
                &:hover{
                    color:rgb(245,42,110);
                    border-bottom: 2px solid rgb(245,42,110);
                }
            }
        }
}

html scss