仿DNF官网页面(一看就会,适合刚学习Html、CSS、JS的小伙伴)

又菜有爱写

已于 2023-04-18 10:04:11 修改

阅读量704

点赞数 3

分类专栏：网页设计与制作 html静态页面文章标签： css html javascript

于 2023-04-14 20:47:47 首次发布

本文链接：https://blog.csdn.net/m0_54430913/article/details/130161403

版权

网页设计与制作同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html静态页面

3 篇文章 0 订阅

订阅专栏

项目内容:

1.模仿DNF官网的进入界面和主页面

项目支持技术:

1.HTML+CSS+JS

2.轮播图Swiper(Swiper中文网-轮播图幻灯片js插件,H5页面前端开发)

项目结构:

项目代码:

(1)index.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">
    <link rel="shortcut icon" href="./images/logo2.png" type="image/x-icon">
    
    <title>地下城与勇士：创新世纪-DNF-官方网站-腾讯游戏-格斗网游王者之作,500万同时在线</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="top">
      <div class="top_left">
        <a href="#">
          <img src="./images/TG_logo.jpg" alt="">
        </a>
        
        <a href="#">
          <img src="./images/kpcy.jpg" alt="">
        </a>
      </div>
      <div class="top_right">
        <a href="">游戏下载</a>
        <span>|</span>
        <a href="">充值点券</a>
        <span>|</span>
        <a href="">开通黑钻</a>
        <span>|</span>
        <a href=""><img src="./images/小图标/向右1.png" class="icon">返回官网首页</a>
        </ul>
      </div>
    </div>
   <div class="middle">
        <a href="./main.html" class="logo">
          <img src="./images/logo.png" alt="">
        </a>
        <a href="./main.html" class="xianqing"></a>
        <video src="./video/ximan.mp4" muted controls autoplay></video>
        <div class="xuanxiang">
          <ul>
            <li><a href="./main.html"><img src="./images/小图标/电脑 .png" class="icon">进入官网</a></li>
            <li><a href=""><img src="./images/小图标/高速下载.png" class="icon">全新高速下载器</a></li>
            <li><a href=""><img src="./images/小图标/下载.png" class="icon">其他方式下载</a></li>
            <li><a href=""><img src="./images/小图标/收藏.png" class="icon">活动中心</a></li>
          </ul>
        </div>
   </div>
    <div class="end">
      <img src="./images/endlogo.jpg" alt="">
      <span class="fenge">|</span>
      <div class="wenzi">
       <a href="">腾讯互动娱乐</a>
          <span>|</span>
        <a href="">服务条款</a>
          <span>|</span>
        <a href="">隐私保护指引</a>
          <span>|</span>
        <a href="">儿童隐私保护指引</a>
          <span>|</span>
         <a href="">腾讯游戏招聘</a>
          <span>|</span>
        <a href="">腾讯游戏客服</a>
          <span>|</span>
        <a href="">游戏列表</a>
          <span>|</span>
        <a href="">广告服务及上午合作</a>
          <span>|</span>
        <p><a href="">腾讯公司版权所有 网络游戏行业防沉迷自律公约</a></p>
        <p><a href="">抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活</a></p>
        <p><a href="">时间:2023年1月15日</a></p>
        <p><a href="">作者:又菜有爱写</a></p>
      </div>
    </div>
   
</body>
</html>

(2)main.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 user-scalable=no">
  <title>地下城与勇士：创新世纪-DNF-官方网站-腾讯游戏-格斗网游王者之作,500万同时在线</title>
  <link rel="stylesheet" href="./css/swiper-bundle.min.css">
  <link rel="shortcut icon" href="./images/logo2.png" type="image/x-icon">
  <link rel="stylesheet" href="./css/main.css">
</head>

