当前位置： 首页 > article >正文

18.[前端开发]Day18-王者荣耀项目实战(一)

article 2025/2/6 3:48:28

01-06 项目实战

1 代码规范

2 CSS编写顺序

3 组件化开发思想

组件化开发思路

项目整体思路 – 各个击破

07_(掌握)王者荣耀-top-整体布局完成

完整代码

01_page_top1.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>王者荣耀-top</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .top {
      border: 1px solid #f5f5f5;
    }

    .top .area {
      display: flex;
      justify-content: space-between;
      /* align-items: normal; */
      height: 41px;
      line-height: 41px;
    }

    .top .left-area {
      display: flex;
    }
    
    .top .left-area .logo a {
      display: block;
      width: 150px;
      text-indent: -9999px;
      background: url(./img/top_logo.png) no-repeat center center;
    }

    .top .right-area {
      display: flex;
    }

    .top .right-area .item a {
      position: relative;
      display: block;
      font-size: 14px;
      color: #464646;
    }

    .top .right-area .item a.ranking {
      margin-left: 20px;
      padding-right: 30px;
    }

    .top .right-area .item a.ranking::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 30px;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;
      background: url(./img/top_sprite.png) no-repeat 0 0;
      
      opacity: 0.2;
      transform: rotate(90deg);
    }

    .top .right-area .item a.growth {
      padding-left: 30px;
    }

    .top .right-area .item a .icon-grow {
      position: absolute;
      width: 30px;
      height: 30px;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;
      background: url(./img/top_sprite.png) no-repeat -30px 0;
    }
  </style>
</head>
<body>
  
  <div class="top">
    <div class="top_wrapper area">
      <div class="left-area">
        <h2 class="logo">
          <a href="#">腾讯游戏</a>
        </h2>
        <div class="recommend">
          <img src="./img/recommend_game.jpg" alt="">
        </div>
      </div>
      <ul class="right-area">
        <li class="item">
          <a class="growth" href="#">
            <i class="icon-grow"></i>
            成长守护平台
          </a>
        </li>
        <li class="item">
          <a class="ranking" href="#">腾讯游戏排行榜</a>
        </li>
      </ul>
    </div>
  </div>

</body>
</html>

逐步细节

建议思路：先写html结构，再去写对应的CSS（效率高）

另一种思路：写好一个结构就去写对应的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>王者荣耀-top</title>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
   .top{
    height: 41px;
    border: 1px solid #f5f1f5;
   }
  </style>
</head>
<body>
  <div class="top"></div>
</body>
</html>

先做一个wrapper

<!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>王者荣耀-top</title>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
   .top{
    height: 41px;
    border: 1px solid #f5f1f5;
   }
   .wrapper{
    width: 980px;
    margin: 0 auto;/*把wrapper放中间*/
    height: 41px;
    background-color: orange;
   }
  </style>
</head>
<body>
  <div class="top">
    <div class="wrapper"></div>
  </div>
</body>
</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>王者荣耀-top</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
   .top{
    border: 1px solid #f5f1f5;
   }

   .top .area{
    height: 41px;
    background-color: orange;
   }
  </style>
</head>
<body>
  <div class="top">
    <div class="top_wrapper area"></div>
  </div>
</body>
</html>
/* common.css公共的样式 */

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


/* reset.css样式重置文件 */
/* margin/padding重置 */
body {
  padding: 0;
  margin: 0;
}

08_(掌握)王者荣耀-top-top-left展示实现

<!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>王者荣耀-top</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
   .top{
    border: 1px solid #f5f1f5;
   }

   .top .area{
    display: flex;
    justify-content: space-between;
    height: 41px;
    line-height: 41px;
    
   }
   .top .left-area{
    display: flex;
    
   }
   .top .right-area{
    background-color: rgb(0, 255, 217);
   }
   .top .left-area .logo a{
    display: block;
    width: 150px;
    text-indent: -9999px;/*隐藏a元素的文字 腾讯游戏*/
    background: url(./img/top_logo.png) no-repeat center center;
   }
  </style>
</head>
<body>
  <div class="top">
    <div class="top_wrapper area">
      <div class="left-area">
        <h2 class="logo">
          <a href="#">腾讯游戏</a>
        </h2>
        <div class="recommend">
          <img src="./img/recommend_game.jpg" alt="">
        </div>
      </div>
      <div class="right-area">2</div>
    </div>
  </div>
