王者荣耀静态页面头部代码设计（2）

最新推荐文章于 2024-04-27 00:04:41 发布

七小山

最新推荐文章于 2024-04-27 00:04:41 发布

阅读量1k

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_55928824/article/details/128467156

版权

1.一般logo的处理居中显示

  <body>
    <div class="header">
      <div class="header_wrapper area">
        <!-- 左边 -->
        <div class="left_area">
          <h1 class="logo">
            <a href="#"></a>
          </h1>
          <div class="left_center">
            111
          </div>
        </div>
   <!-- 右边 -->
        <div class="right">right</div>
      </div>
    </div>
  </body>

 <style>
    .header {
      height: 84px;
      background: rgba(0, 0, 0, 0.8);
      line-height: 84px;
    }
    /* 整体flex布局，两端 */
    .header .area {
      display: flex;
      justify-content: space-around;
    }
    /* 分别左右各占一部分 */
    .header .area .right {
      background-color: aqua;
    }
    /* 左边的自己里面也是flex布局 */
    .header .left_area {
      display: flex;
    }
/* 设置左边里面第一部分的图标居中显示 */
    .header .left_area .logo a {
      position: relative;
      top: 50%;
      transform: translate(0, -50%);
      display: block;
      width: 200px;
      height: 54px;
      background: url(./img/logo_header.png);
    }
   
  </style>

2.左边导航栏的布局

这里采用ul>li列表标签，通过每个li里面包一个a标签，然后再包括一个span标签，使之分别两行显示

    <ul class="nav_list">
            <li class="item">
              <a href="#">游戏资料<span class="tes">DATA</span></a>
            </li>
            <li class="item">
              <a href="#">内容中心<span class="tes">CONTENTS</span></a>
            </li>
            <li class="item">
              <a href="#">赛事中心<span class="tes"> MATCH</span></a>
            </li>
            <li class="item">
              <a href="#">百态王者<span class="tes">CULTURE</span></a>
            </li>
            <li class="item">
              <a href="#">社区互动<span class="tes">COMMUNITY</span></a>
            </li>
            <li class="item">
              <a href="#">玩家支持<span class="tes">PLAYER</span></a>
            </li>
            <li class="item">
              <a href="#">IP新游<span class="tes">NEW GAMES</span></a>
            </li>
          </ul>
        </div>

  .left_area .nav_list {
      display: flex;
    }
    .left_area .nav_list .item {
      width: 110px;
    }
   
    .left_area .nav_list .item a {
      display: block;
      color: #c9c9dd;
      font-size: 18px;
      line-height: 30px;
      text-align: center;
    }
    .left_area .nav_list .item a .tes {
      font-size: 12px;
      /* 独占一行,行内元素 */
      display: block;
      color: #858792;
    }

3.右边登录模块

    /* 分别左右各占一部分 */
        .header  .right {
         display: flex;
         /* 图片文字居中 */
         align-items: center;

        }
        .header  .right .image img{
          border: 1px solid #d9ad50;
          border-radius: 50%;
        }
        .header  .right .info a {
          padding-left: 5px;
          color: #ffffff;
          font-size: 16px;
        }
        .header .right .info p {
           padding-left: 5px;
          color: #858792;
          font-size: 12px;
        }

 <div class="right">
          <a href="#" class="image">
            <img src="./img/logo_header2.png" alt=""
          /></a>
          <div class="info">
            <a href="#" class="right_login">欢迎登录</a>
            <p class="right_game">登录后查看游戏战绩</p>
          </div>
        </div>