前端学习——仿原神官网顶部导航栏

最新推荐文章于 2024-05-26 11:01:49 发布

玄东林檎

最新推荐文章于 2024-05-26 11:01:49 发布

阅读量1.6k

点赞数 7

分类专栏：学习前端文章标签：前端学习 css

本文链接：https://blog.csdn.net/u013430418/article/details/125665309

版权

学习前端专栏收录该内容

33 篇文章 10 订阅

订阅专栏

前端学习——仿原神官网顶部导航栏

通过使用CSS html实现原神官网的导航栏

本人做的

在这里插入图片描述

原神官网

在这里插入图片描述

后续将把顶部标签hover效果的教程发出

下面来看看代码

 <!-- 顶部固定导航栏 -->
        <div class="header-wrap">
            <div class="header-container-bar">
                <div class="music">
                    <img src="./images/index.png" alt="">
                </div>
                <div class="header-wrap-nav">
                    <div class="topbar-wrap">
                        <a class="header__navitem" href="">首&nbsp;页</a>
                        <a class="header__navitem" href="">新&nbsp;闻</a>
                        <a class="header__navitem" href="">角&nbsp;色</a>
                        <a class="header__navitem" href="">世&nbsp;界</a>
                        <a class="header__navitem" href="">漫&nbsp;画</a>
                        <a class="header__navitem" href="">社&nbsp;区</a>
                    </div>
                </div>
                <div class="header-wrap-right">
                    <a href="" class="wrap-right">
                        <span>成长关爱系统</span>
                        <img src="./images/index2.png" alt="">
                    </a>
                    <a href="" class="wrap-right">
                        <span>登录</span>
                        <img src="./images/index3.png" alt="">
                    </a>
                </div>
            </div>
        </div>

CSS

.header-wrap{
    position: fixed;
    z-index: 9999;
    width: 1920px;
    height: 66px;
    background-color: rgba(0,0,0,.65);
    box-shadow: 0px 1px 1px 0px rgb(0 0 0 / 0.75);
}
/* 容器大小 */
.music{
    float: left;
    width: 317px;
    height: 66px;
    background-image: url(../images/f78aabc.png);
    background-size: cover;
    margin-left: 8px;
    position: relative;
}
.music>img{
    width: 30px;
    height: 30px;
    float: left;
    position: absolute;
    left: 20%;
    top: 16.5px;
}
.header-wrap-nav{
    position: relative;
    width: 600.2px;
    height: 66px;
    float: left;
    margin-left: -46px;
    padding-right: 10px;
}
.topbar-wrap{
    height: 66px;
    line-height: 66px;
    font-size: 17px;
}
.topbar-wrap>a{
    float: left;
    width: 40.0333333px;
    margin: 0 30px;
    color: rgba(255,255,255,0.7);
}
.header-wrap-right{
    height: 66px;
    line-height: 66px;
    font-size: 17px;
    float:right;
}
.header-wrap-right>a{
    float: left;
    width: auto;
    height: 66px;
    margin-right: 30px;
    color: rgba(255,255,255,0.7);
}
.header-wrap-right>a>img{
    width: 27px;
    height: 27px;
    margin-left: 18px;
    opacity: .7;
}