</body>
</html>

09_(掌握)王者荣耀-top-top-right展示实现

<!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>王者荣耀-top</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
   .top{
    border: 1px solid #f5f1f5;
   }

   .top .area{
    display: flex;
    justify-content: space-between;
    height: 41px;
    line-height: 41px;
    
   }
   .top .left-area{
    display: flex;
    
   }
   .top .left-area .logo a{
    display: block;
    width: 150px;
    text-indent: -9999px;/*隐藏a元素的文字 腾讯游戏*/
    background: url(./img/top_logo.png) no-repeat center center;
   }
   .top .right-area{
    display: flex;
    
   }
   .top .right-area .item a{
    position: relative;
    display: block;
    font-size:14px;
    color: #464646;
   }
   .top .right-area .item a.ranking{
    margin-left: 20px;
    padding-right: 30px;
   }
   .top .right-area .item a.ranking::after{
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    bottom: 0;
    right: 0;
    margin:auto 0;
    background: url(./img/top_sprite.png) no-repeat 0 0;
    
    opacity: 0.2;
    transform: rotate(90deg);

   }
   .top .right-area .item a.growth{
    padding-left: 30px;
   }
   .top .right-area .item a .icon-grow{
    position: absolute;
    width: 30px;
    height: 30px;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto 0;
    background: url(./img/top_sprite.png) no-repeat -30px 0;
   }

  </style>
</head>
<body>
  <div class="top">
    <div class="top_wrapper area">
      <div class="left-area">
        <h2 class="logo">
          <a href="#">腾讯游戏</a>
        </h2>
        <div class="recommend">
          <img src="./img/recommend_game.jpg" alt="">
        </div>
      </div>
        <ul class="right-area">
          <li class="item">
            <a class="growth" href="#">
              <i class="icon-grow"></i>
              成长守护平台
            </a>
          </li>
          <li class="item">
            <a class="ranking" href="#">腾讯游戏排行榜</a>
          </li>
        </ul>
    </div>
  </div>
</body>
</html>

10_(掌握)王者荣耀-header-整体布局实现

完整代码

<!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>王者荣耀-header</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .header {
      background-color: rgba(0,0,0,.8);
    }

    .header .area {
      display: flex;
      justify-content: space-between;
      height: 84px;
    }

    .header .left-area {
      display: flex;
    }

    .header .left-area .logo a {
      position: relative;
      top: 50%;
      transform: translate(0, -50%);
      display: block;
      width: 200px;
      height: 54px;
      text-indent: -9999px;
      background: url(./img/logo.png) no-repeat center center;
    }

    .header .left-area .nav-list {
      display: flex;
      margin-left: 30px;
    }

    .header .left-area .nav-list .item {
      width: 110px;
      padding-right: 5px;
    }

    .header .left-area .nav-list .item:hover,
    .header .left-area .nav-list .item.active {
      background: url(./img/main_sprite.png) no-repeat 0 0;
    }

    .header .left-area .nav-list .item a {
      display: block;
      height: 100%;
      box-sizing: border-box;
      padding-top: 20px;
      font-size: 18px;
      color: #c9c9dd;
      text-align: center;
    }
    
    .header .left-area .nav-list .item:hover a,
    .header .left-area .nav-list .item.active a {
      color: #e4b653;
    }

    .header .left-area .nav-list .item a .desc {
      display: block;
      margin-top: 8px;
      font-size: 12px;
      color: #858792;
    }
    
    .header .left-area .nav-list .item:hover .desc,
    .header .left-area .nav-list .item.active .desc {
      color: #91763f;
    }

    .header .left-area .search {
      margin-left: 10px;
    }

    .header .left-area .search a {
      position: relative;
      top: 50%;
      transform: translate(0, -50%);
      display: block;
      width: 27px;
      height: 26px;
      background: url(./img/nav_search.png);
    }

    .header .right-area {
      display: flex;
      align-items: center;
    }

    .header .right-area .image img {
      border: 1px solid #d9ad50;
      border-radius: 50%;
    }

    .header .right-area .info {
      margin-left: 12px;
    }

    .header .right-area .info a {
      color: #fff;
    }

    .header .right-area .info p {
      font-size: 14px;
      color: #858792;
      margin-top: 5px;
    }
  </style>
