admin管理员组

文章数量:1026989

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

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

通过使用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;
}

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

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

通过使用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;
}

本文标签： 前端学习仿原神官网顶部导航栏