最近在写王者荣耀官网网页,后续会和大家分享自己的成品,今天呢,给大家分享一下王者荣耀导航栏的写法,会有不足之处,还会加以改进
导航栏的html我将其分为左中右三个区域
<header>
<div class="nav">
<!-- 左边区域 -->
<div class="logo1">
<img src="img/header.img/logo1.png" alt="">
</div>
<!-- 中间区域 -->
<div class="game-intro">
<ul>
<li>
<h2>游戏资料</h2>
<h5>DATA</h5>
</li>
<li>
<h2>内容中心</h2>
<h5>CONTENTS</h5>
</li>
<li>
<h2>赛事中心</h2>
<h5>MATCH</h5>
</li>
<li>
<h2>百态王者</h2>
<h5>CULTURE</h5>
</li>
<li>
<h2>社区互动</h2>
<h5>COMMUNITY</h5>
</li>
<li>
<h2>玩家支持</h2>
<h5>PLAYER</h5>
</li>
<li>
<h2>IP新游</h2>
<h5>NEW GAMES</h5>
</ul>
</div>
<!-- 右边区域 -->
<div class="login">
<img src="img/header.img/hero.png" alt="">
<h4>欢迎登陆</h4>
<span>登陆后查看游戏战绩</span>
</div>
</div>
</header>
CSS样式
body{
background-image: url(../img/header.img/bg.webp);
width: 100%;
}
header{
height:84px ;
background-color:rgba(0,0,0,.8) ;
}
.nav{
width: 1250px;
height: 84px;
margin: 0 auto;
/* background-color: red; */
}
/* nav左边区域 */
.logo1{
float: left;
}
.logo1 >img{
margin-top:20px ;
}
/* nav中间区域 */
.game-intro{
float: left;
width: 805px;
height: 84px;
margin-left: 40px;
}
.game-intro>ul>li{
float: left;
width:115px ;
height:84px ;
}
.game-intro>ul>li>h2{
text-align: center;
font-size: 20px;
margin-top: 23px;
color: #fff;
font-weight: 500;
}
.game-intro>ul>li>h5{
text-align: center;
font-size: 12px;
color: #fff;
margin-top: 8px;
font-weight: 500;
}
/* hover效果 */
.game-intro>ul>li:hover{
background-color: rgb(31,51,47);
border-bottom:4px solid rgb(243,194,88);
}
.game-intro>ul>li:hover >h2{
color:rgb(243,194,88) ;
}
.game-intro>ul>li:hover >h5{
color:rgb(243,194,88) ;
}
/* nav右边区域 */
.login {
float: right;
width: 182px;
margin-top: 20px;
cursor: pointer;
}
.login img {
display: block;
border: 1px solid rgb(243,194,88);
border-radius: 50%;
float: left;
margin-right: 8px;
}
.login h4 {
font-weight: 400;
font-size: 16px;
color: #fff;
}
.login span {
font-size: 14px;
color: #858792;
}
关于下拉框的实现,请关注后续更新
导航栏的部分虽大同小异,但经过几天的练习以及在自己写项目的过程当中,发现自己还是有许多许多不足之处,还是有许多需要注意的地方,比如一些标签的使用,浮动之后的布局等,但这也不是什么难事。加油吧!何惧黑夜漫漫,黎明终将到来!共勉