19.[前端开发]Day19-王者荣项目耀实战(二)

m0_zj2025-02-07 5:04

01_(掌握)王者荣耀-main-banner展示实现

完整代码

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
    }

    .news-section .banner {
      width: 605px;
      background-color: #000;
    }

    .news-section .banner .image-list {
      display: flex;
      width: 604px;
      overflow: hidden;
    }

    .news-section .banner .image-list .item {
      flex-shrink: 0;
      width: 100%;
    }

    .news-section .banner .image-list .item a {
      display: block;
    }

    .news-section .banner .image-list .item a img {
      width: 100%;
    }

    .news-section .banner .title-list {
      display: flex;
      height: 44px;
      line-height: 44px;
    }

    .news-section .banner .title-list .item {
      flex: 1;
      text-align: center;
    }

    .news-section .banner .title-list .item a {
      display: block;
      font-size: 14px;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item.active a,
    .news-section .banner .title-list .item a:hover {
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }

    .news-section .news {
      flex: 1;
      background-color: purple;
    }

    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download a.download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="news-section">
      <div class="banner">
        <ul class="image-list">
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
        </ul>
        <ul class="title-list">
          <li class="item active">
            <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>
      </div>
      <div class="news">
        
      </div>
      <div class="download">
        <a class="download-btn" href="#"></a>
        <a class="guard-btn" href="#"></a>
        <a class="experience-btn" href="#"></a>
      </div>
    </div>
    <div class="content-section"></div>
    <div class="match-section"></div>
  </div>

</body>
</html>

逐步细节

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main{
      height: 100px;
    }
    .news-section{
      display: flex;
      height: 342px;
    }
    .news-section .banner{
      width: 605px;
      background-color: rgb(11, 11, 11);
    }
    .news-section .banner .image-list{
      width: 604px;
      display: flex;
      overflow: hidden;
    }
    .news-section .banner .image-list .item{
      flex-shrink: 0;
      width: 100%;
    }
    .news-section .banner .image-list .item a{
      display: block;
    }
    .news-section .banner .image-list .item a img{
      width: 100%;
    }
    .news-section .banner .title-list{
      display: flex;
      height: 44px;
      line-height: 44px;
    }
    .news-section .banner .title-list .item{
      flex: 1;
      text-align: center;
    }
    .news-section .banner .title-list .item a{
      display: block;
      font-size: 14px;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item a:hover{
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }




    .news-section .news{
      flex: 1;
      background-color: purple;
    }
    .news-section .download{
      width: 236px;
      background-color: skyblue;
    }
    .news-section .download a{
      display: block;
      background:url(./img/main_sprite.png) no-repeat;
    }
    .news-section .download a.download-btn{
      height: 128px;
      background-position: 0 -219px;
    }
    .news-section .download a.guard-btn{
      height: 106px;
      background-position: 0 -350px;
    }
    .news-section .download a.experience-btn{
      height: 108px;
      background-position: 0 -461px;
    }

  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="news-section">
      <div class="banner">
        <ul class="image-list">
          <li class="item">
            <a href="#">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="#">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
        </ul>
        <ul class="title-list">
          <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>
      </div>
      <div class="news"></div>
      <div class="download">
        <a class="download-btn" href="#"></a>
        <a class="guard-btn" href="#"></a>
        <a class="experience-btn" href="#"></a>
      </div>
    </div>
    <div class="content-section"></div>
    <div class="match-section"></div>
  </div>

</body>
</html>

02_(掌握)王者荣耀-main-news结构搭建和背景

完整代码

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
      background: url(./img/news_bg.png) no-repeat;
    }

    .news-section .banner {
      width: 605px;
    }

    .news-section .banner .image-list {
      display: flex;
      width: 604px;
      overflow: hidden;
    }

    .news-section .banner .image-list .item {
      flex-shrink: 0;
      width: 100%;
    }

    .news-section .banner .image-list .item a {
      display: block;
    }

    .news-section .banner .image-list .item a img {
      width: 100%;
    }

    .news-section .banner .title-list {
      display: flex;
      height: 44px;
      line-height: 44px;
    }

    .news-section .banner .title-list .item {
      flex: 1;
      text-align: center;
    }

    .news-section .banner .title-list .item a {
      display: block;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item.active a,
    .news-section .banner .title-list .item a:hover {
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }

    .news-section .news {
      flex: 1;
      overflow: hidden;
      padding: 0 17px;
    }

    .news-section .news .title-list {
      display: flex;
      height: 48px;
      border-bottom: 1px solid #000;
    }

    .news-section .news .title-list .item {
      width: 52px;
    }

    .news-section .news .title-list .item a {
      display: block;
      height: 48px;
      box-sizing: border-box;
      line-height: 48px;
      color: #b8b9c5;
      text-align: center;

      transition: border-bottom 200ms ease-in;
    }

    .news-section .news .title-list .item.active a,
    .news-section .news .title-list .item:not(.more) a:hover {
      color: #f3c258;
      border-bottom: 3px solid #f3c258;
    }

    /* .news-section .news .title-list .item.more a:hover {
      color: #b8b9c5;
      border-bottom-color: transparent;
    } */

    .news-section .news .notice {
      height: 36px;
      line-height: 36px;
      margin-top: 18px;
      padding: 0 15px;
      background: #414046;
    }

    .news-section .news .notice > a {
      display: block;
      /* padding-right: 50px; */
      font-size: 18px;
      color: #f3c258;

      /* white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; */
    }

    .news-section .news .news-list {
      margin-top: 12px;
    }

    .news-section .news .news-list .item {
      display: flex;
      align-items: center;
      margin-bottom: 11px;
    }

    .news-section .news .news-list .item .desc {
      flex: 1;
      color: #b8b9c5;

      white-space: nowrap;
      
    }

    .news-section .news .news-list .item .date {
      padding: 0 8px;
      color: #999;
      font-size: 12px;
    }

    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download a.download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="news-section">
      <div class="banner">
        <ul class="image-list">
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
        </ul>
        <ul class="title-list">
          <li class="item active">
            <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>
      </div>
      <div class="news">
        <ul class="title-list">
          <li class="item active">
            <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 more">
            <a href="">...</a>
          </li>
        </ul>

        <p class="notice">
          <a class="nowrap_ellipsis" href="#">4月21日全服不停机更新公告</a>
        </p>

        <ul class="news-list">
          <li class="item">
            <a class="desc nowrap_ellipsis" href="#">
              <i class="news_type news_type_hot">热门</i>
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis" href="#">
              <i class="news_type news_type_hot">热门</i>
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis" href="#">
              <i class="news_type news_type_notice">公告</i>
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis news_type news_type_hot" href="#">
              <!-- <i class="news_type news_type_hot">热门</i> -->
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis news_type news_type_news" href="#">
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis news_type news_type_hot" href="#">
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis" href="#">
              <i class="news_type news_type_notice">公告</i>
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
        </ul>
        
      </div>
      <div class="download">
        <a class="download-btn" href="#"></a>
        <a class="guard-btn" href="#"></a>
        <a class="experience-btn" href="#"></a>
      </div>
    </div>
    <div class="content-section"></div>
    <div class="match-section"></div>
  </div>

</body>
</html>

具体细节

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
      background: url(./img/news_bg.png) no-repeat;
    }

    .news-section .banner {
      width: 605px;
    }

    .news-section .banner .image-list {
      display: flex;
      width: 604px;
      overflow: hidden;
    }

    .news-section .banner .image-list .item {
      flex-shrink: 0;
      width: 100%;
    }

    .news-section .banner .image-list .item a {
      display: block;
    }

    .news-section .banner .image-list .item a img {
      width: 100%;
    }

    .news-section .banner .title-list {
      display: flex;
      height: 44px;
      line-height: 44px;
    }

    .news-section .banner .title-list .item {
      flex: 1;
      text-align: center;
    }

    .news-section .banner .title-list .item a {
      display: block;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item.active a,
    .news-section .banner .title-list .item a:hover {
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }

    .news-section .news {
      flex: 1;
      overflow: hidden;
      padding: 0 17px;
    }


    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download a.download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="news-section">
      <div class="banner">
        <ul class="image-list">
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
        </ul>
        <ul class="title-list">
          <li class="item active">
            <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>
      </div>
      <div class="news">
        111
        <ul class="title-list">
       
        </ul>

        <p class="notice">
          <a class="nowrap_ellipsis" href="#">4月21日全服不停机更新公告</a>
        </p>

        <ul class="news-list">

        </ul>
        
      </div>
      <div class="download">
        <a class="download-btn" href="#"></a>
        <a class="guard-btn" href="#"></a>
        <a class="experience-btn" href="#"></a>
      </div>
    </div>
    <div class="content-section"></div>
    <div class="match-section"></div>
  </div>

</body>
</html>

03_(掌握)王者荣耀-main-news-titles展示

04_(掌握)王者荣耀-main-titles-border

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
      background: url(./img/news_bg.png) no-repeat;
    }

    .news-section .banner {
      width: 605px;
    }

    .news-section .banner .image-list {
      display: flex;
      width: 604px;
      overflow: hidden;
    }

    .news-section .banner .image-list .item {
      flex-shrink: 0;
      width: 100%;
    }

    .news-section .banner .image-list .item a {
      display: block;
    }

    .news-section .banner .image-list .item a img {
      width: 100%;
    }

    .news-section .banner .title-list {
      display: flex;
      height: 44px;
      line-height: 44px;
    }

    .news-section .banner .title-list .item {
      flex: 1;
      text-align: center;
    }

    .news-section .banner .title-list .item a {
      display: block;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item.active a,
    .news-section .banner .title-list .item a:hover {
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }

    .news-section .news {
      flex: 1;
      overflow: hidden;
      padding: 0 17px;
    }

    .news-section .news .title-list {
      display: flex;
      height: 48px;
      border-bottom: 1px solid #000;
    }

    .news-section .news .title-list .item {
      width: 52px;
    }

    .news-section .news .title-list .item a {
      display: block;
      height: 48px;
      box-sizing: border-box;
      line-height: 48px;
      color: #b8b9c5;
      text-align: center;

      transition: border-bottom 200ms ease-in;
    }

    .news-section .news .title-list .item.active a,
    .news-section .news .title-list .item:not(.more) a:hover {
      color: #f3c258;
      border-bottom: 3px solid #f3c258;
    }

    /* .news-section .news .title-list .item.more a:hover {
      color: #b8b9c5;
      border-bottom-color: transparent;
    } */

 

    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download a.download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="news-section">
      <div class="banner">
        <ul class="image-list">
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
        </ul>
        <ul class="title-list">
          <li class="item active">
            <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>
      </div>
      <div class="news">
        <ul class="title-list">
          <li class="item active">
            <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 more">
            <a href="">...</a>
          </li>
        </ul>

        <p class="notice">
          <a class="nowrap_ellipsis" href="#">4月21日全服不停机更新公告</a>
        </p>

        <ul class="news-list">
       
        </ul>
        
      </div>
      <div class="download">
        <a class="download-btn" href="#"></a>
        <a class="guard-btn" href="#"></a>
        <a class="experience-btn" href="#"></a>
      </div>
    </div>
    <div class="content-section"></div>
    <div class="match-section"></div>
  </div>

</body>
</html>

05_(掌握)王者荣耀-main-news-notice实现

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
      background: url(./img/news_bg.png) no-repeat;
    }

    .news-section .banner {
      width: 605px;
    }

    .news-section .banner .image-list {
      display: flex;
      width: 604px;
      overflow: hidden;
    }

    .news-section .banner .image-list .item {
      flex-shrink: 0;
      width: 100%;
    }

    .news-section .banner .image-list .item a {
      display: block;
    }

    .news-section .banner .image-list .item a img {
      width: 100%;
    }

    .news-section .banner .title-list {
      display: flex;
      height: 44px;
      line-height: 44px;
    }

    .news-section .banner .title-list .item {
      flex: 1;
      text-align: center;
    }

    .news-section .banner .title-list .item a {
      display: block;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item.active a,
    .news-section .banner .title-list .item a:hover {
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }

    .news-section .news {
      flex: 1;
      overflow: hidden;
      padding: 0 17px;
    }

    .news-section .news .title-list {
      display: flex;
      height: 48px;
      border-bottom: 1px solid #000;
    }

    .news-section .news .title-list .item {
      width: 52px;
    }

    .news-section .news .title-list .item a {
      display: block;
      height: 48px;
      box-sizing: border-box;
      line-height: 48px;
      color: #b8b9c5;
      text-align: center;

      transition: border-bottom 200ms ease-in;
    }

    .news-section .news .title-list .item.active a,
    .news-section .news .title-list .item:not(.more) a:hover {
      color: #f3c258;
      border-bottom: 3px solid #f3c258;
    }

    /* .news-section .news .title-list .item.more a:hover {
      color: #b8b9c5;
      border-bottom-color: transparent;
    } */

    .news-section .news .notice {
      height: 36px;
      line-height: 36px;
      margin-top: 18px;
      padding: 0 15px;
      background: #414046;
    }

    .news-section .news .notice > a {
      display: block;
      /* padding-right: 50px; */
      font-size: 18px;
      color: #f3c258;

      /* white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; */
    }

    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download a.download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="news-section">
      <div class="banner">
        <ul class="image-list">
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
        </ul>
        <ul class="title-list">
          <li class="item active">
            <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>
      </div>
      <div class="news">
        <ul class="title-list">
          <li class="item active">
            <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 more">
            <a href="">...</a>
          </li>
        </ul>

        <p class="notice">
          <a class="nowrap_ellipsis" href="#">4月21日全服不停机更新公告</a>
        </p>

        <ul class="news-list">
       
        </ul>
        
      </div>
      <div class="download">
        <a class="download-btn" href="#"></a>
        <a class="guard-btn" href="#"></a>
        <a class="experience-btn" href="#"></a>
      </div>
    </div>
    <div class="content-section"></div>
    <div class="match-section"></div>
  </div>

</body>
</html>

06_(掌握)王者荣耀-main-news-list实现

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
      background: url(./img/news_bg.png) no-repeat;
    }

    .news-section .banner {
      width: 605px;
    }

    .news-section .banner .image-list {
      display: flex;
      width: 604px;
      overflow: hidden;
    }

    .news-section .banner .image-list .item {
      flex-shrink: 0;
      width: 100%;
    }

    .news-section .banner .image-list .item a {
      display: block;
    }

    .news-section .banner .image-list .item a img {
      width: 100%;
    }

    .news-section .banner .title-list {
      display: flex;
      height: 44px;
      line-height: 44px;
    }

    .news-section .banner .title-list .item {
      flex: 1;
      text-align: center;
    }

    .news-section .banner .title-list .item a {
      display: block;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item.active a,
    .news-section .banner .title-list .item a:hover {
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }

    .news-section .news {
      flex: 1;
      overflow: hidden;
      padding: 0 17px;
    }

    .news-section .news .title-list {
      display: flex;
      height: 48px;
      border-bottom: 1px solid #000;
    }

    .news-section .news .title-list .item {
      width: 52px;
    }

    .news-section .news .title-list .item a {
      display: block;
      height: 48px;
      box-sizing: border-box;
      line-height: 48px;
      color: #b8b9c5;
      text-align: center;

      transition: border-bottom 200ms ease-in;
    }

    .news-section .news .title-list .item.active a,
    .news-section .news .title-list .item:not(.more) a:hover {
      color: #f3c258;
      border-bottom: 3px solid #f3c258;
    }

    /* .news-section .news .title-list .item.more a:hover {
      color: #b8b9c5;
      border-bottom-color: transparent;
    } */

    .news-section .news .notice {
      height: 36px;
      line-height: 36px;
      margin-top: 18px;
      padding: 0 15px;
      background: #414046;
    }

    .news-section .news .notice > a {
      display: block;
      /* padding-right: 50px; */
      font-size: 18px;
      color: #f3c258;

      /* white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; */
    }

    .news-section .news .news-list {
      margin-top: 12px;
    }

    .news-section .news .news-list .item {
      display: flex;
      align-items: center;
      margin-bottom: 11px;
    }

    .news-section .news .news-list .item .desc {
      flex: 1;
      color: #b8b9c5;

      white-space: nowrap;
      
    }

    .news-section .news .news-list .item .date {
      padding: 0 8px;
      color: #999;
      font-size: 12px;
    }

    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download a.download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="news-section">
      <div class="banner">
        <ul class="image-list">
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
        </ul>
        <ul class="title-list">
          <li class="item active">
            <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>
      </div>
      <div class="news">
        <ul class="title-list">
          <li class="item active">
            <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 more">
            <a href="">...</a>
          </li>
        </ul>

        <p class="notice">
          <a class="nowrap_ellipsis" href="#">4月21日全服不停机更新公告</a>
        </p>

        <ul class="news-list">
          <li class="item">
            <a class="desc nowrap_ellipsis" href="#">
              <i class="news_type news_type_hot">热门</i>
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis" href="#">
              <i class="news_type news_type_hot">热门</i>
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis" href="#">
              <i class="news_type news_type_notice">公告</i>
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis news_type news_type_hot" href="#">
              <!-- <i class="news_type news_type_hot">热门</i> -->
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis news_type news_type_news" href="#">
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis news_type news_type_hot" href="#">
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis" href="#">
              <i class="news_type news_type_notice">公告</i>
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
        </ul>
        
      </div>
      <div class="download">
        <a class="download-btn" href="#"></a>
        <a class="guard-btn" href="#"></a>
        <a class="experience-btn" href="#"></a>
      </div>
    </div>
    <div class="content-section"></div>
    <div class="match-section"></div>
  </div>

</body>
</html>

07_(掌握)王者荣耀-新闻图标的封装过程

注意:对于会反复用到的样式我们应该写到common.css里面，进行复用

css 复制代码 
/* common.css公共的样式 */
/* body的公共样式 */
body {
  font: 14px/1.5 "Microsoft YaHei",Tahoma,"simsun",sans-serif;
  color: #333;
}

/* wrapper中间包裹的区域 */
.top_wrapper {
  width: 980px;
  margin: 0 auto;
}

.header_wrapper {
  width: 1300px;
  margin: 0 auto;
}

.main_wrapper {
  width: 1200px;
  margin: 0 auto;
}

/* 文字不换行显示3行代码 */
.nowrap_ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 新闻类型的图标 */
/* .news_type {
  display: inline-block;

  width: 32px;
  height: 16px;
  margin-right: 2px;

  line-height: 16px;
  text-align: center;
  font-size: 12px;

  border: 1px solid #f00;
  border-radius: 2px;
}

.news_type_hot {
  color: #ff3636;
  border-color: #ff3636;
}

.news_type_notice {
  color: #f4be19;
  border-color: #f4be19;
}

.news_type_news {
  color: #1e96ab;
  border-color: #1e96ab;
} */

.news_type::before {
  display: inline-block;
  width: 32px;
  height: 16px;
  margin-right: 2px;

  line-height: 16px;
  text-align: center;
  font-size: 12px;

  border: 1px solid #f00;
  border-radius: 2px;
}

.news_type_hot::before {
  content: "热门";
  color: #ff3636;
  border-color: #ff3636;
}

.news_type_notice::before {
  content: "公告";
  color: #f4be19;
  border-color: #f4be19;
}

.news_type_news::before {
  content: "新闻";
  color: #1e96ab;
  border-color: #1e96ab;
}

reset.css

css 复制代码 
/* reset.css样式重置文件 */
/* margin/padding重置 */
body, h1, h2, h3, ul, ol, li, p, dl, dt, dd {
  padding: 0;
  margin: 0;
}

/* a元素重置 */
a {
  text-decoration: none;
  color: #333;
}

/* img的vertical-align重置 */
img {
  vertical-align: top;
}

/* ul, ol, li重置 */
ul, ol, li {
  list-style: none;
}

/* 对斜体元素重置 */
i, em {
  font-style: normal;
}

05_page_main_news_news

css 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main {
      height: 100px;
    }

    .news-section {
      display: flex;
      height: 342px;
      background: url(./img/news_bg.png) no-repeat;
    }

    .news-section .banner {
      width: 605px;
    }

    .news-section .banner .image-list {
      display: flex;
      width: 604px;
      overflow: hidden;
    }

    .news-section .banner .image-list .item {
      flex-shrink: 0;
      width: 100%;
    }

    .news-section .banner .image-list .item a {
      display: block;
    }

    .news-section .banner .image-list .item a img {
      width: 100%;
    }

    .news-section .banner .title-list {
      display: flex;
      height: 44px;
      line-height: 44px;
    }

    .news-section .banner .title-list .item {
      flex: 1;
      text-align: center;
    }

    .news-section .banner .title-list .item a {
      display: block;
      color: #b1b2be;
    }
    .news-section .banner .title-list .item.active a,
    .news-section .banner .title-list .item a:hover {
      color: #f3c258;
      background-color: rgba(255,255,255,.15);
    }

    .news-section .news {
      flex: 1;
      overflow: hidden;
      padding: 0 17px;
    }

    .news-section .news .title-list {
      display: flex;
      height: 48px;
      border-bottom: 1px solid #000;
    }

    .news-section .news .title-list .item {
      width: 52px;
    }

    .news-section .news .title-list .item a {
      display: block;
      height: 48px;
      box-sizing: border-box;
      line-height: 48px;
      color: #b8b9c5;
      text-align: center;

      transition: border-bottom 200ms ease-in;
    }

    .news-section .news .title-list .item.active a,
    .news-section .news .title-list .item:not(.more) a:hover {
      color: #f3c258;
      border-bottom: 3px solid #f3c258;
    }

    /* .news-section .news .title-list .item.more a:hover {
      color: #b8b9c5;
      border-bottom-color: transparent;
    } */

    .news-section .news .notice {
      height: 36px;
      line-height: 36px;
      margin-top: 18px;
      padding: 0 15px;
      background: #414046;
    }

    .news-section .news .notice > a {
      display: block;
      /* padding-right: 50px; */
      font-size: 18px;
      color: #f3c258;

      /* white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden; */
    }

    .news-section .news .news-list {
      margin-top: 12px;
    }

    .news-section .news .news-list .item {
      display: flex;
      align-items: center;
      margin-bottom: 11px;
    }

    .news-section .news .news-list .item .desc {
      flex: 1;
      color: #b8b9c5;

      white-space: nowrap;
      
    }

    .news-section .news .news-list .item .date {
      padding: 0 8px;
      color: #999;
      font-size: 12px;
    }

    .news-section .download {
      width: 236px;
      background-color: skyblue;
    }

    .news-section .download a {
      display: block;
      background: url(./img/main_sprite.png) no-repeat;
    }

    .news-section .download a.download-btn {
      height: 128px;
      background-position: 0 -219px;
    }

    .news-section .download a.guard-btn {
      height: 106px;
      background-position: 0 -350px;
    }

    .news-section .download a.experience-btn {
      height: 108px;
      background-position: 0 -461px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="news-section">
      <div class="banner">
        <ul class="image-list">
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
          <li class="item">
            <a href="">
              <img src="./img/banner_01.jpeg" alt="">
            </a>
          </li>
        </ul>
        <ul class="title-list">
          <li class="item active">
            <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>
      </div>
      <div class="news">
        <ul class="title-list">
          <li class="item active">
            <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 more">
            <a href="">...</a>
          </li>
        </ul>

        <p class="notice">
          <a class="nowrap_ellipsis" href="#">4月21日全服不停机更新公告</a>
        </p>

        <ul class="news-list">
          <li class="item">
            <a class="desc nowrap_ellipsis" href="#">
              <i class="news_type news_type_hot">热门</i>
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis" href="#">
              <i class="news_type news_type_hot">热门</i>
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis" href="#">
              <i class="news_type news_type_notice">公告</i>
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis news_type news_type_hot" href="#">
              <!-- <i class="news_type news_type_hot">热门</i> -->
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis news_type news_type_news" href="#">
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis news_type news_type_hot" href="#">
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
          <li class="item">
            <a class="desc nowrap_ellipsis" href="#">
              <i class="news_type news_type_notice">公告</i>
              最新BUG修复进展【老亚瑟的答疑时间】
            </a>
            <span class="date">04/19</span>
          </li>
        </ul>
        
      </div>
      <div class="download">
        <a class="download-btn" href="#"></a>
        <a class="guard-btn" href="#"></a>
        <a class="experience-btn" href="#"></a>
      </div>
    </div>
    <div class="content-section"></div>
    <div class="match-section"></div>
  </div>

</body>
</html>

08_(掌握)王者荣耀-main-入口的展示实现

完整代码

css 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main .entrance-section {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }

    .main .entrance-section .item {
      width: 291px;
      height: 134px;
    }

    .main .entrance-section a {
      display: block;
      height: 100%;
      overflow: hidden;
    }

    .main .entrance-section a img {
      width: 100%;
      height: 100%;
      transition: transform 400ms ease;
    }

    .main .entrance-section a:hover img {
      transform: scale(1.1);
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <ul class="entrance-section">
      <li class="item">
        <a href="#">
          <img src="./img/entrance_01.jpg" alt="">
        </a>
      </li>
      <li class="item">
        <a href="#">
          <img src="./img/entrance_02.png" alt="">
        </a>
      </li>
      <li class="item">
        <a href="#">
          <img src="./img/entrance_03.jpg" alt="">
        </a>
      </li>
      <li class="item">
        <a href="#">
          <img src="./img/entrance_04.png" alt="">
        </a>
      </li>
    </ul>
  </div>

</body>
</html>

09_(掌握)王者荣耀-main-内容区域划分和header实现

完整代码

css 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main .section-content {
      display: flex;
      justify-content: space-between;
    }

    .main .section-content .left-content {
      width: 872px;
      height: 1000px;
    }
    .main .section-content .right-content {
      width: 295px;
      height: 500px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="section-content">
      <div class="left-content">
        <div class="content-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title">内容中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>
          <div class="tab_control">
            <div class="item active">精品栏目</div>
            <div class="line"></div>
            <div class="item">赛事精品</div>
            <div class="line"></div>
            <div class="item">英雄攻略</div>
          </div>
          <div class="tab_keyword">
            <div class="item active">最新</div>
            <div class="item">马菠萝奇闻录</div>
            <div class="item">马菠萝奇</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
          </div>

          

        </div>
        <div class="match-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title title-icon-match">赛事中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content"></div>
    </div>
  </div>

</body>
</html>

细节

css 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main .section-content {
      display: flex;
      justify-content: space-between;
    }

    .main .section-content .left-content {
      width: 872px;
      height: 1000px;
    }
    .main .section-content .right-content {
      width: 295px;
      height: 500px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="section-content">
      <div class="left-content">
        <div class="content-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title">内容中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>

          

        </div>
     
      </div>
      <div class="right-content"></div>
    </div>
  </div>

</body>
</html>

common.css

css 复制代码 
/* common.css公共的样式 */
/* body的公共样式 */
body {
  font: 14px/1.5 "Microsoft YaHei",Tahoma,"simsun",sans-serif;
  color: #333;
}

/* wrapper中间包裹的区域 */
.top_wrapper {
  width: 980px;
  margin: 0 auto;
}

.header_wrapper {
  width: 1300px;
  margin: 0 auto;
}

.main_wrapper {
  width: 1200px;
  margin: 0 auto;
}

/* 文字不换行显示3行代码 */
.nowrap_ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 新闻类型的图标 */
/* .news_type {
  display: inline-block;

  width: 32px;
  height: 16px;
  margin-right: 2px;

  line-height: 16px;
  text-align: center;
  font-size: 12px;

  border: 1px solid #f00;
  border-radius: 2px;
}

.news_type_hot {
  color: #ff3636;
  border-color: #ff3636;
}

.news_type_notice {
  color: #f4be19;
  border-color: #f4be19;
}

.news_type_news {
  color: #1e96ab;
  border-color: #1e96ab;
} */

.news_type::before {
  display: inline-block;
  width: 32px;
  height: 16px;
  margin-right: 2px;

  line-height: 16px;
  text-align: center;
  font-size: 12px;

  border: 1px solid #f00;
  border-radius: 2px;
}

.news_type_hot::before {
  content: "热门";
  color: #ff3636;
  border-color: #ff3636;
}

.news_type_notice::before {
  content: "公告";
  color: #f4be19;
  border-color: #f4be19;
}

.news_type_news::before {
  content: "新闻";
  color: #1e96ab;
  border-color: #1e96ab;
}

.news_type_match {
  display: inline-block;
  width: 52px;
  height: 23px;
  margin-right: 12px;
  border-radius: 10px;
  line-height: 23px;
  text-align: center;
  color: #999;
  font-size: 12px;
  background-color: #e3e3e3;
}

/* section_header */
.section_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section_header .header_left .title {
  font-size: 22px;
  color: #323235;
  padding-left: 30px;
  background: url(../img/main_sprite.png) no-repeat 0 -102px;
}

.section_header .header_left .title-icon-match {
  background-position: 0 -180px;
}

.section_header .header_left .title-icon-hero {
  background-position: 0 -139px;
}

.section_header .header_right {
  display: flex;
  align-items: center;
}

.section_header .header_right .more {
  display: block;
  padding-left: 22px;
  background: url(../img/main_sprite.png) no-repeat -252px 4px;
}

.section_header .header_right .more:hover {
  color: #f3c258;
}

10_(掌握)王者荣耀-main-tab-control的封装过程

css 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main .section-content {
      display: flex;
      justify-content: space-between;
    }

    .main .section-content .left-content {
      width: 872px;
      height: 1000px;
    }
    .main .section-content .right-content {
      width: 295px;
      height: 500px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="section-content">
      <div class="left-content">
        <div class="content-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title">内容中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>
          <div class="tab_control">
            <div class="item active">精品栏目</div>
            <div class="line"></div>
            <div class="item">赛事精品</div>
            <div class="line"></div>
            <div class="item">英雄攻略</div>
          </div>

          

        </div>
        <div class="match-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title title-icon-match">赛事中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content"></div>
    </div>
  </div>

</body>
</html>

11_(掌握)王者荣耀-main-tab-keyword的封装过程

css 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .main .section-content {
      display: flex;
      justify-content: space-between;
    }

    .main .section-content .left-content {
      width: 872px;
      height: 1000px;
    }
    .main .section-content .right-content {
      width: 295px;
      height: 500px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="section-content">
      <div class="left-content">
        <div class="content-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title">内容中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>
          <div class="tab_control">
            <div class="item active">精品栏目</div>
            <div class="line"></div>
            <div class="item">赛事精品</div>
            <div class="line"></div>
            <div class="item">英雄攻略</div>
          </div>
          <div class="tab_keyword">
            <div class="item active">最新</div>
            <div class="item">马菠萝奇闻录</div>
            <div class="item">马菠萝奇</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
          </div>

          

        </div>
        <div class="match-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title title-icon-match">赛事中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>
        </div>
      </div>
      <div class="right-content"></div>
    </div>
  </div>

</body>
</html>

12_(掌握)王者荣耀-main-video-item封装01

完整代码

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video-Item</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .video_item {
      margin: 100px auto;

      display: block;
      width: 212px;
    }

    .video_item .album {
      position: relative;
      border-radius: 3px;
      overflow: hidden;
    }

    .video_item .album img {
      width: 100%;
    }

    .video_item .album .info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;

      display: flex;
      justify-content: space-between;
      align-items: center;

      height: 22px;
      padding: 0 10px;
      line-height: 22px;
      background-color: rgba(0,0,0,.6);
      font-size: 12px;
      color: #fff;
    }

    .video_item .album .info .count {
      padding-left: 16px;
      background: url(./img/main_sprite.png) no-repeat -256px -59px;
    }

    .video_item .album .cover {
      display: none;
      opacity: 0;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0,0,0,.6);

      transition: all 300ms ease-in;
    }

    .video_item:hover .album .cover {
      display: block;
      animation: itemCoverAnim 300ms ease-in forwards;
    }

    @keyframes itemCoverAnim {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .video_item .album .cover .icon_play {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 40px;
      height: 40px;
      background: url(./img/main_sprite.png) no-repeat -192px -64px;
    }

    .video_item .desc {
      margin-top: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  </style>
</head>
<body>
  
  <a class="video_item" href="#">
    <div class="album">
      <img src="./img/video_album_01.png" alt="">
      <div class="info">
        <span class="count">471.6万</span>
        <span class="date">2020-08-29</span>
      </div>
      <div class="cover">
        <i class="icon_play"></i>
      </div>
    </div>
    <div class="desc">
      【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
    </div>
  </a>

</body>
</html>

细节

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video-Item</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .video_item {
      margin: 100px auto;

      display: block;
      width: 212px;
    }

    .video_item .album {
      position: relative;
      border-radius: 3px;
      overflow: hidden;
    }

    .video_item .album img {
      width: 100%;
    }

    .video_item .album .info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;

      display: flex;
      justify-content: space-between;
      align-items: center;

      height: 22px;
      padding: 0 10px;
      line-height: 22px;
      background-color: rgba(0,0,0,.6);
      font-size: 12px;
      color: #fff;
    }

    .video_item .album .info .count {
      padding-left: 16px;
      background: url(./img/main_sprite.png) no-repeat -256px -59px;
    }


    .video_item .desc {
      margin-top: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  </style>
</head>
<body>
  
  <a class="video_item" href="#">
    <div class="album">
      <img src="./img/video_album_01.png" alt="">
      <div class="info">
        <span class="count">471.6万</span>
        <span class="date">2020-08-29</span>
      </div>

    </div>
    <div class="desc">
      【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
    </div>
  </a>

</body>
</html>

13_(掌握)王者荣耀-main-video-item封装0

14_(掌握)王者荣耀-main-video-item动画补

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video-Item</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .video_item {
      margin: 100px auto;

      display: block;
      width: 212px;
    }

    .video_item .album {
      position: relative;
      border-radius: 3px;
      overflow: hidden;
    }

    .video_item .album img {
      width: 100%;
    }

    .video_item .album .info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;

      display: flex;
      justify-content: space-between;
      align-items: center;

      height: 22px;
      padding: 0 10px;
      line-height: 22px;
      background-color: rgba(0,0,0,.6);
      font-size: 12px;
      color: #fff;
    }

    .video_item .album .info .count {
      padding-left: 16px;
      background: url(./img/main_sprite.png) no-repeat -256px -59px;
    }

    .video_item .album .cover {
      display: none;
      opacity: 0;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(0,0,0,.6);

      transition: all 300ms ease-in;
    }

    .video_item:hover .album .cover {
      display: block;
      animation: itemCoverAnim 300ms ease-in forwards;
    }

    @keyframes itemCoverAnim {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .video_item .album .cover .icon_play {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 40px;
      height: 40px;
      background: url(./img/main_sprite.png) no-repeat -192px -64px;
    }

    .video_item .desc {
      margin-top: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  </style>
</head>
<body>
  
  <a class="video_item" href="#">
    <div class="album">
      <img src="./img/video_album_01.png" alt="">
      <div class="info">
        <span class="count">471.6万</span>
        <span class="date">2020-08-29</span>
      </div>
      <div class="cover">
        <i class="icon_play"></i>
      </div>
    </div>
    <div class="desc">
      【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
    </div>
  </a>

</body>
</html>

15_(掌握)王者荣耀-main-video-list的展示

video.css

css 复制代码 
.video_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.video_item {
  display: block;
  width: 212px;
  margin-bottom: 20px;
}

.video_item .album {
  position: relative;
  border-radius: 3px;
  overflow: hidden;
}

.video_item .album img {
  width: 100%;
}

.video_item .album .info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  height: 22px;
  padding: 0 10px;
  line-height: 22px;
  background-color: rgba(0,0,0,.6);
  font-size: 12px;
  color: #fff;
}

.video_item .album .info .count {
  padding-left: 16px;
  background: url(../img/main_sprite.png) no-repeat -256px -59px;
}

.video_item .album .cover {
  display: none;
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.6);

  transition: all 300ms ease-in;
}

.video_item:hover .album .cover {
  display: block;
  animation: itemCoverAnim 300ms ease-in forwards;
}

@keyframes itemCoverAnim {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.video_item .album .cover .icon_play {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  background: url(../img/main_sprite.png) no-repeat -192px -64px;
}

.video_item .desc {
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

16_(掌握)王者荣耀-main-赛事中心tab_control

css 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/video.css">
  <style>
    .main .section-content {
      display: flex;
      justify-content: space-between;
    }

    .main .section-content .left-content {
      width: 872px;
      height: 1000px;
    }

    .main .match-center .match-news {
      display: flex;
      height: 260px;
      margin: 20px 0 15px;
    }

    .main .match-center .match-news .news-left {
      width: 211px;
      background-color: orange;
    }

    .main .match-center .match-news .news-right {
      flex: 1;
      overflow: hidden;
      padding: 0 15px;
    }

    .main .match-center .news-right .title {
      font-size: 24px;
      color: #333;
      padding-right: 80px;
    }

    .main .match-center .news-right .subtitle {
      padding-right: 160px;
      color: #666;
    }

    .main .match-center .news-right .news-list .item {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }

    .main .match-center .news-right .news-list .item .desc {
      flex: 1;
      padding-right: 50px;
    }

    .main .match-center .news-right .news-list .item .desc:hover {
      text-decoration: underline;
    }

    .main .match-center .news-right .news-list .item .date {
      font-size: 12px;
      color: #b8b9c5;
    }

    /* right-content */
    .main .section-content .right-content {
      width: 295px;
      height: 500px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="section-content">
      <div class="left-content">
        <div class="content-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title">内容中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>
          <div class="tab_control">
            <div class="item active">精品栏目</div>
            <div class="line"></div>
            <div class="item">赛事精品</div>
            <div class="line"></div>
            <div class="item">英雄攻略</div>
          </div>
          <div class="tab_keyword">
            <div class="item active">最新</div>
            <div class="item">马菠萝奇闻录</div>
            <div class="item">马菠萝奇</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
          </div>

          <div class="video_list">
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
          </div>

        </div>
        <div class="match-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title title-icon-match">赛事中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>
          <div class="tab_control">
            <div class="item item_wrap active">KPL</div>
            <div class="line"></div>
            <div class="item item_wrap">挑战者杯</div>
            <div class="line"></div>
            <div class="item item_wrap">K甲联赛</div>
            <div class="line"></div>
            <div class="item item_wrap">城市赛</div>
            <div class="line"></div>
            <div class="item item_wrap">高校联赛</div>
            <div class="line"></div>
            <div class="item item_wrap">TGA</div>
            <div class="line"></div>
            <div class="item item_wrap">微信游戏邀请赛</div>
            <div class="line"></div>
          </div>

          
          <div class="video_list">
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="right-content"></div>
    </div>
  </div>

</body>
</html>

17_(掌握)王者荣耀-main-赛事中心新闻展示

css 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀-main-news</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/video.css">
  <style>
    .main .section-content {
      display: flex;
      justify-content: space-between;
    }

    .main .section-content .left-content {
      width: 872px;
      height: 1000px;
    }

    .main .match-center .match-news {
      display: flex;
      height: 260px;
      margin: 20px 0 15px;
    }

    .main .match-center .match-news .news-left {
      width: 211px;
      background-color: orange;
    }

    .main .match-center .match-news .news-right {
      flex: 1;
      overflow: hidden;
      padding: 0 15px;
    }

    .main .match-center .news-right .title {
      font-size: 24px;
      color: #333;
      padding-right: 80px;
    }

    .main .match-center .news-right .subtitle {
      padding-right: 160px;
      color: #666;
    }

    .main .match-center .news-right .news-list .item {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }

    .main .match-center .news-right .news-list .item .desc {
      flex: 1;
      padding-right: 50px;
    }

    .main .match-center .news-right .news-list .item .desc:hover {
      text-decoration: underline;
    }

    .main .match-center .news-right .news-list .item .date {
      font-size: 12px;
      color: #b8b9c5;
    }

    /* right-content */
    .main .section-content .right-content {
      width: 295px;
      height: 500px;
    }
  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="section-content">
      <div class="left-content">
        <div class="content-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title">内容中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>
          <div class="tab_control">
            <div class="item active">精品栏目</div>
            <div class="line"></div>
            <div class="item">赛事精品</div>
            <div class="line"></div>
            <div class="item">英雄攻略</div>
          </div>
          <div class="tab_keyword">
            <div class="item active">最新</div>
            <div class="item">马菠萝奇闻录</div>
            <div class="item">马菠萝奇</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
            <div class="item">王者克纸轮</div>
            <div class="item">王者视角</div>
            <div class="item">峡谷460</div>
            <div class="item">百星王者带你非</div>
          </div>

          <div class="video_list">
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_01.png" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
          </div>

        </div>
        <div class="match-center">
          <div class="section_header">
            <div class="header_left">
              <h3 class="title title-icon-match">赛事中心</h3>
            </div>
            <div class="header_right" href="#">
              <a class="more" href="#">更多</a>
            </div>
          </div>
          <div class="tab_control">
            <div class="item item_wrap active">KPL</div>
            <div class="line"></div>
            <div class="item item_wrap">挑战者杯</div>
            <div class="line"></div>
            <div class="item item_wrap">K甲联赛</div>
            <div class="line"></div>
            <div class="item item_wrap">城市赛</div>
            <div class="line"></div>
            <div class="item item_wrap">高校联赛</div>
            <div class="line"></div>
            <div class="item item_wrap">TGA</div>
            <div class="line"></div>
            <div class="item item_wrap">微信游戏邀请赛</div>
            <div class="line"></div>
          </div>

          <div class="match-news">
            <a class="news-left" href="#">
              <img src="./img/match_01.jpg" alt="">
            </a>
            <div class="news-right">
              <div class="title nowrap_ellipsis">
                K甲季后赛回顾：镇江VTG、火豹会师总决赛，MD止步四强总决赛，MD止步四强
              </div>
              <div class="subtitle nowrap_ellipsis">
                2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
              </div>
              <ul class="news-list">
                <li class="item">
                  <span class="news_type_match">KPL</span>
                  <a class="desc nowrap_ellipsis" href="#">
                    2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
                  </a>
                  <span class="date">04-22</span>
                </li>
                <li class="item">
                  <span class="news_type_match">KPL</span>
                  <a class="desc nowrap_ellipsis" href="#">
                    2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
                  </a>
                  <span class="date">04-22</span>
                </li>
                <li class="item">
                  <span class="news_type_match">KPL</span>
                  <a class="desc nowrap_ellipsis" href="#">
                    2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
                  </a>
                  <span class="date">04-22</span>
                </li>
                <li class="item">
                  <span class="news_type_match">KPL</span>
                  <a class="desc nowrap_ellipsis" href="#">
                    2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
                  </a>
                  <span class="date">04-22</span>
                </li>
                <li class="item">
                  <span class="news_type_match">KPL</span>
                  <a class="desc nowrap_ellipsis" href="#">
                    2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
                  </a>
                  <span class="date">04-22</span>
                </li>
                <li class="item">
                  <span class="news_type_match">KPL</span>
                  <a class="desc nowrap_ellipsis" href="#">
                    2022年K甲春季赛季后赛为期一周的比赛已经全部结束了：新秀MD位居四强；老牌劲旅CW斩获季军，镇江VTG和火豹冲进总决赛。一起来回顾下本周的精彩比赛吧！
                  </a>
                  <span class="date">04-22</span>
                </li>
              </ul>
            </div>
          </div>
          
          <div class="video_list">
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
            <a class="video_item" href="#">
              <div class="album">
                <img src="./img/video_album_02.jpg" alt="">
                <div class="info">
                  <span class="count">471.6万</span>
                  <span class="date">2020-08-29</span>
                </div>
                <div class="cover">
                  <i class="icon_play"></i>
                </div>
              </div>
              <div class="desc">
                【狄仁杰封神榜】第82期 发生什么事了？全局例无虚发又双叒现峡谷ffdafadfda
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="right-content"></div>
    </div>
  </div>

</body>
</html>

总结：王者荣耀项目实战

一. 新闻区域

1.1. 轮播图展示

  • banner-list

  • title-list

1.2. 新闻区域背景图

1.3. 新闻内容展示

  • news-titles-list

  • notice 公告

  • news-list

    • 基本展示过程(没有前面图标)

    • 单独对图标进行封装

      • i封装

      • 伪元素封装

二. 入口区域

2.1. 四个等分/缩放的动画

三. 封装公共的class

3.1. section_header

3.2. tab_control

  • 等分

  • 包裹内容

3.3. tab_keyword

四. 视频列表

4.1. video_item进行封装

4.2. video_item遮盖层/动画

  • cover

    • icon

  • 动画

    • transition

    • animation

4.3. video_list列表展示

五. 赛事中心的新闻展示

5.1. 左侧图片

5.2. 右侧title/subtitle

5.3. 新闻的列表

相关推荐
崔庆才丨静觅5 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60616 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了6 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅6 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅6 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅7 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment7 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅7 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊7 小时前
jwt介绍
前端
爱敲代码的小鱼7 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示