</head>
<body>
  
  <div class="header">
    <div class="area header_wrapper">
      <div class="left-area">
        <h1 class="logo">
          <a href="#">王者荣耀</a>
        </h1>
        <ul class="nav-list">
          <li class="item active">
            <a href="#">
              游戏资料
              <span class="desc">DATA</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              内容中心
              <span class="desc">CONTENTS</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              赛事中心
              <span class="desc">MATCH</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              百态王者
              <span class="desc">CULTURE</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              社区互动
              <span class="desc">COMMUNITY</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              玩家支持
              <span class="desc">PLAYER</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              IP新游
              <span class="desc">NEW GAMES</span>
            </a>
          </li>
        </ul>
        <div class="search">
          <a href="#"></a>
        </div>
      </div>
      <div class="right-area">
        <a class="image" href="#">
          <img src="./img/header_login.png" alt="">
        </a>
        <div class="info">
          <a href="#">欢迎登录</a>
          <p>登录后查看游戏战绩</p>
        </div>
      </div>
    </div>
  </div>

</body>
</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>王者荣耀-header</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .header {
      height: 84px;
      background-color: rgba(0,0,0,.8);
    }
    .header .area{
      display: flex;
      justify-content: space-between;
      height: 84px;
      line-height: 84px;
      background-color: orange;
    }
    .header .left-area{
      background-color: red;
    }
    .header .right-area{
      background-color: green;
    }


  </style>
</head>
<body>
  <div class="header">
    <div class="area header_wrapper">
      <div class="left-area">1</div>
      <div class="right-area">2</div>
    </div>
  </div>


</body>
</html>

11_(掌握)王者荣耀-header-logo展示实现

注意：网站的logo一半我们用h1包裹，来做网站搜索优化，并且h1里面包裹一个a，超链接。

<!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>王者荣耀-header</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .header {
      height: 84px;
      background-color: rgba(0,0,0,.8);
    }
    .header .area{
      display: flex;
      justify-content: space-between;
      height: 84px;
      
    }
    
    .header .left-area{
      display: flex;
    }
    .header .left-area .logo a{
      position: relative;
      top:50%;
      transform: translate(0,-50%);
      display: flex;
      width: 200px;
      height: 54px;
      text-indent: -9999px;
      background:url(./img/logo.png) no-repeat center center;
    }
    .header .left-area .nav-list{
      display: flex;
      margin-left: 25px;
    }
    .header .left-area .nav-list .item{
      width: 110px;
      margin-right: 5px;     
    }
    .header .left-area .nav-list a{
      display: block;
      height: 100%;
      box-sizing: border-box;
      padding-top: 20px;
      font-size: 18px;
      color: #c9c9dd;
      text-align: center;
    }
    .header .left-area .nav-list a .desc{
      display: block;
      margin-top: 8px;
      font-size: 12px;
      color: #858792;
    }
    .header .left-area .nav-list .item:hover,
    .header .left-area .nav-list .item.active{
      background: url(./img/main_sprite.png) no-repeat 0 0;

    }
    .header .left-area .nav-list .item:hover a,
    .header .left-area .nav-list .item.active a{
      color: #e4b653;

    }
    
    .header .left-area .nav-list .item:hover .desc,
    .header .left-area .nav-list .item.active .desc{
      color: #91763f;
    }

    .header .right-area{
      background-color: green;
    }

  </style>
</head>
<body>
  <div class="header">
    <div class="area header_wrapper">
      <div class="left-area">
        <h1 class="logo">
          <a href="#">王者荣耀</a>
        </h1>
        <ul class="nav-list">
          <li class="item active">
            <a href="#">
              游戏资料
              <span class="desc">DATA</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              内容中心
              <span class="desc">CONTENTS</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              赛事中心
              <span class="desc">MATCH</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              百态王者
              <span class="desc">CULTURE</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              社区互动
              <span class="desc">COMMUNITY</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              玩家支持
              <span class="desc">PLAYER</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              IP新游
              <span class="desc">NEW GAMES</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="right-area">2</div>
    </div>
  </div>


</body>
</html>

12_(掌握)王者荣耀-header-导航展示实现