<body>
  <!-- 头部 -->
  <div class="top">
    <div class="top_left">
      <a href="#">
        <img src="./images/TG_logo.jpg" alt="">
      </a>

      <a href="#">
        <img src="./images/kpcy.jpg" alt="">
      </a>
    </div>
    <div class="top_right">
      <a href="">游戏下载</a>
      <span>|</span>
      <a href="">充值点券</a>
      <span>|</span>
      <a href="">开通黑钻</a>
      <span>|</span>
      <a href="./index.html"><img src="./images/小图标/向右1.png" class="icon">返回官网首页</a>
      </ul>
    </div>
  </div>

  <!-- 导航部分 -->
  <div class="nav">
    <a href="./main.html"><img src="./images/logo.png" alt="" class="nav_logo"></a>
    <ul class="nav_ul">
      <li><a href="#">宇宙站</a> </li>
      <li><a href="#">游戏资料</a> </li>
      <li><a href="#">活动</a></li>
      <li><a href="#">赛事</a></li>
      <li><a href="#">服务/商城</a></li>
      <li><a href="#">游戏安全</a></li>
      <li><a href="#">玩家社区</a></li>
    </ul>
    <div class="nav_middle">
      <ul class="yzz ">
        <li><a href="#">编年史大事记</a></li>
        <li><a href="#">世界</a></li>
        <li><a href="#">职业</a></li>
        <li><a href="#">使徒</a></li>
        <li><a href="#">动画与漫画</a></li>
      </ul>
      <ul class="yxzz ">
        <li><a href="#">新闻公告</a></li>
        <li><a href="#">版本专题</a></li>
        <li><a href="#">职业攻略</a></li>
        <li><a href="#">壁纸时装</a></li>
        <li><a href="#">视频中心</a></li>
      </ul>
      <ul class="hd">
        <li><a href="#">官方活动</a></li>
        <li><a href="#">合作活动</a></li>
        <li><a href="#">网吧特权</a></li>
        <li><a href="#">玩家共创</a></li>
        <li><a href="#">口令系统</a></li>
        <li><a href="#">手机绑定领福利</a></li>
      </ul>
      <ul class="ss">
        <li><a href="#">F1天王赛</a></li>
        <li><a href="#">闪光杯</a></li>
        <li><a href="#">职业联赛</a></li>
        <li><a href="#">全国格斗大赛</a></li>
      </ul>
      <ul class="fw">
        <li><a href="#">充值</a></li>
        <li><a href="#">云游专区</a></li>
        <li><a href="#">角色恢复</a></li>
        <li><a href="#">圣耀服务</a></li>
        <li><a href="#">体验服</a></li>
        <li><a href="#">周边商城</a></li>
        <li><a href="#">道聚城</a></li>
      </ul>
      <ul class="ysaq">
        <li><a href="#">PK场公约</a></li>
        <li><a href="#">处罚申诉</a></li>
        <li><a href="#">视频举报</a></li>
        <li><a href="#">被盗找回</a></li>
        <li><a href="#">荣誉点数</a></li>
      </ul>
      <ul class="wjsq">
        <li><a href="#">论坛</a></li>
        <li><a href="#">微博</a></li>
        <li><a href="#">问答</a></li>
        <li><a href="#">DNF助手</a></li>
        <li><a href="#">微信</a></li>
      </ul>
    </div>
  </div>

  <!-- 主体部分 -->
  <div class="main">
    <ul class="main_1">
      <li class="left"><a href="">
          <img src="./images/xz.jpg" alt="">
        </a></li>
      <li class="middle-1 middle">
        <div class="mask">
          <h2>2023新春礼包</h2>
          <h3>三觉外观震撼降临</h3>
          <a href="">
            <h4>查看
              <img src="./images/小图标/向右3.png" alt="">
            </h4>
          </a>
        </div>
      </li>
      <li class="middle-2 middle"><a href="">
          <div class="swiper mySwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="./images/克伦特送福利.jpg" alt=""></div>
              <div class="swiper-slide"><img src="./images/帝国实验日志.jpg" alt=""></div>
              <div class="swiper-slide"><img src="./images/完美成长契约.jpeg" alt=""></div>
              <div class="swiper-slide"><img src="./images/采矿兑好礼.jpeg" alt=""></div>
              <div class="swiper-slide"><img src="./images/两元一抽.jpeg" alt=""></div>
              <div class="swiper-slide"><img src="./images/累计在线.jpeg" alt=""></div>
            </div>
            <div class="swiper-pagination"></div>
          </div>
        </a></li>
      <li>
        <div id="right">
          <div class="right_dh">
            <ul>
              <li>综合</li>
              <li>公告</li>
              <li>活动</li>
              <li>社区</li>
              <li>赛事</li>
            </ul>
          </div>

          <div class="right_nr">
            <div>
              <h3>巴卡尔版本来袭</h3>
              <table cellspacing="22">
                <tr>
                  <td class="gg">公告</td>
                  <td>关于新版本的上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="gg">公告</td>
                  <td>关于新年版本礼包上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>充值活动送会员的等礼物</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>关于新版本的上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>关于增幅礼包上线</td>
                  <td>01/19</td>
                </tr>
              </table>
              <button class="checkmore">查看更多咨询<img src="./images/小图标/搜索.png" alt=""></button>

            </div>
            <div style="display: none;">
              <h3>关于版本末期国服摆烂的公告</h3>
              <table cellspacing="22">
                <tr>
                  <td class="gg">公告</td>
                  <td>关于新版本的上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="gg">公告</td>
                  <td>关于新年版本礼包上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>充值活动送会员的等礼物</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>关于新版本的上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>关于增幅礼包上线</td>
                  <td>01/19</td>
                </tr>
              </table>
              <button class="checkmore">查看更多咨询<img src="./images/小图标/搜索.png" alt=""></button>
            </div>
            <div style="display: none;">
              <h3>蚊子腿奖励活动</h3>
              <table cellspacing="22">
                <tr>
                  <td class="gg">公告</td>
                  <td>关于新版本的上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="gg">公告</td>
                  <td>关于新年版本礼包上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>充值活动送会员的等礼物</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>关于新版本的上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>关于增幅礼包上线</td>
                  <td>01/19</td>
                </tr>
              </table>
              <button class="checkmore">查看更多咨询<img src="./images/小图标/搜索.png" alt=""></button>
            </div>
            <div style="display: none;">
              <h3>众大主播狂喷策划</h3>
              <table cellspacing="22">
                <tr>
                  <td class="gg">公告</td>
                  <td>关于新版本的上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="gg">公告</td>
                  <td>关于新年版本礼包上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>充值活动送会员的等礼物</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>关于新版本的上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>关于增幅礼包上线</td>
                  <td>01/19</td>
                </tr>
              </table>
              <button class="checkmore">查看更多咨询<img src="./images/小图标/搜索.png" alt=""></button>
            </div>
            <div style="display: none;">
              <h3>旭旭宝宝、一阵雨、大硕大型军团比赛</h3>
              <table cellspacing="22">
                <tr>
                  <td class="gg">公告</td>
                  <td>关于新版本的上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="gg">公告</td>
                  <td>关于新年版本礼包上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>充值活动送会员的等礼物</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>关于新版本的上线公告</td>
                  <td>01/19</td>
                </tr>
                <tr>
                  <td class="hd">活动</td>
                  <td>关于增幅礼包上线</td>
                  <td>01/19</td>
                </tr>
              </table>
              <button class="checkmore">查看更多咨询<img src="./images/小图标/搜索.png" alt=""></button>
            </div>

          </div>
        </div>
      </li>
    </ul>

    <ul class="main_2">
      <li class="main2_left">
        <div class="ksrk">
          <p class="p1">快速入口</p>
          <div class="ksrk_up">
            <div><a href="#"><img src="./images/小图标/钥匙.png" alt=""><br><span>CDK兑换</span></a></div>
            <div><a href="#"><img src="./images/小图标/钻石.png" alt=""><br><span>黑钻</span></a></div>
            <div><a href="#"><img src="./images/小图标/24gf-headset.png" alt=""><br><span>联系客服</span></a></div>
            <div><a href="#"><img src="./images/小图标/盾牌-01.png" alt=""><br><span>PK场公约</span></a></div>
            <div><a href="#"><img src="./images/小图标/购物袋.png" alt=""><br><span>周边商城</span></a></div>
            <div><a href="#"><img src="./images/小图标/箱子.png" alt=""><br><span>积分兑换</span></a></div>
          </div>

          <p class="p2">玩家社区</p>
          <div class="wjsq">
            <div><a href="#"><img src="./images/小图标/钥匙.png" alt=""><br><span>论坛交流</span></a></div>
            <div><a href="#"><img src="./images/小图标/钻石.png" alt=""><br><span>关注微信</span></a></div>
            <div><a href="#"><img src="./images/小图标/24gf-headset.png" alt=""><br><span>点亮图标</span></a></div>
            <div><a href="#"><img src="./images/小图标/盾牌-01.png" alt=""><br><span>DNF电台</span></a></div>
            <div><a href="#"><img src="./images/小图标/购物袋.png" alt=""><br><span>玩家共创</span></a></div>
            <div><a href="#"><img src="./images/小图标/箱子.png" alt=""><br><span>心悦专区</span></a></div>

          </div>

        </div>
      </li>
      <li class="main2_middle">
        <div class="hdzx_title">
          <span>活动中心</span>
          <div class="hdzx_title_right">
            <ul>
              <li>心悦</li>
              <li>活动中心</li>
            </ul>
          </div>
        </div>
        <div class="hdzx_nr">
          <div class="nr_nav">
            <div>热门推荐</div>
            <div>新手升级</div>
            <div>周常地下城</div>
            <div>商城特惠</div>
            <div>合作活动</div>
          </div>
          <div class="nr_nr">
            <div>
              <table>
                <tr>
                  <td>活动名称</td>
                  <td>主要奖励</td>
                  <td>结束时间</td>
                  <td></td>
                </tr>
                <tr>
                  <td>神秘封印礼盒大回馈</td>
                  <td><img src="./images/福利1.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>赛利亚的特殊商店</td>
                  <td><img src="./images/福利2.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>闯机要赢补给</td>
                  <td><img src="./images/福利3.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
              </table>
            </div>
            <div style="display: none;">
              <table>
                <tr>
                  <td>活动名称</td>
                  <td>主要奖励</td>
                  <td>结束时间</td>
                  <td></td>
                </tr>
                <tr>
                  <td>新手豪华礼包</td>
                  <td><img src="./images/福利四.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>升级礼包2</td>
                  <td><img src="./images/福利5.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>升级礼包3</td>
                  <td><img src="./images/福利1.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
              </table>
            </div>
            <div style="display: none;">
              <table>
                <tr>
                  <td>活动名称</td>
                  <td>主要奖励</td>
                  <td>结束时间</td>
                  <td></td>
                </tr>
                <tr>
                  <td>贵族机要</td>
                  <td><img src="./images/福利四.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>寂静城</td>
                  <td><img src="./images/福利5.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>机械七战神</td>
                  <td><img src="./images/福利1.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
              </table>
            </div>
            <div style="display: none;">
              <table>
                <tr>
                  <td>活动名称</td>
                  <td>主要奖励</td>
                  <td>结束时间</td>
                  <td></td>
                </tr>
                <tr>
                  <td>角色手办</td>
                  <td><img src="./images/福利1.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>服装特卖</td>
                  <td><img src="./images/福利5.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>黑钻专属</td>
                  <td><img src="./images/福利3.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
              </table>
            </div>
            <div style="display: none;">
              <table>
                <tr>
                  <td>活动名称</td>
                  <td>主要奖励</td>
                  <td>结束时间</td>
                  <td></td>
                </tr>
                <tr>
                  <td>恶魔联动</td>
                  <td><img src="./images/福利3.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>童年回忆</td>
                  <td><img src="./images/福利2.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>未来规划</td>
                  <td><img src="./images/福利1.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </li>
      <li class="main2_right">
        <div class="gg_title">
          <span>热门活动</span>
        </div>
        <div class="gg_nr">
          <img src="./images/活动1.jpg" alt="">
          <img src="./images/活动2.jpg" alt="">
        </div>
      </li>
    </ul>

    <ul class="main_3">
      <li class="main3_left">
        <div class="ksrk">
          <p class="p1">快速入口</p>
          <div class="ksrk_up">
            <div><a href="#"><img src="./images/小图标/钥匙.png" alt=""><br><span>CDK兑换</span></a></div>
            <div><a href="#"><img src="./images/小图标/钻石.png" alt=""><br><span>黑钻</span></a></div>
            <div><a href="#"><img src="./images/小图标/24gf-headset.png" alt=""><br><span>联系客服</span></a></div>
            <div><a href="#"><img src="./images/小图标/盾牌-01.png" alt=""><br><span>PK场公约</span></a></div>
            <div><a href="#"><img src="./images/小图标/购物袋.png" alt=""><br><span>周边商城</span></a></div>
            <div><a href="#"><img src="./images/小图标/箱子.png" alt=""><br><span>积分兑换</span></a></div>
          </div>

          <p class="p2">玩家社区</p>
          <div class="wjsq">
            <div><a href="#"><img src="./images/小图标/钥匙.png" alt=""><br><span>论坛交流</span></a></div>
            <div><a href="#"><img src="./images/小图标/钻石.png" alt=""><br><span>关注微信</span></a></div>
            <div><a href="#"><img src="./images/小图标/24gf-headset.png" alt=""><br><span>点亮图标</span></a></div>
            <div><a href="#"><img src="./images/小图标/盾牌-01.png" alt=""><br><span>DNF电台</span></a></div>
            <div><a href="#"><img src="./images/小图标/购物袋.png" alt=""><br><span>玩家共创</span></a></div>
            <div><a href="#"><img src="./images/小图标/箱子.png" alt=""><br><span>心悦专区</span></a></div>

          </div>
      </li>
      <li class="main3_middle">
        <div class="hdzx_title">
          <span>活动中心</span>
          <div class="hdzx_title_right">
            <ul>
              <li>心悦</li>
              <li>活动中心</li>
            </ul>
          </div>
        </div>
        <div class="hdzx_nr">
          <div class="nr_nav2">
            <div>热门推荐</div>
            <div>新手升级</div>
            <div>周常地下城</div>
            <div>商城特惠</div>
            <div>合作活动</div>
          </div>
          <div class="nr_nr2">
            <div>
              <table>
                <tr>
                  <td>活动名称</td>
                  <td>主要奖励</td>
                  <td>结束时间</td>
                  <td></td>
                </tr>
                <tr>
                  <td>神秘封印礼盒大回馈</td>
                  <td><img src="./images/福利1.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>赛利亚的特殊商店</td>
                  <td><img src="./images/福利2.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>闯机要赢补给</td>
                  <td><img src="./images/福利3.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
              </table>
            </div>
            <div style="display: none;">
              <table>
                <tr>
                  <td>活动名称</td>
                  <td>主要奖励</td>
                  <td>结束时间</td>
                  <td></td>
                </tr>
                <tr>
                  <td>新手豪华礼包</td>
                  <td><img src="./images/福利四.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>升级礼包2</td>
                  <td><img src="./images/福利5.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>升级礼包3</td>
                  <td><img src="./images/福利1.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
              </table>
            </div>
            <div style="display: none;">
              <table>
                <tr>
                  <td>活动名称</td>
                  <td>主要奖励</td>
                  <td>结束时间</td>
                  <td></td>
                </tr>
                <tr>
                  <td>贵族机要</td>
                  <td><img src="./images/福利四.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>寂静城</td>
                  <td><img src="./images/福利5.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>机械七战神</td>
                  <td><img src="./images/福利1.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
              </table>
            </div>
            <div style="display: none;">
              <table>
                <tr>
                  <td>活动名称</td>
                  <td>主要奖励</td>
                  <td>结束时间</td>
                  <td></td>
                </tr>
                <tr>
                  <td>角色手办</td>
                  <td><img src="./images/福利1.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>服装特卖</td>
                  <td><img src="./images/福利5.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>黑钻专属</td>
                  <td><img src="./images/福利3.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
              </table>
            </div>
            <div style="display: none;">
              <table>
                <tr>
                  <td>活动名称</td>
                  <td>主要奖励</td>
                  <td>结束时间</td>
                  <td></td>
                </tr>
                <tr>
                  <td>恶魔联动</td>
                  <td><img src="./images/福利3.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>童年回忆</td>
                  <td><img src="./images/福利2.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
                <tr>
                  <td>未来规划</td>
                  <td><img src="./images/福利1.jpg" alt=""></td>
                  <td>6天后结束</td>
                  <td><button>查看</button></td>
                </tr>
              </table>
            </div>
          </div>
      </li>
      <li class="main3_right">
        <div class="gg_title">
          <span>热门活动</span>
        </div>
        <div class="gg_nr">
          <img src="./images/活动1.jpg" alt="">
          <img src="./images/活动2.jpg" alt="">
        </div>
      </li>
    </ul>

    <ul class="main_4">
      <li class="li_123">
        <div class="li_1">
          <div>
            <h5>DNF宇宙</h5>
            <p>探索冒险史诗</p>
          </div>
        </div>
        <div class="li_2">
          <div>
            <h5>DNF漫画站</h5>
            <p>剧情漫画</p>
          </div>
        </div>
        <div class="li_3">
          <div>
            <h5>官方动画第二季</h5>
            <p>已完结</p>
          </div>
        </div>
      </li>
      <li class="li_ly">
        <img src="./images/结尾.jpg" alt="">
      </li>

    </ul>

  </div>

  <!-- 结尾部分 -->
  <div class="end"> <img src="./images/endlogo.jpg" alt="">
    <span class="fenge">|</span>
    <div class="wenzi">
      <a href="">腾讯互动娱乐</a>
      <span>|</span>
      <a href="">服务条款</a>
      <span>|</span>
      <a href="">隐私保护指引</a>
      <span>|</span>
      <a href="">儿童隐私保护指引</a>
      <span>|</span>
      <a href="">腾讯游戏招聘</a>
      <span>|</span>
      <a href="">腾讯游戏客服</a>
      <span>|</span>
      <a href="">游戏列表</a>
      <span>|</span>
      <a href="">广告服务及上午合作</a>
      <span>|</span>
      <p><a href="">腾讯公司版权所有 网络游戏行业防沉迷自律公约</a></p>
      <p><a href="">抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活</a></p>
      <p><a href="">时间:2023年1月15日</a></p>
      <p><a href="">作者:又菜有爱写</a></p>
    </div>
  </div>

  <script src="./js/swiper-bundle.min.js"></script>
  <script>
    var swiper = new Swiper(".mySwiper", {
      autoplay: true,
      interval: 1000,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  </script>

  <script src="./js/main.js"></script>

</body>

</html>

(3)index.css

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    font-family:"微软雅黑","宋体";
  }
.icon{
    vertical-align: middle;
}
/* 头部 */
.top{
    width: 2196px;
    height: 50px;
    background-color: white;
    margin: 0 auto;
}

.top .top_left{
    height: 50px;
    float: left;
    text-align: center;
}
.top .top_left:nth-child(1){
    margin-left: 600px;
    line-height: 50px;
}
.top_right{
    float:left;
    margin-left: 600px;
}
.top_right a {
    line-height: 50px;
    color: black;
}
.top_right a:hover{
    color:blue;
}
.top_right span{
    color: #d3d3d4;
}
.top_right a:last-child{
    border: 1px solid #c3c2c8;
}
.top_right .icon{
    width: 15px;
    height: 15px;
   
}


/* 中间 */
.middle{
    float: left;
    width: 2196px;
    height: 890px;
    background: url(../images/index-bg.jpeg);
    
}
.middle .logo{
      float: left;
      margin-top: 80px;
      margin-left: 120px;
}
.middle .logo img{
    width: 450px;
    height: 200px;
   
}

.middle video{
    float: left;
    margin-top: 100px;
    margin-left: 800px;
    width: 500px;
    height: 250px;
    background-color: black;
}
.middle .xianqing {
    float: left;
    width: 250px;
    height: 100px;
    margin-left: 400px;
    margin-top: 300px;

}
.middle .xuanxiang{
    display: inline-block;
    text-decoration: none;
    margin-top: 475px;
}
.middle .xuanxiang ul {
    list-style: none;
     float: left;
     margin-top: 25px;
     
}
.middle .xuanxiang ul li{
    width:190px ;
    height: 62.5px;
    line-height: 62.5px;
    text-align: center;
}
.middle .xuanxiang ul li:nth-child(1){
    background-color: #991400;
}
.middle .xuanxiang ul li:nth-child(2){
    background-color: #414659;
}
.middle .xuanxiang ul li:nth-child(3){
    background-color: #4f525e;
}
.middle .xuanxiang ul li:nth-child(4){
    background-color: #464a51;
}
.middle .xuanxiang ul li a{
    font-size: 15px;
    color: #ffff;
    line-height: 62.5px;
    text-align: center;
}
.middle .xuanxiang ul li img{
    width: 25px;
    height: 20px;
   
}
/* 尾部 */
.end{
    float: left;
    width: 2196px;
    height: 170px;
    background-color: #282825;
}
.end img{
   float: left;
   margin-left: 600px;
   margin-top: 15px;
}
.end  .fenge{
    float: left;
    color: #52524f;
    font-size: 60px;
}
.end .wenzi{
    float: left;
    margin-left: 15px;
    
}
.end .wenzi a{
    font-size: 8px;
    color: #6b6e6d;
}
.end .wenzi span{
    color: #6b6e6d;
}

(4)main.css

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  font-family: "微软雅黑", "宋体";
}
.icon {
  vertical-align: middle;
}
/* 头部 */
.top {
  width: 100%;
  height: 50px;
  background-color: white;
  margin: 0 auto;
}
.top .top_left {
  height: 50px;
  float: left;
  text-align: center;
}
.top .top_left:nth-child(1) {
  margin-left: 300px;
  line-height: 50px;
}
.top_right {
  float: left;
  margin-left: 270px;
}
.top_right a {
  line-height: 50px;
  color: black;
}
.top_right a:hover {
  color: blue;
}
.top_right span {
  color: #d3d3d4;
}
.top_right a:last-child {
  border: 1px solid #c3c2c8;
}
.top_right .icon {
  width: 15px;
  height: 15px;
}
a,
ul {
  list-style: none;
}
.nav {
  position: absolute;
  width: 100%;
  height: 472px;
  background: url(../images/bgtop.jpg);
  background-size: cover;
  margin: 0 auto;
}
.nav .nav_logo {
  float: left;
  position: relative;
  width: 350px;
  height: 100px;
  margin-top: 25px;
}
.nav .nav_ul {
  float: left;
  position: relative;
  left: 10px;
  top: 20px;
}
.nav .nav_ul li {
  text-align: center;
  float: left;
  width: 137px;
  height: 88px;
  margin-left: 5px;
  border-bottom: 3px solid red;
}
.nav .nav_ul li a:hover {
  color: red;
}
.nav .nav_ul li a {
  line-height: 88px;
  color: aliceblue;
}
.nav .nav_middle {
  width: 969px;
  height: 342px;
  position: relative;
  position: absolute;
  top: 112px;
  left: 370px;
}
.nav .nav_middle ul {
  display: none;
  float: left;
  position: relative;
}
.nav .nav_middle .wjsq {
  float: right;
  margin-top: -155px;
}
.nav .nav_middle li {
  width: 100px;
  text-align: center;
  margin-top: 10px;
  margin-left: 45px;
}
.nav .nav_middle .yzz li {
  margin-left: 5px;
}
.nav .nav_middle a {
  color: aliceblue;
}
.nav .nav_middle a:hover {
  color: red;
}
.nav .nav_middle:hover ul {
  display: block;
}
.nav .nav_ul:hover + .nav_middle ul {
  display: block;
}
.main {
  width: 100%;
  height: 2154px;
  background: url(../images/bgbot.jpg);
  background-size: cover;
  margin: 0 auto;
}
.main .left {
  position: relative;
  float: left;
  margin-left: 100px;
  margin-top: 472px;
  width: 303px;
  height: 431px;
}
.main .middle {
  position: relative;
  float: left;
  margin-top: 472px;
  width: 343px;
  height: 431px;
}
.main .middle-1 {
  margin-left: -50px;
  background: url(../images/新春礼包.jpeg);
  background-size: cover;
}
.main .middle-1 .mask {
  position: absolute;
  width: 343px;
  height: 431px;
  background: rgba(0, 0, 0, 0.5);
}
.main .middle-1 .mask h2 {
  position: relative;
  text-align: center;
  top: 200px;
  color: white;
}
.main .middle-1 .mask h3 {
  position: relative;
  top: 220px;
  color: white;
  text-align: center;
}
.main .middle-1 .mask a {
  position: relative;
  text-align: center;
  top: 280px;
  color: red;
  height: 20px;
}
.main .middle-1 .mask a img {
  vertical-align: middle;
}
.main .middle-2 .swiper {
  width: 345px;
  height: 431px;
}
.main #right {
  position: relative;
  float: left;
  margin-left: 10px;
  margin-top: 472px;
  width: 400px;
  height: 431px;
  background-color: #121318;
}
.main #right .right_dh ul {
  position: absolute;
  top: 20px;
  left: 25px;
  text-align: center;
}
.main #right .right_dh ul li {
  float: left;
  width: 70px;
  height: 45px;
  line-height: 45px;
  color: #978098;
  border-bottom: 1px solid #978098;
  cursor: pointer;
}
.main #right .right_dh ul li:hover {
  border-bottom: 3px solid red;
}
.main #right .right_nr {
  position: absolute;
  top: 75px;
  left: 25px;
  width: 360px;
  height: 320px;
}
.main #right .right_nr .r_box {
  display: none;
}
.main #right .right_nr h3 {
  text-align: center;
  color: #b42131;
}
.main #right .right_nr .gg {
  color: red;
}
.main #right .right_nr .hd {
  color: #6C2D2B;
}
.main #right .right_nr td:nth-child(2) {
  color: #978098;
}
.main #right .right_nr td:nth-child(3) {
  color: #546161;
}
.main #right .right_nr .checkmore {
  background-color: #121318;
  color: red;
  font-size: larger;
  width: 360px;
  text-align: center;
  border: 1px solid red;
}
.main #right .right_nr .checkmore img {
  color: red;
  width: 20px;
  height: 20px;
  line-height: 20px;
}
.main .main_2 {
  position: absolute;
  top: 980px;
  left: 100px;
}
.main .main_2 .main2_left {
  float: left;
  width: 224px;
  height: 415px;
  background-color: #121318;
  border: 10px solid;
  border-image: linear-gradient(to right, #B22231, #362537) 1;
}
.main .main_2 .main2_left .ksrk {
  width: 224px;
  height: 206px;
}
.main .main_2 .main2_left .ksrk p {
  padding: 10px;
  border-bottom: 1px solid #52524f;
  color: #B996B9;
  text-align: center;
}
.main .main_2 .main2_left .ksrk .p2 {
  margin-top: 150px;
}
.main .main_2 .main2_left .ksrk .ksrk_up {
  display: flex;
  height: 59.2px;
  flex-wrap: wrap;
}
.main .main_2 .main2_left .ksrk .ksrk_up div {
  text-align: center;
  width: 33.33%;
}
.main .main_2 .main2_left .ksrk .ksrk_up div span {
  color: #8E788F;
}
.main .main_2 .main2_left .ksrk .ksrk_up div span:hover {
  color: red;
}
.main .main_2 .main2_left .wjsq {
  display: flex;
  height: 59.2px;
  flex-wrap: wrap;
}
.main .main_2 .main2_left .wjsq div {
  text-align: center;
  width: 33.33%;
}
.main .main_2 .main2_left .wjsq div span {
  color: #8E788F;
}
.main .main_2 .main2_left .wjsq div span:hover {
  color: red;
}
.main .main_2 .main2_middle {
  float: left;
  margin-left: 10px;
  width: 686px;
  height: 435px;
  background-color: #1E1621;
}
.main .main_2 .main2_middle .hdzx_title {
  height: 100px ;
  border-bottom: 3px solid #6b6e6d;
}
.main .main_2 .main2_middle .hdzx_title span {
  margin-left: 40px;
  color: red;
  float: left;
  font-size: 35px;
  line-height: 100px;
}
.main .main_2 .main2_middle .hdzx_title .hdzx_title_right {
  float: right;
  margin: 0 auto;
  margin-right: 50px;
}
.main .main_2 .main2_middle .hdzx_title .hdzx_title_right li {
  margin-top: 35px;
  padding: 10px 10px 10px 10px;
  color: white;
  background-color: red;
  margin-right: 15px;
  border-radius: 7px;
  float: left;
}
.main .main_2 .main2_middle .hdzx_nr {
  height: 335px;
}
.main .main_2 .main2_middle .hdzx_nr .nr_nav {
  width: 686px;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.main .main_2 .main2_middle .hdzx_nr .nr_nav div {
  color: #B097B1;
  display: inline-block;
  width: 80px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-weight: bold;
}
.main .main_2 .main2_middle .hdzx_nr .nr_nav div:hover {
  color: red;
}
.main .main_2 .main2_middle .nr_nr {
  width: 686px;
  height: 235px ;
}
.main .main_2 .main2_middle .nr_nr table {
  color: #B097B1;
  width: 686px;
  height: 235px;
  text-align: center;
}
.main .main_2 .main2_middle .nr_nr table td:nth-child(3) {
  color: red;
}
.main .main_2 .main2_middle .nr_nr table tr:nth-child(1) {
  color: #CAA6CA;
  font-weight: bold;
  background-color: #69496D;
}
.main .main_2 .main2_middle .nr_nr table td {
  padding: 10px 20px 10px 20px;
}
.main .main_2 .main2_middle .nr_nr table button {
  color: white;
  padding: 5px 10px 5px 10px;
  background-color: #856E85;
}
.main .main_2 .main2_right {
  float: left;
  margin-left: 10px;
  width: 400px;
  height: 435px;
  background-color: #1E1621;
}
.main .main_2 .main2_right .gg_title {
  color: red;
  font-size: 35px;
  width: 400px;
  height: 100px;
  font-weight: bold;
}
.main .main_2 .main2_right .gg_title span {
  margin-left: 35px;
  line-height: 100px;
}
.main .main_2 .main2_right .gg_nr {
  width: 400px;
  height: 335px;
}
.main .main_2 .main2_right .gg_nr img {
  margin-top: 10px;
  margin-left: 25px;
  width: 350px;
  height: 150px;
}
.main .main_3 {
  position: absolute;
  top: 1440px;
  left: 100px;
}
.main .main_3 .main3_left {
  float: left;
  width: 224px;
  height: 415px;
  background-color: #121318;
  border: 10px solid;
  border-image: linear-gradient(to right, #B22231, #362537) 1;
}
.main .main_3 .main3_left .ksrk {
  width: 224px;
  height: 206px;
}
.main .main_3 .main3_left .ksrk p {
  padding: 10px;
  border-bottom: 1px solid #52524f;
  color: #B996B9;
  text-align: center;
}
.main .main_3 .main3_left .ksrk .p2 {
  margin-top: 150px;
}
.main .main_3 .main3_left .ksrk .ksrk_up {
  display: flex;
  height: 59.2px;
  flex-wrap: wrap;
}
.main .main_3 .main3_left .ksrk .ksrk_up div {
  text-align: center;
  width: 33.33%;
}
.main .main_3 .main3_left .ksrk .ksrk_up div span {
  color: #8E788F;
}
.main .main_3 .main3_left .ksrk .ksrk_up div span:hover {
  color: red;
}
.main .main_3 .main3_left .wjsq {
  display: flex;
  height: 59.2px;
  flex-wrap: wrap;
}
.main .main_3 .main3_left .wjsq div {
  text-align: center;
  width: 33.33%;
}
.main .main_3 .main3_left .wjsq div span {
  color: #8E788F;
}
.main .main_3 .main3_left .wjsq div span:hover {
  color: red;
}
.main .main_3 .main3_middle {
  float: left;
  margin-left: 10px;
  width: 686px;
  height: 435px;
  background-color: #1E1621;
}
.main .main_3 .main3_middle .hdzx_title {
  height: 100px ;
  border-bottom: 3px solid #6b6e6d;
}
.main .main_3 .main3_middle .hdzx_title span {
  margin-left: 40px;
  color: red;
  float: left;
  font-size: 35px;
  line-height: 100px;
}
.main .main_3 .main3_middle .hdzx_title .hdzx_title_right {
  float: right;
  margin: 0 auto;
  margin-right: 50px;
}
.main .main_3 .main3_middle .hdzx_title .hdzx_title_right li {
  margin-top: 35px;
  padding: 10px 10px 10px 10px;
  color: white;
  background-color: red;
  margin-right: 15px;
  border-radius: 7px;
  float: left;
}
.main .main_3 .main3_middle .hdzx_nr {
  height: 335px;
}
.main .main_3 .main3_middle .hdzx_nr .nr_nav2 {
  width: 686px;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.main .main_3 .main3_middle .hdzx_nr .nr_nav2 div {
  color: #B097B1;
  display: inline-block;
  width: 80px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-weight: bold;
}
.main .main_3 .main3_middle .hdzx_nr .nr_nav2 div:hover {
  color: red;
}
.main .main_3 .main3_middle .nr_nr2 {
  width: 686px;
  height: 235px ;
}
.main .main_3 .main3_middle .nr_nr2 table {
  color: #B097B1;
  width: 686px;
  height: 235px;
  text-align: center;
}
.main .main_3 .main3_middle .nr_nr2 table td:nth-child(3) {
  color: red;
}
.main .main_3 .main3_middle .nr_nr2 table tr:nth-child(1) {
  color: #CAA6CA;
  font-weight: bold;
  background-color: #69496D;
}
.main .main_3 .main3_middle .nr_nr2 table td {
  padding: 10px 20px 10px 20px;
}
.main .main_3 .main3_middle .nr_nr2 table button {
  color: white;
  padding: 5px 10px 5px 10px;
  background-color: #856E85;
}
.main .main_3 .main3_right {
  float: left;
  margin-left: 10px;
  width: 400px;
  height: 435px;
  background-color: #1E1621;
}
.main .main_3 .main3_right .gg_title {
  color: red;
  font-size: 35px;
  width: 400px;
  height: 100px;
  font-weight: bold;
}
.main .main_3 .main3_right .gg_title span {
  margin-left: 35px;
  line-height: 100px;
}
.main .main_3 .main3_right .gg_nr {
  width: 400px;
  height: 335px;
}
.main .main_3 .main3_right .gg_nr img {
  margin-top: 10px;
  margin-left: 25px;
  width: 350px;
  height: 150px;
}
.main .main_4 {
  position: absolute;
  top: 1900px;
  left: 100px;
}
.main .main_4 .li_123 {
  float: left;
  width: 940px;
  height: 300px;
  display: flex;
}
.main .main_4 .li_123 .li_1,
.main .main_4 .li_123 .li_2,
.main .main_4 .li_123 .li_3 {
  width: 33.3%;
  display: inline-block;
  background: url(../images/bg_end.png);
  background-size: cover;
}
.main .main_4 .li_123 .li_1 div,
.main .main_4 .li_123 .li_2 div,
.main .main_4 .li_123 .li_3 div {
  margin-top: 110px;
  text-align: center;
  color: #CBA4CB;
}
.main .main_4 .li_123 .li_1 div h5,
.main .main_4 .li_123 .li_2 div h5,
.main .main_4 .li_123 .li_3 div h5 {
  font-size: 35px;
  font-weight: bold;
}
.main .main_4 .li_ly {
  float: left;
  margin-left: 10px;
  width: 400px;
  height: 300px;
}
.main .main_4 .li_ly img {
  margin-top: -5px;
  width: 400px;
  height: 300px;
}
/* 尾部 */
.end {
  float: left;
  width: 100%;
  height: 170px;
  background-color: #282825;
}
.end img {
  float: left;
  margin-left: 200px;
  margin-top: 15px;
}
.end .fenge {
  float: left;
  color: #52524f;
  font-size: 60px;
}
.end .wenzi {
  float: left;
  margin-left: 15px;
}
.end .wenzi a {
  font-size: 8px;
  color: #6b6e6d;
}
.end .wenzi span {
  color: #6b6e6d;
}

(5) main.js

var lis= document.querySelectorAll(".right_dh >ul > li")
console.log(lis);
var r_boxs = document.querySelectorAll(".right_nr >div")
console.log(r_boxs);
  for (let i = 0; i < lis.length; i++) {
      lis[i].setAttribute("index",i);
      lis[i].onclick = function(){
        var index = this.getAttribute('index');
        console.log(index);
        for(let k =0;k<r_boxs.length;k++){
          r_boxs[k].style.display="none";
          r_boxs[index].style.display="block";
        }  
      } 
}

var lis2= document.querySelectorAll(".nr_nav> div")
var nr_box3 = document.querySelectorAll(".nr_nr >div")
  for (let i = 0; i < lis2.length; i++) {
      lis2[i].setAttribute("index",i);
      lis2[i].onclick = function(){
        var index = this.getAttribute('index');
        console.log(index);
        for(let k =0;k<nr_box3.length;k++){
          nr_box3[k].style.display="none";
          nr_box3[index].style.display="block";
        }  
      } 
}

var lis3= document.querySelectorAll(".nr_nav2> div")
var nr_box4 = document.querySelectorAll(".nr_nr2 >div")
  for (let i = 0; i < lis3.length; i++) {
      lis3[i].setAttribute("index",i);
      lis3[i].onclick = function(){
        var index = this.getAttribute('index');
        console.log(index);
        for(let k =0;k<nr_box4.length;k++){
          nr_box4[k].style.display="none";
          nr_box4[index].style.display="block";
        }  
      } 
}