7.20王者荣耀导航栏1

王者荣耀导航栏1

wink在干嘛

1559人浏览 · 2022-07-20 18:57:41

wink在干嘛 · 2022-07-20 18:57:41 发布

最近在写王者荣耀官网网页，后续会和大家分享自己的成品，今天呢，给大家分享一下王者荣耀导航栏的写法，会有不足之处，还会加以改进

导航栏的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;
}