<!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>王者荣耀-header</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .header {
      height: 84px;
      background-color: rgba(0,0,0,.8);
    }
    .header .area{
      display: flex;
      justify-content: space-between;
      height: 84px;
      
    }
    
    .header .left-area{
      display: flex;
    }
    .header .left-area .logo a{
      position: relative;
      top:50%;
      transform: translate(0,-50%);
      display: flex;
      width: 200px;
      height: 54px;
      text-indent: -9999px;
      background:url(./img/logo.png) no-repeat center center;
    }
    .header .left-area .nav-list{
      display: flex;
      margin-left: 25px;
    }
    .header .left-area .nav-list .item{
      width: 110px;
      padding-right: 5px;     
    }
    .header .left-area .nav-list a{
      display: block;
      height: 100%;
      box-sizing: border-box;
      padding-top: 20px;
      font-size: 18px;
      color: #c9c9dd;
      text-align: center;
    }
    .header .left-area .nav-list a .desc{
      display: block;
      margin-top: 8px;
      font-size: 12px;
      color: #858792;
    }
    .header .left-area .nav-list .item:hover,
    .header .left-area .nav-list .item.active{
      background: url(./img/main_sprite.png) no-repeat 0 0;

    }
    .header .left-area .nav-list .item:hover a,
    .header .left-area .nav-list .item.active a{
      color: #e4b653;

    }
    
    .header .left-area .nav-list .item:hover .desc,
    .header .left-area .nav-list .item.active .desc{
      color: #91763f;
    }

    .header .right-area{
      background-color: green;
    }

  </style>
</head>
<body>
  <div class="header">
    <div class="area header_wrapper">
      <div class="left-area">
        <h1 class="logo">
          <a href="#">王者荣耀</a>
        </h1>
        <ul class="nav-list">
          <li class="item active">
            <a href="#">
              游戏资料
              <span class="desc">DATA</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              内容中心
              <span class="desc">CONTENTS</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              赛事中心
              <span class="desc">MATCH</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              百态王者
              <span class="desc">CULTURE</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              社区互动
              <span class="desc">COMMUNITY</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              玩家支持
              <span class="desc">PLAYER</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              IP新游
              <span class="desc">NEW GAMES</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="right-area">2</div>
    </div>
  </div>


</body>
</html>

13_(掌握)王者荣耀-header-搜索和登录展示实现

<!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>王者荣耀-header</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .header {
      height: 84px;
      background-color: rgba(0,0,0,.8);
    }
    .header .area{
      display: flex;
      justify-content: space-between;
      height: 84px;
      
    }
    
    .header .left-area{
      display: flex;
    }
    .header .left-area .logo a{
      position: relative;
      top:50%;
      transform: translate(0,-50%);
      display: flex;
      width: 200px;
      height: 54px;
      text-indent: -9999px;
      background:url(./img/logo.png) no-repeat center center;
    }
    .header .left-area .nav-list{
      display: flex;
      margin-left: 25px;
    }
    .header .left-area .nav-list .item{
      width: 110px;
      padding-right: 5px;     
    }
    .header .left-area .nav-list a{
      display: block;
      height: 100%;
      box-sizing: border-box;
      padding-top: 20px;
      font-size: 18px;
      color: #c9c9dd;
      text-align: center;
    }
    .header .left-area .nav-list a .desc{
      display: block;
      margin-top: 8px;
      font-size: 12px;
      color: #858792;
    }
    .header .left-area .nav-list .item:hover,
    .header .left-area .nav-list .item.active{
      background: url(./img/main_sprite.png) no-repeat 0 0;

    }
    .header .left-area .nav-list .item:hover a,
    .header .left-area .nav-list .item.active a{
      color: #e4b653;

    }
    
    .header .left-area .nav-list .item:hover .desc,
    .header .left-area .nav-list .item.active .desc{
      color: #91763f;
    }
    .header .left-area .search{
      margin-left: 10px;
    }
    .header .left-area .search a{
      position: relative;
      top:50%;
      transform: translate(0,-50%);
      display: block;
      width: 27px;
      height: 26px;
      background: url(./img/nav_search.png);
    }

    .header .right-area{
      display: flex;
      align-items: center;
    }
    .header .right-area .image img{
      border:1px solid #d9ad50;
      border-radius: 50%;
    }
    .header .right-area .info{
      margin-left: 12px;
    }
    .header .right-area .info a{
      color: #fff;
    }
    .header .right-area .info p{
      font-size: 14px;
      color: #858792;
      math-depth: 5px;
    }

  </style>
