王者荣耀静态页面中间代码设计（1）

这个部分分为三个小部分

1.第一部分是一个图片加导航栏，这里还没有实现轮播图效果

  <div class="news-section">
        <div class="roate">
          <img src="./img/news01.jpeg" alt="" />

          <ul class="roate_banner">
            <li class="item"><a href="#">王者营地四周年</a></li>
            <li class="item"><a href="#">世冠TOP5</a></li>
            <li class="item"><a href="#">海都新英雄</a></li>
            <li class="item"><a href="#">大仙暖冬送福利</a></li>
            <li class="item"><a href="#">世冠应援曲</a></li>
          </ul>
        </div>

 采用绝对定位等，使导航栏悬浮在图片上面，之后使用flex布局分割导航栏布局

 .roate .roate_banner {
      position: absolute;

      bottom: 0;
      background-color: #363636;
      height: 44px;
      width: 605px;
      display: flex;
    }
    .roate .roate_banner a {
      color: #b1b2be;
    }
    .roate .roate_banner .item {
      width: 120px;
      height: 44px;
      line-height: 44px;

      font-size: 14px;
      left: 0;
      text-align: center;
    }
    .roate .roate_banner .item :hover {
      color: burlywood;
    }

2.第二部分是顶部导航栏加上中间内容，这个最复杂

  <div class="new_center">
          <ul class="new_center_banner">
            <li class="item"><a href="#">热门</a></li>
            <li class="item"><a href="#">新闻</a></li>
            <li class="item"><a href="#">公告</a></li>
            <li class="item"><a href="#">活动</a></li>
            <li class="item"><a href="#">赛事</a></li>
            <li class="item"><a href="#">...</a></li>
          </ul>
          <p>【游历海都】活动开启公告及FAQ</p>
          <ul class="new_center_news">
            <li>
              <span class="work">活动</span
              ><a href="#">蒙犽皮肤设计大赛创意赏析第二期</a
              ><span class="data">12/23</span>
            </li>
            <li>
              <span class="work">活动</span
              ><a href="#">蒙犽皮肤设计大赛创意赏析第二期</a
              ><span class="data">12/23</span>
            </li>
            <li>
              <span class="work">活动</span
              ><a href="#">蒙犽皮肤设计大赛创意赏析第二期</a
              ><span class="data">12/23</span>
            </li>
            <li>
              <span class="work">活动</span
              ><a href="#">蒙犽皮肤设计大赛创意赏析第二期</a
              ><span class="data">12/23</span>
            </li>
            <li>
              <span class="work">活动</span
              ><a href="#">蒙犽皮肤设计大赛创意赏析第二期第二期</a
              ><span class="data">12/23</span>
            </li>
            <li>
              <span class="work">活动</span
              ><a href="#">蒙犽皮肤设计大赛创意赏析第二期</a
              ><span class="data">12/23</span>
            </li>
          </ul>
        </div>

 .news-section .new_center {
      flex: 1;
      padding: 0 17px;
      background-color: #323235;
      /* height: 342px; */
      /* background-color: blue; */
    }
    .new_center .new_center_banner {
      display: flex;
      background-color: #323235;
      padding-left: 0;
      border-bottom: 1px solid #000;
    }
    .new_center .new_center_banner .item {
      width: 52px;
      height: 45px;
      line-height: 45px;
      text-align: center;
    }
    .new_center .new_center_banner .item a {
      color: #b8b9c5;
    }
    .new_center .new_center_banner .item:hover {
      color: #f3c258;
      border-bottom: 3px solid #f3c258;
    }
    .new_center .new_center_banner .item a:hover {
      color: #f3c258;
    }
    .new_center p {
      width: 230px;
      height: 36px;
      line-height: 36px;
      padding: 0 15px;
      color: #f3c258;
      font-size: 18px;
      margin-top: 10px;
      margin-bottom: 10px;
      /* 文字省略 */
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      background: #414046;
    }

    .new_center_news li {
      margin-bottom: 10px;
      height: 21px;
      line-height: 21px;
    }
    .new_center_news li a {
      display: inline-block;
      width: 220px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .new_center_news .work {
      color: #f4be19;
      border: 1px solid currentColor;
      vertical-align: top;
      /* margin-top: 2px; */
      font-size: 12px;
      width: 32px;
      text-align: center;
      border-radius: 2px;
      margin-right: 8px;
      display: inline-block;
      height: 21px;
      line-height: 21px;
    }
    .new_center_news .data {
      color: #999;
      vertical-align: top;
      font-size: 12px;
      margin-left: 20px;
      text-align: center;
      display: inline-block;
      height: 21px;
      line-height: 21px;
    }
    .new_center_news a {
      color: #b8b9c5;
      width: 230px;
      text-align: center;
      /* 省略文字显示 */
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-size: 14px;
    }

3.第三部分是三个精灵图的摆放，只需要写清楚对应的相对位置就可以

 <div class="dowload">
          <a href="#" class="dowload-btn"></a>
          <a href="#" class="guard-btn"></a>
          <a href="#" class="experience-btn"></a>
        </div>

  .news-section .dowload a {
      display: block;
      background: url(./img/hover_boder.png) no-repeat;
    }
    .news-section .dowload a.dowload-btn {
      height: 128px;
      background-position: 0 -219px;
    }
    .news-section .dowload a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }
    .news-section .dowload a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }

总体效果