</head>
<body>
  <div class="header">
    <div class="area header_wrapper">
      <div class="left-area">
        <h1 class="logo">
          <a href="#">王者荣耀</a>
        </h1>
        <ul class="nav-list">
          <li class="item active">
            <a href="#">
              游戏资料
              <span class="desc">DATA</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              内容中心
              <span class="desc">CONTENTS</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              赛事中心
              <span class="desc">MATCH</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              百态王者
              <span class="desc">CULTURE</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              社区互动
              <span class="desc">COMMUNITY</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              玩家支持
              <span class="desc">PLAYER</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              IP新游
              <span class="desc">NEW GAMES</span>
            </a>
          </li>
        </ul>
        <div class="search">
          <a href="#"></a>
        </div>
      </div>
      <div class="right-area">
        <a class="image" href="#">
          <img src="./img/header_login.png" alt="">
        </a>
        <div class="info">
          <a href="#">欢迎登陆</a>
          <p>登陆后查看游戏战绩</p>
        </div>
      </div>
    </div>
  </div>


</body>
</html>

14_(掌握)王者荣耀-main-news区域整体布局

完整代码

<!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: orange;
    }

    .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"></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>

逐步细节

建议这样做：两边给一个固定的宽度，中间给一个flex 1让中间新闻的宽度是弹性的

<!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: #0f0;
    }
    .news-section .news{
      flex: 1;
      background-color: purple;
    }
    .news-section .download{
      width: 236px;
      background-color: skyblue;
    }

  </style>
</head>
<body>
  
  <div class="main main_wrapper">
    <div class="news-section">
      <div class="banner"></div>
      <div class="news"></div>
      <div class="download"></div>
    </div>
    <div class="content-section"></div>
    <div class="match-section"></div>
  </div>

</body>
</html>

15_(掌握)王者荣耀-main-news下载区域实现

<!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: #0f0;
    }
    .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"></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>

总结：内容回顾

一. vertical-align(了解)

1.1. vertical-align其他值

  • 给行内级元素设置

  • middle

    • 基线+x高度的一半

1.2. 行内块级元素其他现象

二. CSS整体内容回顾

三. 项目实战

3.1. 代码规范(重要)

3.2. CSS编写顺序

  • 定位/浮动/flex

  • display/visibility

  • box model

  • 文本/文字

  • background

  • 其他

四. 王者荣耀

4.1. top区域

4.2. header区域

4.3. main-news区域(正在进行ing)

练习

自己往后做(王者荣耀)

  • news(必须做)

    • banner

    • news-list


http://www.kler.cn/a/533184.html

相关文章：

  • VMware Workstation Pro安装了Ubuntu 24.04实现与Windows10之间的复制粘贴
  • Nacos 的介绍和使用
  • DeepSeek 阐述 2025年前端发展趋势
  • 基于微信小程序的私家车位共享系统设计与实现（LW+源码+讲解）
  • 走向基于大语言模型的新一代推荐系统：综述与展望
  • 机器学习10
  • Scheme语言的正则表达式
  • 传输层协议——TCP协议
  • LeetCode 0922.按奇偶排序数组 II：O(1)空间复杂度-一次遍历双指针
  • 青少年编程与数学 02-008 Pyhon语言编程基础 19课题、外部模块
  • 【数据采集】基于Selenium采集豆瓣电影Top250的详细数据
  • 【Day29 LeetCode】动态规划DP
  • Rust中变量【引用】与【借用】规则
  • Markdown转换器中间件
  • AI协助探索AI新构型自动化创新的技术实现
  • 【现代深度学习技术】深度学习计算 | 延后初始化自定义层
  • 决策规划概述
  • C# 数组、索引器与集合介绍
  • 面向智慧农业的物联网监测系统设计（论文+源码+实物）
  • [LeetCode] 栈与队列 I — 232#用栈实现队列 | 225#用队列实现栈 | 20#有效的括号 | 1047#删除字符串中的所有相邻重复项
  • ES6-rest参数、数组扩展中的扩展运算符
  • CPU、MCU、MPU、SOC、DSP、ECU、GPU、FPGA傻傻分不清楚？一文讲清它们的区别
  • （十一）机器人系统的仿真——建造机器人模型
  • 4. k8s二进制集群之ETCD集群证书生成
  • Vue.js组件开发-实现右下角浮动层可以最大化最小化效果
  • RGB565转BITMAP[C#---2]